/* Portal do Cidadão: usado sobretudo no celular (e no APK, que espelha esta tela) */
.pp .l-conteudo{ gap:var(--l-e4) }
.pp-sec{ display:flex; flex-direction:column; gap:var(--l-e4) }
.pp-sec[hidden]{ display:none }
.pp-grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--l-e4); align-items:start }
.pp-estreito{ max-width:760px; width:100% }
.pp-lista{ border:1px solid var(--l-borda); border-radius:var(--l-raio-2); background:var(--l-sup) }
.pp-lista .l-item[role="button"]{ cursor:pointer }
.pp-lista .l-item[role="button"]:hover{ background:var(--l-sup-2) }
.l-item.is-off .l-item-corpo b{ color:var(--l-texto-3); text-decoration:line-through }
.pp-sub{ margin:var(--l-e2) 0 0; font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto-2) }
.pp-just{ color:var(--l-erro) !important }
.pp-fim{ margin:4px 0 0; font-size:var(--l-t-peq); color:var(--l-ok) }
.pp-flag{ color:var(--l-atencao) }

/* data em caixinha */
.pp-dia{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:50px; border-radius:var(--l-raio-2); background:var(--l-marca-suave); color:var(--l-marca-tinta); flex:none }
.pp-dia b{ font-size:18px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums }
.pp-dia small{ font-size:var(--l-t-mini); text-transform:uppercase }
.pp-dia.is-off{ background:var(--l-sup-3); color:var(--l-texto-3) }
.pp-proximo{ display:flex; align-items:center; gap:var(--l-e4); margin-bottom:var(--l-e3) }
.pp-proximo b{ display:block; font-size:var(--l-t-med); font-weight:600 }
.pp-proximo small{ color:var(--l-texto-3); font-size:var(--l-t-peq) }

/* senha de atendimento: código grande; chamada fica verde */
.pp-senha{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--l-e2) var(--l-e4); padding:var(--l-e3) var(--l-e4); border:1px solid var(--l-borda); border-radius:var(--l-raio-2) }
.pp-senha + .pp-senha{ margin-top:var(--l-e2) }
.pp-senha small{ display:block; font-size:var(--l-t-peq); color:var(--l-texto-3) }
.pp-senha-cod{ display:block; font-size:24px; font-weight:600; letter-spacing:.02em; color:var(--l-marca-tinta); font-variant-numeric:tabular-nums }
.pp-senha-lado{ text-align:right }
.pp-senha .pp-fim{ grid-column:1 / -1 }
.pp-senha.is-chamada{ border-color:transparent; background:var(--l-ok); color:#fff }
.pp-senha.is-chamada :is(.pp-senha-cod, small, b){ color:#fff }

/* agendar: calendário e horários */
.pp-agendar{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--l-e4); align-items:start }
@media (max-width:900px){ .pp-agendar{ grid-template-columns:1fr } }
.pp-cal-semana, .pp-cal{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px }
.pp-cal-semana span{ text-align:center; font-size:var(--l-t-mini); color:var(--l-texto-3); padding-bottom:4px }
.pp-dia-cal{ display:flex; align-items:center; justify-content:center; height:44px; border:0; border-radius:var(--l-raio-1); background:none; font:inherit; font-variant-numeric:tabular-nums; color:var(--l-texto-3) }
.pp-dia-cal.is-avail{ background:var(--l-ok-fundo); color:var(--l-ok); font-weight:600; cursor:pointer }
.pp-dia-cal.is-avail:hover{ outline:2px solid var(--l-ok) }
.pp-dia-cal.is-selected{ background:var(--l-marca); color:#fff; font-weight:600 }
.pp-dia-cal.is-mine{ background:var(--l-marca-suave); color:var(--l-marca-tinta); font-weight:600; cursor:pointer; box-shadow:inset 0 0 0 2px var(--l-marca) }
.pp-dia-cal.is-past{ opacity:.45 }
.pp-cal-legenda{ display:flex; flex-wrap:wrap; gap:var(--l-e4); margin:var(--l-e3) 0 0; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.pp-cal-legenda span::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:3px; vertical-align:-1px; background:var(--l-sup-3) }
.pp-cal-legenda .is-avail::before{ background:var(--l-ok-fundo); box-shadow:inset 0 0 0 1px var(--l-ok) }
.pp-cal-legenda .is-mine::before{ background:var(--l-marca-suave); box-shadow:inset 0 0 0 2px var(--l-marca) }
.pp-slot-dia{ margin:0 0 var(--l-e3); font-weight:500 }
.pp-horarios{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:var(--l-e2) }
.pp-horario{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--l-e3) var(--l-e2); border:1px solid var(--l-borda); border-radius:var(--l-raio-2); background:var(--l-sup); font:inherit; cursor:pointer }
button.pp-horario:hover{ border-color:var(--l-marca); background:var(--l-marca-suave) }
.pp-horario b{ font-size:var(--l-t-med); font-weight:600; font-variant-numeric:tabular-nums }
.pp-horario small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.pp-horario.is-full{ opacity:.5; cursor:default }

/* conversa */
.pp-chat-lista{ display:flex; flex-direction:column; gap:var(--l-e2); height:min(56vh, 520px); overflow-y:auto; padding:var(--l-e4) var(--l-e5); background:var(--l-sup-2) }
.pp-chat-dica{ margin:auto; text-align:center; max-width:42ch }
.pp-msg{ align-self:flex-start; max-width:78%; padding:var(--l-e2) var(--l-e3); border-radius:12px 12px 12px 4px; background:var(--l-sup); border:1px solid var(--l-borda) }
.pp-msg.is-minha{ align-self:flex-end; border-radius:12px 12px 4px 12px; border-color:transparent; background:var(--l-marca); color:#fff }
.pp-msg p{ margin:0; white-space:pre-wrap; word-break:break-word }
.pp-msg small{ display:block; margin-top:2px; text-align:right; font-size:var(--l-t-mini); opacity:.7 }
.pp-msg-autor{ display:block; font-size:var(--l-t-mini); color:var(--l-marca-tinta) }
.pp-msg img{ display:block; max-width:220px; max-height:240px; border-radius:8px; cursor:zoom-in }
.pp-msg audio{ height:40px; max-width:230px }
.pp-msg-arquivo{ border:0; background:none; padding:0; font:inherit; font-weight:500; color:inherit; text-decoration:underline; cursor:pointer }
.pp-msg-carrega{ font-size:var(--l-t-mini); opacity:.7 }
.pp-chat-anexo{ display:flex; gap:var(--l-e2); padding:var(--l-e3) var(--l-e5) 0 }
.pp-chat-anexo[hidden]{ display:none }
.pp-chat-escrever{ display:flex; align-items:flex-end; gap:var(--l-e2); padding:var(--l-e3) var(--l-e5) var(--l-e4); border-top:1px solid var(--l-fio) }
.pp-chat-escrever textarea{ flex:1; min-width:0; min-height:40px; max-height:110px; resize:none }

/* perfil */
.pp-perfil{ display:flex; flex-direction:column; gap:var(--l-e4) }
.pp-perfil-id{ display:flex; flex-direction:column; margin:0 }
.pp-perfil-id b{ font-size:var(--l-t-titulo); font-weight:600 }

/* ficha (vacina, exame, comprovante) e QR */
.pp-ficha-corpo{ display:flex; flex-direction:column; gap:var(--l-e4); max-height:62vh; overflow:auto }
.pp-ficha-sec h4{ margin:0 0 4px; font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto-2) }
.pp-ficha-sec p{ margin:0 0 4px }
.pp-ficha-sec small{ color:var(--l-texto-3) }
.pp-etapas{ list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--l-fio) }
.pp-etapas li{ position:relative; padding:0 0 var(--l-e2) var(--l-e3) }
.pp-etapas li::before{ content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--l-marca); border:2px solid var(--l-sup) }
.pp-etapas b{ display:block; font-weight:500 }
.pp-etapas small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.pp-qr img{ display:block; width:100%; max-width:300px; margin:0 auto; aspect-ratio:1; object-fit:contain }

@media (max-width:640px){
  .pp .l-secoes-grupo:not(.com-rotulo){ overflow-x:auto }
  .pp-msg{ max-width:88% }
  .pp-chat-escrever{ flex-wrap:wrap }
  .pp-chat-escrever textarea{ flex-basis:100% }
}
#portal-next-appt{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--l-e3) }
#portal-next-appt > p{ margin:0 }