/* ==========================================================================
   Vitrall Saúde · PORTAL DO CIDADÃO

   ── POR QUE UM ARQUIVO PRÓPRIO, E NÃO MAIS UM BLOCO EM 04-telas.css ────────

   Porque o portal não é uma tela do sistema. As telas de `04-telas.css` vivem
   dentro do casco: têm menu à esquerda, cabeçalho, largura de monitor de
   guichê e um usuário logado com perfil. O portal não tem nada disso — ele é
   uma página autocontida, como a da TV, e a regra de layout dele é outra.

   ── A REGRA DE LAYOUT: O TELEFONE É O CASO PRINCIPAL ───────────────────────

   Quem usa portal de prefeitura usa no celular, em pé, na fila, com uma mão. O
   desenho daqui nasce em 360px de largura e CRESCE para o monitor — o inverso
   do resto do sistema, onde a tela de trabalho é a régua. Por isso não há
   `@media (max-width: …)` neste arquivo: o estado base JÁ é o telefone, e as
   duas únicas media queries são `min-width`, para aproveitar a sobra.

   ── O QUE ESTE ARQUIVO NÃO FAZ ─────────────────────────────────────────────

   Não redefine botão, campo, chip, cartão, lista vazia nem tipografia: tudo
   isso vem de `02-base.css` e `03-componentes.css` e é o mesmo do sistema. O
   que está aqui é só o que o portal tem e o sistema não: a barra de cima
   pública, as abas roláveis, o cartão da senha, o cartão de trava por nível e
   a moldura do QR.

   Toda cor, raio, sombra e espaçamento sai de `01-tokens.css`. Nenhum valor
   literal de cor neste arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A moldura
   -------------------------------------------------------------------------- */

.portal {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--fundo-tela);
}

/* --------------------------------------------------------------------------
   2. A barra de cima

   Fica colada no topo porque o portal rola muito no telefone, e o botão "Sair"
   longe do polegar é o botão que ninguém acha — e num portal de saúde, sair é
   o gesto que a pessoa faz quando devolve o celular emprestado.
   -------------------------------------------------------------------------- */

/* AS BORDAS DO APARELHO (25/09/2026). O portal desenha até a borda do
   celular — por baixo do relógio e da barra de gestos. O iPhone (PWA) informa
   o recuo pelo env(safe-area-inset-*); o APK informa pelo --app-topo/--app-pe,
   que o próprio app escreve na página (o WebView do Android nem sempre dá o
   env()). Vale o maior dos dois. */
:root {
  --seguro-topo: max(env(safe-area-inset-top, 0px), var(--app-topo, 0px));
  --seguro-pe: max(env(safe-area-inset-bottom, 0px), var(--app-pe, 0px));
}

.portal__topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--cartao);
  border-bottom: 1px solid var(--contorno);
  padding-top: var(--seguro-topo);
}
.portal__topo-dentro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e12);
  max-width: 720px; margin: 0 auto;
  padding: var(--e10) var(--e16);
}

.portal__marca { display: flex; align-items: center; gap: var(--e10); min-width: 0; }
.portal__logo { width: 30px; height: 30px; flex-shrink: 0; }
.portal__logo .vitral { width: 100%; height: 100%; display: block; }
/* COM A SESSÃO ABERTA, O NOME DO PORTAL SAI DA BARRA NO TELEFONE. Sino, selo e
   "Sair" ocupam a largura, e o nome era cortado em "Portal do cida…" atrás do
   sino. Dentro do portal o "Olá, Fulano." já diz onde a pessoa está; na porta
   de entrada (sem os botões à direita) o nome continua. Volta em tela maior. */
.portal__marca-texto { display: flex; flex-direction: column; min-width: 0; }
.portal__topo-dentro:has(.portal__topo-direita:not([hidden])) .portal__marca-texto { display: none; }
.portal__marca-nome {
  font-size: 15px; font-weight: 600; color: var(--texto);
  letter-spacing: -.01em; white-space: nowrap;
}
.portal__marca-apoio { font-size: 11px; color: var(--texto-apoio); letter-spacing: .06em; text-transform: uppercase; }

.portal__topo-direita { display: flex; align-items: center; gap: var(--e8); flex-shrink: 0; }

/* O SELO DE NÍVEL é botão, e não etiqueta: clicar nele abre a explicação do
   que aquele nível abre e do que falta para o próximo. Um distintivo que não
   se pode perguntar "o que é isso?" é um distintivo que só quem escreveu
   entende. */
.portal__selo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--e12); border-radius: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--neutro-fundo); color: var(--neutro-texto);
}
.portal__selo::before {
  content: ''; width: 8px; height: 8px; border-radius: 4px; background: currentColor;
}
.portal__selo[data-nivel="bronze"] { background: var(--atencao-fundo); color: var(--atencao-texto); }
.portal__selo[data-nivel="prata"]  { background: var(--info-fundo);    color: var(--info-texto); }
.portal__selo[data-nivel="ouro"]   { background: var(--ok-fundo);      color: var(--ok-texto); }

/* --------------------------------------------------------------------------
   3. O corpo
   -------------------------------------------------------------------------- */

.portal__corpo {
  flex: 1;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: var(--e16) var(--e16) var(--e32);
  display: flex; flex-direction: column; gap: var(--e16);
}

/* As duas telas da página — a porta e o portal. Uma está sempre `hidden`; as
   duas são coluna com o mesmo ar, para a troca não mexer no ritmo vertical. */
.portal__entrada,
.portal__dentro { display: flex; flex-direction: column; gap: var(--e16); }

.portal__cartao { padding: var(--e20); }

.portal__capa { padding: var(--e12) var(--e4) 0; }
.portal__capa-titulo {
  margin: 0 0 var(--e8);
  font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
  color: var(--texto);
}
.portal__capa-lide { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-apoio); }

/* --------------------------------------------------------------------------
   4. As três portas de entrada
   -------------------------------------------------------------------------- */

.portal__portas { width: 100%; margin-bottom: var(--e16); }
.portal__portas .segmentado__item { flex: 1; justify-content: center; }

.portal__form { display: flex; flex-direction: column; gap: var(--e12); }
.portal__form-lide { margin: 0 0 var(--e4); line-height: 1.55; }
.portal__form-pe { margin: var(--e4) 0 0; line-height: 1.55; }
.portal__mostrar { background: var(--secundario); border-radius: 20px; flex-shrink: 0; }
.portal__codigo { text-transform: uppercase; letter-spacing: .3em; }

/* A POLÍTICA DE SENHA APARECE ENQUANTO SE DIGITA, e não depois de errar. Cada
   item acende sozinho — é a diferença entre "senha fraca" e saber qual regra
   falta. */
.portal__regras { list-style: none; margin: 0; padding: 0 var(--e4); display: flex; flex-direction: column; gap: 5px; }
.portal__regra {
  display: flex; align-items: center; gap: var(--e8);
  font-size: 13px; color: var(--texto-apoio);
}
.portal__regra::before {
  content: ''; width: 7px; height: 7px; border-radius: 4px; flex-shrink: 0;
  background: var(--cinza-tracejado);
}
.portal__regra--ok { color: var(--ok-texto); }
.portal__regra--ok::before { background: var(--ok-cheia); }

.portal__erro {
  margin: var(--e12) 0 0; padding: var(--e12) var(--e14);
  border-radius: var(--r-bloco);
  background: var(--critico-fundo); color: var(--critico-texto);
  font-size: 14px; line-height: 1.55;
}
.portal__erro strong { display: block; margin-bottom: 3px; }

.portal__niveis { display: flex; flex-direction: column; gap: var(--e14); }
.portal__nivel { display: flex; gap: var(--e12); align-items: flex-start; }
.portal__nivel-selo {
  flex-shrink: 0; width: 64px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 0; border-radius: 11px;
  background: var(--neutro-fundo); color: var(--neutro-texto);
}
.portal__nivel-selo[data-nivel="bronze"] { background: var(--atencao-fundo); color: var(--atencao-texto); }
.portal__nivel-selo[data-nivel="prata"]  { background: var(--info-fundo);    color: var(--info-texto); }
.portal__nivel-selo[data-nivel="ouro"]   { background: var(--ok-fundo);      color: var(--ok-texto); }

/* --------------------------------------------------------------------------
   5. As abas

   Rolam na horizontal no telefone em vez de quebrarem em duas linhas: duas
   linhas de abas empurram o conteúdo para fora da primeira dobra, e a primeira
   dobra é onde mora a senha da fila.
   -------------------------------------------------------------------------- */

.rolavel-x { overflow-x: auto; scrollbar-width: none; }
.rolavel-x::-webkit-scrollbar { display: none; }

.portal__abas {
  display: flex; gap: var(--e6);
  padding: var(--e4) 0 var(--e8);
  /* A sangria negativa deixa a primeira e a última aba encostarem na borda da
     tela ao rolar, em vez de pararem 16px antes — é o que faz a rolagem
     parecer que continua. */
  margin: 0 calc(-1 * var(--e16));
  padding-left: var(--e16); padding-right: var(--e16);
}
.portal__aba {
  flex-shrink: 0;
  height: 36px; padding: 0 var(--e14); border-radius: 18px;
  font-size: 14px; color: var(--texto-apoio);
  background: var(--cartao); border: 1px solid var(--contorno);
  white-space: nowrap;
}
.portal__aba[aria-current="true"] {
  background: var(--azul-primario); color: var(--sobre-acento);
  border-color: var(--azul-primario); font-weight: 600;
}
.portal__aba[data-trancada="sim"]::after {
  content: '·'; margin-left: 6px; color: var(--atencao-cheia); font-weight: 600;
}

.portal__painel { display: flex; flex-direction: column; gap: var(--e14); }

/* --------------------------------------------------------------------------
   6. O cartão da senha — a primeira dobra

   É o maior elemento da tela de propósito: a pergunta que traz a pessoa ao
   portal na sala de espera é "quantos faltam para mim?", e ela precisa ser
   respondida de longe, com o celular na altura da cintura.
   -------------------------------------------------------------------------- */

.portal__senha {
  background: var(--azul-escuro); color: var(--sobre-forte);
  border-radius: var(--r-cartao); padding: var(--e20);
  display: flex; flex-direction: column; gap: var(--e12);
}
.portal__senha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e12); }
.portal__senha-rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sobre-escuro);
}
.portal__senha-numero {
  font-family: var(--mono); font-size: 46px; font-weight: 500; line-height: 1;
  letter-spacing: -.02em;
}
.portal__senha-linha { display: flex; flex-wrap: wrap; gap: var(--e8); }
.portal__senha-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 12px;
  background: var(--sobre-veu-2); color: var(--sobre-escuro-forte);
  font-size: 12px; font-weight: 600;
}
.portal__senha-frente {
  display: flex; align-items: baseline; gap: var(--e8);
  padding-top: var(--e10); border-top: 1px solid var(--sobre-borda);
}
.portal__senha-frente-n { font-size: 30px; font-weight: 600; line-height: 1; }
.portal__senha-frente-t { font-size: 14px; color: var(--sobre-escuro); }
.portal__senha-chamada {
  background: var(--critico-cheia); color: var(--sobre-critico);
  border-radius: var(--r-bloco); padding: var(--e12) var(--e14);
  font-size: 15px; font-weight: 600; line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Os avisos do início
   -------------------------------------------------------------------------- */

.portal__faixa {
  display: flex; gap: var(--e12); align-items: flex-start;
  padding: var(--e14); border-radius: var(--r-bloco);
  background: var(--sup-andamento); border: 1px solid var(--borda-andamento);
}
.portal__faixa--atencao { background: var(--sup-atencao); border-color: var(--borda-atencao); }
.portal__faixa--critico { background: var(--sup-critico); border-color: var(--borda-critico); }
.portal__faixa-ponto { width: 8px; height: 8px; border-radius: 4px; margin-top: 7px; flex-shrink: 0; background: var(--info-cheia); }
.portal__faixa--atencao .portal__faixa-ponto { background: var(--atencao-cheia); }
.portal__faixa--critico .portal__faixa-ponto { background: var(--critico-cheia); }
.portal__faixa-titulo { font-size: 15px; font-weight: 600; color: var(--texto); margin-bottom: 3px; }
.portal__faixa-texto { font-size: 14px; line-height: 1.55; color: var(--texto-corrente); }

/* --------------------------------------------------------------------------
   8. A TRAVA POR NÍVEL — o cartão que EXPLICA em vez de esconder

   É o elemento mais importante deste arquivo. Uma seção que some faz a pessoa
   concluir que o sistema não tem o dado dela; um "acesso negado" faz concluir
   que o sistema quebrou. Este cartão diz o que falta e onde resolver, e fica
   no lugar exato onde o conteúdo estaria.
   -------------------------------------------------------------------------- */

.portal__trava {
  background: var(--cartao); border: 1px solid var(--borda-atencao);
  border-radius: var(--r-cartao); padding: var(--e20);
  display: flex; flex-direction: column; gap: var(--e10);
}
.portal__trava-topo { display: flex; align-items: center; gap: var(--e10); }
.portal__trava-titulo { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.portal__trava-porque { font-size: 15px; line-height: 1.6; color: var(--texto-corrente); margin: 0; }
.portal__trava-como {
  margin: 0; padding: var(--e12) var(--e14);
  border-radius: var(--r-bloco); background: var(--sup-atencao);
  font-size: 14px; line-height: 1.55; color: var(--atencao-texto);
}

/* --------------------------------------------------------------------------
   9. As listas
   -------------------------------------------------------------------------- */

.portal__bloco { display: flex; flex-direction: column; gap: var(--e10); }
.portal__bloco-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e10);
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-apoio);
  padding: 0 var(--e4);
}

.portal__linha {
  background: var(--cartao); border: 1px solid var(--contorno);
  border-radius: var(--r-linha); padding: var(--e14);
  display: flex; flex-direction: column; gap: 5px;
}
.portal__linha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e10); }
.portal__linha-titulo { font-size: 16px; font-weight: 600; color: var(--texto); letter-spacing: -.01em; }
.portal__linha-apoio { font-size: 14px; color: var(--texto-apoio); line-height: 1.5; }
.portal__linha-quando { font-family: var(--mono); font-size: 14px; color: var(--texto-corrente); }
.portal__linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e8); margin-top: var(--e6); }
.portal__linha-recusa {
  font-size: 13px; line-height: 1.5; color: var(--atencao-texto);
  background: var(--sup-atencao); border-radius: var(--r-tile);
  padding: var(--e8) var(--e10); margin-top: var(--e6);
}

/* O valor de laboratório: número em mono, e a seta ao lado — nunca só cor.
   Cor sozinha não chega a quem não distingue vermelho de verde, e este é o
   dado em que errar custa mais. */
.portal__analito {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e10);
  padding: var(--e10) 0; border-bottom: 1px solid var(--divisor-claro);
}
.portal__analito:last-child { border-bottom: 0; }
.portal__analito-nome { font-size: 15px; color: var(--texto-corrente); }
.portal__analito-valor { font-family: var(--mono); font-size: 16px; color: var(--texto); white-space: nowrap; }
.portal__analito-ref { font-size: 12px; color: var(--texto-apoio); }
.portal__analito--alto .portal__analito-valor::after  { content: ' ▲'; color: var(--critico-texto); }
.portal__analito--baixo .portal__analito-valor::after { content: ' ▼'; color: var(--info-texto); }
.portal__analito--critico .portal__analito-valor { color: var(--critico-texto); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. O QR — buscado por fetch e injetado como blob, nunca por URL com token
   -------------------------------------------------------------------------- */

.portal__qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--e10);
  padding: var(--e16); border-radius: var(--r-bloco);
  background: var(--cartao); border: 1px solid var(--contorno);
}
.portal__qr img { width: 200px; height: 200px; display: block; }

/* O resultado abre DENTRO da linha do exame, e não num modal: num telefone o
   modal cobre o nome do exame, que é justamente o que a pessoa confere antes
   de ler o número. */
.portal__resultado {
  display: flex; flex-direction: column; gap: var(--e12);
  margin-top: var(--e12); padding: var(--e16);
  border-radius: var(--r-bloco);
  background: var(--linha-lista); border: 1px solid var(--contorno);
}
.portal__qr-apoio { font-size: 13px; color: var(--texto-apoio); text-align: center; line-height: 1.5; max-width: 32ch; }

/* --------------------------------------------------------------------------
   11. A conversa dos recados
   -------------------------------------------------------------------------- */

.portal__conversa { display: flex; flex-direction: column; gap: var(--e8); }
.portal__balao {
  padding: var(--e12) var(--e14); border-radius: var(--r-bloco);
  font-size: 15px; line-height: 1.55; max-width: 92%;
}
.portal__balao--meu {
  align-self: flex-end;
  background: var(--info-fundo); color: var(--info-texto);
  border-bottom-right-radius: var(--e6);
}
.portal__balao--unidade {
  align-self: flex-start;
  background: var(--linha-lista); color: var(--texto-corrente);
  border: 1px solid var(--contorno); border-bottom-left-radius: var(--e6);
}
.portal__balao-autor { font-size: 12px; font-weight: 600; margin-bottom: 4px; opacity: .8; }
.portal__balao-quando { font-size: 11px; margin-top: 5px; opacity: .7; font-family: var(--mono); }

/* --------------------------------------------------------------------------
   12. Carregando e rodapé
   -------------------------------------------------------------------------- */

.portal__carregando {
  display: flex; align-items: center; justify-content: center; gap: var(--e10);
  padding: var(--e32);
}
.portal__pulso {
  width: 10px; height: 10px; border-radius: 5px; background: var(--azul-primario);
  animation: portal-pulso 1s ease-in-out infinite;
}
@keyframes portal-pulso { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .portal__pulso { animation: none; opacity: .6; } }

.portal__rodape {
  border-top: 1px solid var(--contorno);
  background: var(--cartao);
  padding: var(--e20) var(--e16) calc(var(--e20) + var(--seguro-pe));
  text-align: center;
}
.portal__rodape p { margin: 0 0 var(--e6); line-height: 1.55; }
.portal__rodape p:last-child { margin-bottom: 0; }
.portal__rodape strong { color: var(--critico-texto); }

/* --------------------------------------------------------------------------
   13. A sobra de tela grande

   Nada muda de estrutura — só o ar. O portal continua sendo uma coluna: duas
   colunas num portal de nove seções fariam a pessoa procurar de que lado está
   o que ela veio ver.
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .portal__topo-dentro:has(.portal__topo-direita:not([hidden])) .portal__marca-texto { display: flex; }
  .portal__corpo { padding: var(--e26) var(--e20) var(--e32); gap: var(--e20); }
  .portal__capa-titulo { font-size: 32px; }
  .portal__senha-numero { font-size: 58px; }
  .portal__abas { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
}

@media (min-width: 960px) {
  .portal__topo-dentro, .portal__corpo { max-width: 780px; }
}

.portal__urgencia { margin: 0; padding: 0 var(--e4); text-align: center; line-height: 1.55; }
.portal__urgencia strong { color: var(--critico-texto); }



/* --------------------------------------------------------------------------
   14. O sino do paciente (173)

   Fica na barra de cima, ao lado do selo, e não numa aba perdida no fim da
   fileira: "tem novidade para mim?" é a segunda pergunta de quem abre o
   portal, logo depois de "quantos faltam na fila?".
   -------------------------------------------------------------------------- */

.portal__sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 18px;
  background: var(--cartao); border: 1px solid var(--contorno); color: var(--texto-corrente);
}
.portal__sino svg { width: 18px; height: 18px; }
.portal__sino-n {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--critico-cheia); color: var(--sobre-critico);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.portal__linha--nova { border-color: var(--borda-andamento); background: var(--sup-andamento); }

/* --------------------------------------------------------------------------
   15. Marcar consulta — onde, quando, qual horário

   O calendário é uma GRADE DE SETE, como o de parede: é o desenho que a pessoa
   já sabe ler. O dia sem vaga fica apagado e não clicável, e o dia com vaga
   diz QUANTAS — "tem vaga" sem número faz a pessoa escolher o dia errado.
   -------------------------------------------------------------------------- */

.portal__cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e12);
  width: 100%; padding: var(--e16); border-radius: var(--r-cartao); text-align: left;
  background: var(--info-fundo); color: var(--info-texto);
  border: 1px solid var(--borda-andamento);
}
.portal__cta-titulo { font-size: 16px; font-weight: 600; }
.portal__cta-apoio { font-size: 13px; line-height: 1.5; }

.portal__passos { display: flex; gap: var(--e6); flex-wrap: wrap; }
.portal__passo {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 12px;
  background: var(--neutro-fundo); color: var(--neutro-texto);
}
.portal__passo[aria-current="step"] { background: var(--azul-primario); color: var(--sobre-acento); }

.portal__opcao { text-align: left; width: 100%; }

.portal__mes { display: flex; align-items: center; justify-content: space-between; gap: var(--e10); }
.portal__mes-nome { font-size: 16px; font-weight: 600; color: var(--texto); }
.portal__calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e6); }
.portal__semana {
  font-size: 11px; font-weight: 600; text-align: center; color: var(--texto-apoio);
  text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px;
}
.portal__dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; border-radius: var(--r-tile);
  background: var(--linha-lista); color: var(--texto-apoio);
  border: 1px solid transparent; font-size: 15px;
}
.portal__dia--vaga {
  background: var(--cartao); color: var(--texto); border-color: var(--contorno); font-weight: 600;
}
.portal__dia--vaga small { font-size: 10px; font-weight: 500; color: var(--ok-texto); }
.portal__dia[aria-pressed="true"] { background: var(--azul-primario); color: var(--sobre-acento); border-color: var(--azul-primario); }
.portal__dia[aria-pressed="true"] small { color: var(--sobre-acento); }
.portal__dia--fora { background: transparent; }

.portal__horarios { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e8); }
.portal__horario {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--e12); border-radius: var(--r-tile);
  background: var(--cartao); border: 1px solid var(--contorno);
}
.portal__horario[aria-pressed="true"] { border-color: var(--azul-primario); background: var(--info-fundo); }
.portal__horario[disabled] { opacity: .55; }
.portal__horario-hora { font-family: var(--mono); font-size: 18px; color: var(--texto); }
.portal__horario-apoio { font-size: 12px; line-height: 1.4; color: var(--texto-apoio); }
.portal__horario-restricao { font-size: 12px; line-height: 1.4; color: var(--atencao-texto); }

/* --------------------------------------------------------------------------
   16. O detalhe em pares rótulo → valor (vacina, exame, comprovante)
   -------------------------------------------------------------------------- */

.portal__pares { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e10) var(--e14); margin: 0; }
.portal__pares > div { min-width: 0; }
.portal__pares dt {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-apoio);
}
.portal__pares dd { margin: 2px 0 0; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.portal__detalhe {
  display: flex; flex-direction: column; gap: var(--e12);
  margin-top: var(--e10); padding: var(--e14);
  border-radius: var(--r-bloco); background: var(--linha-lista); border: 1px solid var(--contorno);
}
.portal__secao-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-apoio); margin: var(--e4) 0 0;
}
.portal__texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-corrente); white-space: pre-line; }
.portal__lista-simples { margin: 0; padding-left: var(--e16); display: flex; flex-direction: column; gap: 4px; }
.portal__lista-simples li { font-size: 14px; line-height: 1.5; color: var(--texto-corrente); }

/* --------------------------------------------------------------------------
   17. O termo de uso dos dados e o comunicado
   -------------------------------------------------------------------------- */

.portal__termo { display: flex; flex-direction: column; gap: var(--e14); }
.portal__termo h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.portal__termo h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--texto); }
.portal__termo p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-corrente); }
.portal__termo-acoes { display: flex; flex-direction: column; gap: var(--e8); }

/* --------------------------------------------------------------------------
   18. O PAPEL — comprovante de agendamento, de atendimento, carteira de
       vacina e laudo

   Papel na mão é o item 14 da régua dos painéis: a pessoa sai da tela com o
   que mostrar no balcão, no outro serviço, no trabalho. O documento é montado
   num contêiner próprio e impresso pelo navegador — "Salvar como PDF" está no
   mesmo diálogo, em qualquer celular.

   As cores do papel são LITERAIS de propósito: o papel é preto no branco em
   qualquer tema. Um comprovante impresso a partir do tema escuro sairia cinza
   sobre cinza — ou gastaria o cartucho inteiro de quem imprime em casa.
   -------------------------------------------------------------------------- */

.portal__impressao { display: none; }

@media print {
  body.portal--imprimindo > *:not(.portal__impressao) { display: none !important; }
  body.portal--imprimindo .portal__impressao { display: block; }
  body.portal--imprimindo { background: #fff; }
}

.papel { color: #111; font-size: 11pt; line-height: 1.45; }
.papel h1 { font-size: 15pt; margin: 0 0 2pt; }
.papel h2 { font-size: 10pt; margin: 12pt 0 4pt; text-transform: uppercase; letter-spacing: .06em; }
.papel p { margin: 0 0 4pt; }
.papel table { width: 100%; border-collapse: collapse; margin: 4pt 0; }
.papel th, .papel td { text-align: left; padding: 3pt 4pt; border-bottom: .5pt solid #999; vertical-align: top; }
.papel__topo { display: flex; justify-content: space-between; gap: 12pt; border-bottom: 1pt solid #111; padding-bottom: 6pt; margin-bottom: 8pt; }
.papel__pe { margin-top: 14pt; font-size: 9pt; color: #444; border-top: .5pt solid #999; padding-top: 4pt; }

/* --------------------------------------------------------------------------
   19. A aparência escolhida pela pessoa (claro, escuro, igual ao celular)
   -------------------------------------------------------------------------- */

.portal__tema { width: 100%; }
.portal__tema .segmentado__item { flex: 1; justify-content: center; }
.portal__tema .segmentado__item[aria-checked="true"] {
  background: var(--azul-primario); color: var(--sobre-acento);
}

/* O início de quem ainda não tem nada marcado: o que dá para fazer AQUI, e o
   que falta para o resto — em vez de um cartão vazio no meio da tela. */
.portal__atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e8); }
.portal__atalho {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--e14); border-radius: var(--r-bloco);
  background: var(--cartao); border: 1px solid var(--contorno);
}
.portal__atalho-titulo { font-size: 15px; font-weight: 600; color: var(--texto); }
.portal__atalho-apoio { font-size: 12px; line-height: 1.4; color: var(--texto-apoio); }
.portal__atalho[data-trancada="sim"] .portal__atalho-titulo::after {
  content: ' ·'; color: var(--atencao-cheia);
}

/* --------------------------------------------------------------------------
   20. A TELA DE COMPUTADOR — o portal usa a largura (24/09/2026)

   A primeira versão era "uma coluna, só com mais ar" até 780px, e no monitor
   sobrava metade da tela dos dois lados ("a versão web não está usando a tela
   toda"). A partir de 1024px:

   • as abas viram MENU LATERAL fixo — 13 abas em duas linhas de pílulas eram
     o que a pessoa tinha de ler antes de chegar ao conteúdo;
   • listas de linhas vão para DUAS colunas, atalhos para três, horários para
     quatro — o que é grade se espalha;
   • o que é leitura (termo, calendário, formulário) NÃO estica: linha de texto
     de 1200px não se lê, e um calendário de 1000px de largura tem dias do
     tamanho de um botão de elevador;
   • a porta de entrada vira duas colunas: quem é o portal à esquerda, o
     formulário à direita.

   O telefone continua sendo o caso base — nada acima de 1024px muda a
   estrutura do que está abaixo dele.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .portal__topo-dentro, .portal__corpo { max-width: 1280px; }
  .portal__topo-dentro { padding-left: var(--e32); padding-right: var(--e32); }
  .portal__corpo { padding: var(--e26) var(--e32) var(--e32); }

  /* A porta de entrada */
  .portal__entrada {
    display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    column-gap: var(--e32); row-gap: var(--e16); align-items: start;
    padding-top: var(--e20);
  }
  .portal__entrada > .portal__capa { grid-column: 1; grid-row: 1; padding-top: var(--e32); }
  .portal__entrada .portal__cartao:not(.portal__dobra) { grid-column: 2; grid-row: 1 / span 3; }
  .portal__entrada .portal__dobra { grid-column: 1; grid-row: 2; }
  .portal__entrada > .portal__urgencia { grid-column: 1; grid-row: 3; text-align: left; }
  .portal__capa-titulo { font-size: 40px; }
  .portal__capa-lide { font-size: 17px; max-width: 52ch; }

  /* O menu lateral */
  .portal__dentro {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--e26); align-items: start;
  }
  .portal__abas {
    position: sticky; top: 76px;
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    margin: 0; padding: var(--e8);
    background: var(--cartao); border: 1px solid var(--contorno); border-radius: var(--r-cartao);
  }
  .portal__aba {
    display: flex; align-items: center; justify-content: flex-start;
    height: 40px; width: 100%; border-radius: var(--r-tile);
    background: transparent; border-color: transparent; text-align: left;
  }
  .portal__aba:hover { background: var(--linha-lista); }
  .portal__aba[aria-current="true"]:hover { background: var(--azul-primario); }

  /* O conteúdo */
  .portal__painel { gap: var(--e16); }
  .portal__bloco:has(> .portal__linha + .portal__linha) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e12);
  }
  .portal__bloco:has(> .portal__linha + .portal__linha) > .portal__bloco-titulo { grid-column: 1 / -1; }
  .portal__atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal__horarios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal__pares { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* O que é leitura não estica */
  .portal__termo, .portal__cartao:has(.portal__calendario), #form-recado,
  #form-ouvidoria, #form-contato, #form-senha-nova { max-width: 760px; }
  .portal__cartao:has(.portal__calendario) { max-width: 620px; }
}

/* O ícone de pessoa na aba "Meus dados" — o mesmo do botão de perfil da barra. */
.portal__aba--perfil { display: inline-flex; align-items: center; gap: 6px; }
.portal__aba--perfil svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   21. Entrar com gov.br (176)
   -------------------------------------------------------------------------- */

.portal__govbr { display: flex; flex-direction: column; gap: var(--e8); margin-bottom: var(--e16); }
.portal__govbr-botao {
  display: flex; align-items: center; justify-content: center; gap: var(--e8);
  width: 100%; min-height: 48px; border-radius: 24px;
  background: var(--azul-primario); color: var(--sobre-acento);
  font-size: 16px;
}
.portal__govbr-botao strong { font-weight: 700; letter-spacing: -.01em; }
.portal__govbr-botao[data-espera="sim"] { background: var(--neutro-fundo); color: var(--neutro-texto); }
.portal__govbr-selo {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px;
  background: var(--atencao-fundo); color: var(--atencao-texto);
}
.portal__govbr-apoio { margin: 0; text-align: center; line-height: 1.5; }
.portal__ou {
  display: flex; align-items: center; gap: var(--e10);
  font-size: 12px; color: var(--texto-apoio); margin-top: var(--e4);
}
.portal__ou::before, .portal__ou::after { content: ''; flex: 1; height: 1px; background: var(--contorno); }

/* --------------------------------------------------------------------------
   22. A ENTRADA CABE NA TELA (24/09/2026 — "tira a rolagem do login")

   Medido antes: no celular de 390x844 a entrada passava 485 px da tela (756 no
   "Primeiro acesso"). O que saiu do telefone não saiu do portal: o parágrafo
   da capa, as frases de apoio do gov.br e de cada porta voltam a partir de
   640 px, e "o que cada nível abre" ficou dobrado a um toque.
   -------------------------------------------------------------------------- */

.portal__entrada .portal__capa { padding-top: 0; }
.portal__entrada .portal__capa-titulo { font-size: 22px; margin: 0; }
.portal__entrada .portal__capa-lide,
.portal__entrada .portal__form-lide,
.portal__entrada .portal__govbr-apoio { display: none; }
.portal__entrada .portal__cartao:not(.portal__dobra) { padding: var(--e16); }
.portal__entrada .portal__govbr { margin-bottom: var(--e12); }
.portal__portas { margin-bottom: var(--e12); }
.portal__portas .segmentado__item { white-space: nowrap; font-size: 14px; padding-left: 0; padding-right: 0; }
.portal__entrada .portal__form { gap: var(--e10); }
.portal__urgencia { font-size: 12px; }

/* A tela de entrada não tem rodapé: o aviso de urgência já está nela. */
body:has(#tela-entrada:not([hidden])) .portal__rodape { display: none; }

.portal__dobra { padding: 0; }
.portal__dobra > summary {
  cursor: pointer; list-style: none;
  padding: var(--e12) var(--e16);
  font-size: 14px; font-weight: 600; color: var(--azul-primario);
}
.portal__dobra > summary::-webkit-details-marker { display: none; }
.portal__dobra > summary::after { content: ' ▾'; }
.portal__dobra[open] > summary::after { content: ' ▴'; }
.portal__dobra > .portal__niveis { padding: 0 var(--e16) var(--e16); }

@media (min-width: 640px) {
  .portal__entrada .portal__capa-titulo { font-size: 30px; margin-bottom: var(--e8); }
  .portal__entrada .portal__capa-lide,
  .portal__entrada .portal__form-lide,
  .portal__entrada .portal__govbr-apoio { display: block; }
  .portal__entrada .portal__cartao:not(.portal__dobra) { padding: var(--e20); }
}
@media (min-width: 1024px) {
  .portal__entrada .portal__capa-titulo { font-size: 40px; }
}

/* O ar do topo da entrada: menos no telefone (o "Primeiro acesso" passava 53 px
   num aparelho de 360x740) e menos no monitor de 1366x768 (passava 13 px). */
.portal__corpo:has(#tela-entrada:not([hidden])) { padding-top: var(--e10); gap: var(--e10); }
.portal__entrada { gap: var(--e8); }
@media (min-width: 1024px) {
  .portal__corpo:has(#tela-entrada:not([hidden])) { padding-top: var(--e16); }
  .portal__entrada { padding-top: 0; }
}

/* CPF e código do "Primeiro acesso" lado a lado: o código tem 6 caracteres. */
.portal__par { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: var(--e8); }
.portal__par .portal__codigo { letter-spacing: .12em; }

/* --------------------------------------------------------------------------
   23. O MENU PADRÃO DA PLATAFORMA no computador (24/09/2026)

   As classes `.menu*` vêm de 03-componentes.css — é o mesmo menu do sistema.
   Aqui só o que muda por o portal não ter o casco: o menu fica FIXO na janela
   (no sistema ele é absoluto dentro do casco), e a página abre espaço à
   esquerda para a faixa fechada. Com ele, a barra de cima e as abas saem:
   sino, perfil e sair estão no pé do menu, como no sistema.
   -------------------------------------------------------------------------- */

.portal__menu { display: none; }
.portal__menu-trava { color: var(--atencao-cheia); font-weight: 600; }

@media (min-width: 1024px) {
  .portal__menu:not([hidden]) { display: flex; position: fixed; z-index: 30; }
  body:has(.portal__menu:not([hidden])) { padding-left: calc(var(--menu-fechado) + var(--e32)); }
  body:has(.portal__menu:not([hidden])) .portal__topo,
  body:has(.portal__menu:not([hidden])) .portal__abas { display: none; }
  body:has(.portal__menu:not([hidden])) .portal__dentro { display: flex; flex-direction: column; align-items: stretch; }
  body:has(.portal__menu:not([hidden])) .portal__corpo { padding-top: var(--e26); }
}

/* --------------------------------------------------------------------------
   24. Baixar o app (24/09/2026) — uma linha só, para a entrada seguir sem
       rolagem no celular de 360x740.
   -------------------------------------------------------------------------- */

.portal__baixar {
  display: flex; align-items: center; gap: var(--e12);
  padding: var(--e8) var(--e16); border-radius: var(--r-cartao);
  background: var(--cartao); border: 1px solid var(--contorno);
  color: var(--texto); text-decoration: none;
}
.portal__baixar[hidden] { display: none; }
.portal__baixar svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--ok-texto); }
.portal__baixar span { display: flex; flex-direction: column; line-height: 1.3; }
.portal__baixar strong { font-size: 14px; font-weight: 600; color: var(--azul-primario); }
.portal__baixar small { display: none; font-size: 12px; color: var(--texto-apoio); }
@media (min-width: 640px) { .portal__baixar small { display: block; } }
@media (min-width: 1024px) {
  .portal__entrada .portal__baixar { grid-column: 2; grid-row: 4; }
}
@media (min-width: 1024px) {
  .portal__entrada #instalar-iphone { grid-column: 2; grid-row: 5; }
}

/* --------------------------------------------------------------------------
   25. O ESTILO APP NO CELULAR (24/09/2026)

   Cabeçalho azul com a saudação, barra fixa embaixo com as cinco seções do
   dia a dia e a folha do "Mais" com o resto em ícones. Vale abaixo de 1024px;
   no computador quem navega é o menu lateral da plataforma (seção 23).
   -------------------------------------------------------------------------- */

/* As cores de seção sobre fundo claro — fundo e traço da mesma família. */
.portal__tile-icone {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px;
}
.portal__tile-icone svg { width: 20px; height: 20px; }
.portal__tom--info    { background: var(--info-fundo);    color: var(--info-texto); }
.portal__tom--ok      { background: var(--ok-fundo);      color: var(--ok-texto); }
.portal__tom--atencao { background: var(--atencao-fundo); color: var(--atencao-texto); }
.portal__tom--critico { background: var(--critico-fundo); color: var(--critico-texto); }
.portal__tom--neutro  { background: var(--neutro-fundo);  color: var(--neutro-texto); }

/* O bloco de data — o calendário de parede. */
.portal__data {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 56px; border-radius: 14px;
  background: var(--info-fundo); color: var(--info-texto);
}
.portal__data-mes { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.portal__data-dia { font-size: 22px; font-weight: 600; line-height: 1.1; }
.portal__linha--passado .portal__data { background: var(--neutro-fundo); color: var(--neutro-texto); }

.portal__linha--data, .portal__linha--icone {
  flex-direction: row; align-items: center; gap: var(--e12); text-align: left; width: 100%;
}
.portal__linha-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.portal__linha--icone .portal__linha-titulo { flex: 1; }
.portal__seta { font-size: 22px; color: var(--texto-apoio); line-height: 1; }

.portal__atalho { gap: var(--e8); }
.portal__atalho .portal__tile-icone { width: 36px; height: 36px; border-radius: 10px; }

/* A barra embaixo e a folha do Mais */
.portal__barra { display: none; }
.portal__folha[hidden] { display: none; }

body:has(#barra:not([hidden])) .portal__barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + var(--seguro-pe));
  background: var(--cartao); border-top: 1px solid var(--contorno);
  box-shadow: 0 -6px 18px rgba(7, 29, 65, .06);
}
.portal__barra-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0; color: var(--texto-apoio);
}
.portal__barra-icone {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 30px; border-radius: 15px;
}
.portal__barra-icone svg { width: 22px; height: 22px; }
.portal__barra-rotulo { font-size: 11px; font-weight: 500; }
.portal__barra-item[aria-current="page"] { color: var(--azul-primario); }
.portal__barra-item[aria-current="page"] .portal__barra-icone { background: var(--info-fundo); }
.portal__barra-item[aria-current="page"] .portal__barra-rotulo { font-weight: 600; }
.portal__barra-n {
  position: absolute; top: -2px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--critico-cheia); color: var(--sobre-critico);
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.portal__barra-n[hidden] { display: none; }

.portal__folha { position: fixed; inset: 0; z-index: 50; }
.portal__folha-fundo { position: absolute; inset: 0; background: rgba(7, 29, 65, .45); }
.portal__folha-caixa {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--cartao); border-radius: 24px 24px 0 0;
  padding: var(--e10) var(--e16) calc(var(--e20) + var(--seguro-pe));
}
.portal__folha-alca { width: 42px; height: 4px; border-radius: 2px; background: var(--contorno); margin: 0 auto var(--e14); }
.portal__grade-icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e14) var(--e6); }
.portal__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.portal__tile .portal__tile-icone { width: 52px; height: 52px; border-radius: 16px; }
.portal__tile .portal__tile-icone svg { width: 24px; height: 24px; }
.portal__tile-rotulo { font-size: 12px; line-height: 1.25; color: var(--texto-corrente); }

/* O cabeçalho de app — com a sessão aberta, no celular */
.portal__saudacao { display: none; }
body:has(#barra:not([hidden])) .portal__topo {
  /* O azul do menu da plataforma, com o círculo dele no canto. */
  background:
    radial-gradient(circle at 104% -40%, var(--azul-menu-blob) 0 40%, transparent 40.5%),
    var(--azul-escuro);
  border-bottom: 0;
}
body:has(#barra:not([hidden])) .portal__topo-dentro { padding-top: var(--e14); padding-bottom: var(--e16); }
body:has(#barra:not([hidden])) .portal__marca { display: none; }
body:has(#barra:not([hidden])) .portal__saudacao:not([hidden]) {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.portal__saudacao-nome { font-size: 20px; font-weight: 600; color: var(--sobre-forte); letter-spacing: -.02em; }
.portal__saudacao-apoio { font-size: 12px; color: var(--sobre-escuro); text-transform: capitalize; }
body:has(#barra:not([hidden])) .portal__sino {
  background: var(--sobre-veu-2); border-color: transparent; color: var(--sobre-forte);
}
body:has(#barra:not([hidden])) #selo-nivel,
body:has(#barra:not([hidden])) #sair,
body:has(#barra:not([hidden])) .portal__abas,
body:has(#barra:not([hidden])) .portal__ola { display: none; }
body:has(#barra:not([hidden])) .portal__corpo { padding-bottom: calc(96px + var(--seguro-pe)); }

/* No computador, nada disto: volta o menu lateral da plataforma. */
@media (min-width: 1024px) {
  body:has(#barra:not([hidden])) .portal__barra,
  #folha-mais { display: none; }
  body:has(#barra:not([hidden])) .portal__ola { display: block; }
  body:has(#barra:not([hidden])) .portal__corpo { padding-bottom: var(--e32); }
}

/* --------------------------------------------------------------------------
   26. A TRANSIÇÃO DE ENTRADA DA PLATAFORMA (24/09/2026)

   Cópia fiel das regras de "Transição de entrada" de 04-telas.css — o portal
   não carrega aquele arquivo. Durante o movimento o fundo vira a cor da marca;
   o portal é montado por trás e fica fechado num círculo até a lente fechar.
   -------------------------------------------------------------------------- */

html.saindo, html.saindo body { background: var(--azul-escuro); }
.transicao-lente {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  color: var(--sobre-forte);
}
.transicao-lente__logo { width: 160px; height: 160px; }
.transicao-lente__logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.transicao-lente__nome { font-size: 22px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: opacity .4s ease; }
.transicao-lente__nome--some { opacity: 0; }

html.entrando .portal__topo,
html.entrando .portal__corpo,
html.entrando .portal__barra,
html.entrando .portal__menu { clip-path: circle(0% at 50% 50%); }
html.entrando.entrando--abre .portal__topo,
html.entrando.entrando--abre .portal__corpo,
html.entrando.entrando--abre .portal__barra,
html.entrando.entrando--abre .portal__menu { animation: portal-lente-abre 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes portal-lente-abre {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  html.entrando .portal__topo, html.entrando .portal__corpo,
  html.entrando .portal__barra, html.entrando .portal__menu { clip-path: none; animation: none; }
}

/* A BARRA FIXA NÃO PODE ESCONDER O QUE A PÁGINA ROLA ATÉ A VISTA. Sem esta
   reserva, o campo focado com o teclado aberto (ou o botão trazido à vista)
   parava embaixo da barra, e o toque caía no "Agenda" dela — foi assim que a
   conferência automática achou o defeito. */
html:has(#barra:not([hidden])) { scroll-padding-bottom: calc(96px + var(--seguro-pe)); scroll-padding-top: 90px; }
@media (min-width: 1024px) {
  html:has(#barra:not([hidden])) { scroll-padding-bottom: 0; scroll-padding-top: 0; }
}

/* --------------------------------------------------------------------------
   27. A TELA DE ENTRADA NA LINHA DO LOGIN DA PLATAFORMA (24/09/2026)

   O login do sistema é um painel azul-escuro com círculos da marca, o nome e
   um título grande, e o formulário num cartão branco. A entrada do paciente
   passa a ser a mesma coisa: no telefone, o azul em cima e o cartão branco
   com o formulário; no computador, as duas colunas. Tudo o que havia continua
   (gov.br, as três portas, esqueci a senha, baixar o app, o que cada nível
   libera, o 192) — e a tela segue sem rolagem de 360x740 a 1920x1080.
   -------------------------------------------------------------------------- */

/* O AZUL É O DA PLATAFORMA (pedido de 24/09/2026): o painel do login do
   sistema é --azul-escuro com dois círculos, um em --azul-menu-blob e outro
   em --blob-acento — e só isso. */
body:has(#tela-entrada:not([hidden])) {
  background:
    radial-gradient(circle at 108% -6%, var(--azul-menu-blob) 0 34%, transparent 34.2%),
    radial-gradient(circle at 78% 112%, var(--blob-acento) 0 24%, transparent 24.2%),
    var(--azul-escuro);
  background-attachment: fixed;
}
body:has(#tela-entrada:not([hidden])) .portal__topo { background: transparent; border-bottom: 0; }
body:has(#tela-entrada:not([hidden])) .portal__marca-nome { color: var(--sobre-forte); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
body:has(#tela-entrada:not([hidden])) .portal__marca-apoio { color: var(--sobre-escuro); }

.portal__entrada .portal__capa-titulo { color: var(--sobre-forte); }
.portal__entrada .portal__capa-lide { color: var(--sobre-escuro); }
.portal__entrada .portal__cartao:not(.portal__dobra) { border-radius: 28px; border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.portal__entrada .portal__urgencia { color: var(--sobre-escuro); }
.portal__entrada .portal__urgencia strong { color: var(--amarelo-acento); }
.portal__entrada .portal__baixar,
.portal__entrada .portal__dobra { border: 0; }

.portal__entrar-topo { display: none; }
.portal__entrar-titulo { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--texto); }
.portal__entrar-apoio { margin: 6px 0 var(--e16); font-size: 14px; color: var(--texto-apoio); }

@media (min-width: 640px) {
  .portal__entrar-topo { display: block; }
}

@media (min-width: 1024px) {
  body:has(#tela-entrada:not([hidden])) {
    background:
      radial-gradient(circle at 44% 8%, var(--azul-menu-blob) 0 24%, transparent 24.2%),
      radial-gradient(circle at 34% 108%, var(--blob-acento) 0 17%, transparent 17.2%),
      var(--azul-escuro);
  }
  .portal__entrada .portal__capa-titulo { font-size: 52px; line-height: 1.05; letter-spacing: -.04em; max-width: 12ch; }
  .portal__entrada .portal__capa-lide { font-size: 18px; max-width: 44ch; margin-top: var(--e12); }
  .portal__entrada .portal__cartao:not(.portal__dobra) { padding: var(--e26) var(--e26) var(--e20); }
  .portal__entrada .portal__dobra { background: var(--sobre-veu-1); color: var(--sobre-forte); max-width: 560px; }
  .portal__entrada .portal__dobra > summary { color: var(--sobre-forte); }
  .portal__entrada .portal__dobra .portal__nivel .t-sub-p { color: var(--sobre-forte); }
  .portal__entrada .portal__dobra .t-apoio,
  .portal__entrada .portal__dobra .t-apoio-p { color: var(--sobre-escuro); }
}

/* MONITOR BAIXO (1366x768): o título do cartão empurrava o "Primeiro acesso"
   36 px para fora da tela. As duas frases de apoio saem; o que elas dizem
   continua no "O que cada forma de entrar libera", ao lado. */
@media (min-width: 1024px) and (max-height: 820px) {
  .portal__entrada .portal__govbr-apoio,
  .portal__entrada .portal__form-lide { display: none; }
}

/* --------------------------------------------------------------------------
   28. A ENTRADA NO CELULAR, EM FORMA DE APP (24/09/2026)

   "A tela de login do mobile não está boa": o formulário flutuava no meio do
   azul, com três pílulas soltas embaixo. Agora é o desenho de app — o vitral
   num quadro branco, o nome e a frase centralizados no alto, e uma FOLHA
   BRANCA PRESA AO PÉ DA TELA com tudo dentro: gov.br, as três portas, o
   formulário e, no rodapé dela, baixar o app, o que cada forma libera, o termo
   de uso dos dados e o 192. Abaixo de 1024px; o computador não muda.
   -------------------------------------------------------------------------- */

.portal__capa-logo, .portal__capa-marca { display: none; }
.portal__termo-link { display: none; }
.portal__folha-caixa--texto { max-height: 86vh; overflow-y: auto; }

@media (max-width: 1023px) {
  body:has(#tela-entrada:not([hidden])) .portal__topo { display: none; }
  body:has(#tela-entrada:not([hidden])) .portal__corpo { padding: 0; max-width: none; gap: 0; }
  .portal__entrada { min-height: 100dvh; gap: 0; padding: 0; }

  .portal__entrada .portal__capa {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px;
    padding: calc(var(--seguro-topo) + var(--e20)) var(--e20) var(--e20);
  }
  .portal__capa-logo {
    display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 22px; background: var(--cartao);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3); margin-bottom: 6px;
  }
  .portal__capa-marca {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--sobre-escuro);
  }
  .portal__entrada .portal__capa-titulo { font-size: 22px; max-width: 17ch; margin: 0 auto; }

  /* A folha: o cartão abre o branco, e o que vem depois dele continua nele. */
  .portal__entrada .portal__cartao:not(.portal__dobra),
  .portal__entrada .portal__baixar,
  .portal__entrada #instalar-iphone,
  .portal__entrada .portal__dobra,
  .portal__entrada > .portal__termo-link,
  .portal__entrada > .portal__urgencia {
    background: var(--cartao); margin: 0; border-radius: 0; box-shadow: none;
  }
  .portal__entrada .portal__cartao:not(.portal__dobra) {
    position: relative; border-radius: 28px 28px 0 0;
    padding: var(--e20) var(--e16) var(--e10);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .28);
  }
  .portal__entrada .portal__cartao:not(.portal__dobra)::before {
    content: ''; position: absolute; top: 8px; left: 50%; margin-left: -21px;
    width: 42px; height: 4px; border-radius: 2px; background: var(--contorno);
  }
  /* O rodapé da folha: linhas finas, discretas — o formulário é o assunto. */
  .portal__entrada .portal__baixar {
    padding: var(--e8) var(--e16); border-top: 1px solid var(--divisor-claro);
  }
  .portal__entrada .portal__baixar strong { font-size: 13px; }
  .portal__entrada .portal__baixar svg { width: 20px; height: 20px; }
  .portal__entrada #instalar-iphone { padding: var(--e10) var(--e16); }
  .portal__entrada .portal__dobra > summary {
    padding: var(--e8) var(--e16); font-size: 13px; border-top: 1px solid var(--divisor-claro);
  }
  .portal__entrada > .portal__termo-link {
    display: block; width: 100%; text-align: left;
    padding: var(--e8) var(--e16); font-size: 13px; font-weight: 600; color: var(--azul-primario);
    border-top: 1px solid var(--divisor-claro);
  }
  .portal__entrada > .portal__urgencia {
    color: var(--texto-apoio); font-size: 11px; text-align: center;
    padding: var(--e8) var(--e16) calc(var(--e10) + var(--seguro-pe));
    border-top: 1px solid var(--divisor-claro);
  }
  .portal__entrada > .portal__urgencia strong { color: var(--critico-texto); }
}

/* O termo também do computador: link discreto sob o aviso de urgência. */
@media (min-width: 1024px) {
  .portal__entrada > .portal__termo-link {
    display: block; grid-column: 1; grid-row: 4; justify-self: start;
    font-size: 13px; font-weight: 600; color: var(--sobre-forte); text-decoration: underline;
  }
}

/* CELULAR BAIXO (até ~780px de altura): o alto encolhe para a folha caber
   inteira — o formulário é o que a pessoa veio usar. */
@media (max-width: 1023px) and (max-height: 780px) {
  .portal__entrada .portal__capa { gap: 4px; padding: calc(var(--seguro-topo) + var(--e10)) var(--e16) var(--e10); }
  .portal__capa-logo { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 2px; }
  .portal__capa-logo img { width: 36px; height: 36px; }
  .portal__capa-marca { display: none; }
  .portal__entrada .portal__capa-titulo { font-size: 18px; }
  .portal__entrada .portal__cartao:not(.portal__dobra) { padding-top: var(--e16); }
  .portal__entrada .portal__govbr { margin-bottom: var(--e8); }
  .portal__entrada .portal__baixar,
  .portal__entrada .portal__dobra > summary,
  .portal__entrada > .portal__termo-link { padding-top: 6px; padding-bottom: 6px; }
  .portal__entrada > .portal__urgencia { padding-top: 6px; }
}

/* A caixinha do termo na entrada (25/09/2026). */
.portal__aceite {
  display: flex; align-items: center; gap: var(--e10);
  font-size: 14px; line-height: 1.4; color: var(--texto-corrente);
}
.portal__aceite input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--azul-primario); }
.portal__aceite-link {
  display: inline; padding: 0; font: inherit; font-weight: 600;
  color: var(--azul-primario); text-decoration: underline;
}

/* --------------------------------------------------------------------------
   29. A ENTRADA DO CELULAR NO JEITO DE APP (25/09/2026)

   A partir de uma tela de banco que o usuário mandou: tela cheia no azul da
   plataforma; no lugar da foto, o vitral grande e o nome; a pessoa lembrada no
   aparelho (iniciais, primeiro nome, CPF mascarado) com "Acessar"; embaixo, os
   cartões contornados que rolam de lado. O formulário sobe numa folha.
   -------------------------------------------------------------------------- */

.portal__boas, .portal__boas-fundo { display: none; }

@media (min-width: 1024px) {
  .portal__folha-entrar { display: contents; }
}

@media (max-width: 1023px) {
  .portal__entrada .portal__capa,
  .portal__entrada > .portal__urgencia { display: none; }

  .portal__boas {
    display: flex; flex-direction: column; align-items: center;
    min-height: 100dvh; width: 100%;
    padding: calc(var(--seguro-topo) + var(--e20)) var(--e20) calc(var(--seguro-pe) + var(--e14));
    color: var(--sobre-forte); text-align: center;
  }
  .portal__boas-marca {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  }
  .portal__boas-centro {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 0;
  }
  .portal__boas-logo { width: min(40vw, 150px); height: auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .35)); }
  .portal__boas-nome { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
  .portal__boas-frase { font-size: 15px; color: var(--sobre-escuro); }

  .portal__boas-conta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: var(--e14); }
  .portal__boas-conta[hidden] { display: none; }
  .portal__boas-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--sobre-veu-2); border: 2px solid var(--sobre-borda);
    font-size: 24px; font-weight: 600; margin-bottom: 4px;
  }
  .portal__boas-quem { font-size: 17px; font-weight: 600; }
  .portal__boas-cpf { font-family: var(--mono); font-size: 14px; color: var(--sobre-escuro); }

  .portal__boas-entrar {
    width: 100%; height: 56px; border-radius: 28px;
    background: var(--azul-primario); color: var(--sobre-acento);
    font-size: 19px; font-weight: 600; box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  }
  .portal__boas-outro { margin-top: var(--e10); font-size: 13px; color: var(--sobre-escuro); text-decoration: underline; }
  .portal__boas-outro[hidden] { display: none; }

  .portal__boas-tiles {
    /* Alinhados às bordas do botão: dividem a largura por igual, sejam 3 (no
       app, sem "Baixar o app") ou 4 — nada de fileira torta rolando de lado. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 8px; width: 100%; margin: var(--e20) 0 0; padding: 0; overflow: visible;
  }
  .portal__boas-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 96px; padding: var(--e12) 4px; border-radius: 18px;
    border: 1.5px solid var(--sobre-borda); background: var(--sobre-veu-1); color: var(--sobre-forte);
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
  }
  .portal__boas-tile svg { width: 26px; height: 26px; }
  .portal__boas-tile[hidden] { display: none; }
  .portal__boas-conta, .portal__boas-entrar, .portal__boas-tiles { max-width: 440px; }
  .portal__boas-192 { margin: var(--e12) 0 0; font-size: 11.5px; color: var(--sobre-escuro); }
  .portal__boas-192 strong { color: var(--amarelo-acento); }

  /* A folha que sobe com o formulário */
  .portal__folha-entrar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--cartao); border-radius: 28px 28px 0 0;
    transform: translateY(105%); transition: transform .38s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .35);
  }
  html.folha-entrar-aberta .portal__folha-entrar { transform: none; }
  .portal__folha-entrar .portal__cartao:not(.portal__dobra) { box-shadow: none; }
  .portal__folha-entrar .portal__baixar { display: none; }
  .portal__folha-entrar .portal__dobra { padding-bottom: var(--seguro-pe); }
  .portal__boas-fundo {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(7, 29, 65, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  html.folha-entrar-aberta .portal__boas-fundo { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .portal__boas-logo { width: 96px; }
  .portal__boas-nome { font-size: 22px; }
  .portal__boas-tile { min-height: 80px; }
}