/* =============================================================================
   GovOne · casca do cidadão e de acesso
   Hero, cartão de serviço, acompanhamento, taxonomia, carta e o cartão de
   entrar. O servidor não baixa nada disto.
   ========================================================================== */
/* --------------------------------------------------------- portal do cidadão */
.portal-hero {
  background: linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-primary-dark) 100%);
  color: #fff; border-radius: var(--r-lg); padding: var(--s-5) var(--s-5);
  margin-bottom: var(--s-4); box-shadow: var(--sh-2);
}
.portal-hero h1 { color: #fff; font-size: 1.55rem; margin: 0 0 .3rem; }
.portal-hero p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 60ch; }
.service-card {
  background: var(--gov-surface); border: 1px solid var(--gov-border); border-radius: var(--r-lg);
  padding: var(--s-4); height: 100%; box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.service-card:hover { box-shadow: var(--sh-2); border-color: var(--gov-primary-line); }
.service-card__head { display: flex; justify-content: space-between; gap: var(--s-2); align-items: flex-start; }
.service-card__title { font-size: 1rem; font-weight: 600; margin: 0; }
.service-card__text { color: var(--gov-text-soft); font-size: .85rem; margin: .4rem 0 var(--s-3); flex: 1; }
.service-card__meta { display: flex; gap: var(--s-3); font-size: .78rem; color: var(--gov-muted);
                      border-top: 1px solid var(--gov-border); padding-top: var(--s-2); margin-bottom: var(--s-3); }
.auth-card {
  max-width: 26rem; margin: var(--s-6) auto; background: var(--gov-surface);
  border: 1px solid var(--gov-border); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.auth-card__head { background: var(--gov-primary); color: #fff; padding: var(--s-4); text-align: center; }
.auth-card__head h1 { color: #fff; font-size: 1.1rem; margin: 0; }
.auth-card__head p { margin: .2rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .85); }
.auth-card__body { padding: var(--s-5) var(--s-4); }
.auth-card__foot { border-top: 1px solid var(--gov-border); background: var(--gov-bg-alt);
                   padding: var(--s-3) var(--s-4); text-align: center; font-size: .85rem; }
.request-status {
  display: flex; align-items: center; gap: var(--s-4); justify-content: space-between; flex-wrap: wrap;
}
.request-status__now { font-size: 1.15rem; font-weight: 600; }

/* --------------------------------- taxonomia do portal e destaques (RF-057/059) */
.taxonomia { margin: 0 0 var(--s-4); }
.taxonomia__titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--gov-muted); margin-bottom: var(--s-2);
}
.taxonomia__lista { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.taxonomia__caminho { font-size: .8rem; color: var(--gov-muted); margin: var(--s-2) 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; padding: .22rem .7rem; border-radius: 999px;
  border: 1px solid var(--gov-border); background: #fff; color: var(--gov-text);
  text-decoration: none;
}
.chip:hover { border-color: var(--gov-primary); color: var(--gov-primary-dark); }
.chip--on { background: var(--gov-primary); border-color: var(--gov-primary); color: #fff; }
.chip--on:hover { color: #fff; }
.chip--filha { font-size: .76rem; color: var(--gov-muted); }
.chip__num {
  font-size: .7rem; font-weight: 700; background: var(--gov-bg-alt);
  border-radius: 999px; padding: 0 .35rem;
}

/* conteúdo editorial da carta (RF-064): o texto do cidadão respira mais */
.carta { line-height: 1.7; }
.carta h2, .carta h3, .carta h4 { font-size: 1rem; font-weight: 700; margin: var(--s-4) 0 var(--s-2); }
.carta ul, .carta ol { padding-left: var(--s-5); }
.carta table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; font-size: .9rem; }
.carta th, .carta td { border: 1px solid var(--gov-border); padding: .35rem .5rem; text-align: left; }
.carta blockquote { border-left: 3px solid var(--gov-border); padding-left: var(--s-4); color: var(--gov-muted); }


/* ==========================================================================
   Onda 3 — cabeçalho, navegação, acessibilidade e rodapé do portal

   Escala do cidadão: corpo em 16 px e alvos de 44 px. O back-office é
   ferramenta de quem passa o dia nela e pode ser denso; o portal é usado uma
   vez por ano, muitas vezes no telefone, por quem não tem prática.
   ========================================================================== */

/* ------------------------------------------- o que se pergunta antes de pedir
   Prazo e canal vêm ANTES do texto da carta (onda 9). São as duas perguntas
   que o cidadão faz antes de decidir se vale a pena começar, e estavam no pé
   da página, depois de dois blocos de texto corrido.

   Grade automática: com dois itens eles ocupam metade cada; com três, um terço.
   Em tela estreita empilham, e o prazo — que é o que mais importa — fica em
   cima por vir primeiro no HTML. */
.now {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-4);
  background: var(--gov-bg-alt); border: 1px solid var(--gov-border);
  border-radius: var(--r-lg); padding: var(--s-4);
}
.now__item { min-width: 0; }
.now__rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
               color: var(--gov-muted); }
.now__valor { font-size: 1.1rem; font-weight: 600; color: var(--gov-text); margin-top: .15rem; }
.now__nota { font-size: .8rem; color: var(--gov-muted); }

/* A linha do tempo do "Como funciona" — a mesma do acompanhamento, para o
   cidadão reconhecer a forma quando a solicitação existir. */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline > li { position: relative; padding: 0 0 var(--s-4) var(--s-5);
                 border-left: 2px solid var(--gov-border); }
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline > li::before {
  content: ''; position: absolute; left: -.45rem; top: .15rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: var(--gov-surface); border: 2px solid var(--gov-border);
}
.timeline__title { font-weight: 600; }

/* ------------------------------------------------- barra de acessibilidade */
.barra-acessibilidade {
  background: var(--gov-primary-dark);
  color: #fff;
  font-size: .82rem;
}
.barra-acessibilidade__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; padding: .25rem var(--s-3);
}
.barra-acessibilidade__atalhos {
  display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.barra-acessibilidade__atalhos a { color: #fff; text-decoration: none; padding: .35rem 0; }
.barra-acessibilidade__atalhos a:hover,
.barra-acessibilidade__atalhos a:focus-visible { text-decoration: underline; }
.barra-acessibilidade__atalhos kbd {
  background: rgba(255, 255, 255, .18); border-radius: var(--r-sm);
  padding: 0 .3rem; font-size: .72rem;
}
.barra-acessibilidade__contraste {
  background: none; border: 1px solid rgba(255, 255, 255, .45); color: #fff;
  border-radius: var(--r-pill); padding: .2rem .7rem; font-size: .78rem;
}
.barra-acessibilidade__contraste:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------- cabeçalho */
.portal-header { background: var(--gov-surface); border-bottom: 1px solid var(--gov-border); }
.portal-header__interno {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3); flex-wrap: wrap;
}
.portal-header__marca {
  display: flex; align-items: center; gap: var(--s-3);
  color: inherit; text-decoration: none;
}
.portal-header__brasao { height: 44px; width: auto; }
.portal-header__nome { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.portal-header__subtitulo {
  display: block; font-size: .8rem; font-weight: 400; color: var(--gov-muted);
}
.portal-header__busca { display: flex; flex: 1 1 16rem; max-width: 28rem; gap: .25rem; }
.portal-header__busca .form-control { min-height: 44px; }
.portal-header__busca-botao {
  min-width: 44px; min-height: 44px; border: 1px solid var(--gov-border);
  background: var(--gov-bg-alt); border-radius: var(--r-md); color: var(--gov-primary);
}
.portal-header__acesso { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.portal-header__acesso .btn { min-height: 44px; display: inline-flex; align-items: center; }
.portal-header__nome-usuario { font-size: .9rem; font-weight: 600; }

/* ------------------------------------------------- navegação horizontal */
.portal-nav { border-top: 1px solid var(--gov-border); background: var(--gov-bg-alt); }
.portal-nav__interno { display: flex; gap: var(--s-1); flex-wrap: wrap; padding: 0 var(--s-3); }
.portal-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-3); color: var(--gov-text); text-decoration: none;
  border-bottom: 3px solid transparent; font-weight: 500;
}
.portal-nav__link:hover { color: var(--gov-primary-dark); border-bottom-color: var(--gov-border-strong); }
.portal-nav__link.active { color: var(--gov-primary-dark); border-bottom-color: var(--gov-primary); font-weight: 700; }

/* ---------------------------------------------------------------- rodapé */
.portal-rodape { margin-top: var(--s-6); background: var(--gov-primary-dark); color: #fff; }
.portal-rodape__interno {
  display: flex; gap: var(--s-5); justify-content: space-between;
  flex-wrap: wrap; padding: var(--s-5) var(--s-3);
}
.portal-rodape__orgao { font-weight: 700; margin: 0; }
.portal-rodape__contato { margin: .25rem 0 0; font-size: .875rem; opacity: .85; }
.portal-rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.portal-rodape__links a { color: #fff; text-decoration: underline; }
.portal-rodape__assinatura {
  border-top: 1px solid rgba(255, 255, 255, .18); padding: .6rem var(--s-3);
  font-size: .8rem; opacity: .75;
}

/* ------------------------------------------------------ escala do cidadão */
/* 16 px e entrelinha 1,6 no corpo; alvos de 44 px; link sublinhado no texto
   corrido — no portal, cor sozinha não distingue link de texto para quem tem
   baixa visão ou daltonismo. */
body { font-size: 1rem; line-height: 1.6; }
.page h1, .page-head__title { font-size: 1.75rem; line-height: 1.25; }
.page .btn, .page .form-control, .page .form-select { min-height: 44px; }
.page p a:not(.btn), .portal-rodape a { text-decoration: underline; }

/* ------------------------------------------------------- alto contraste */
/* Classe no <html>, lembrada no navegador. Preto e branco com foco amarelo:
   o objetivo é razão de contraste alta, não outra identidade visual. */
.contraste-alto {
  --gov-surface: #000000;
  --gov-bg: #000000;
  --gov-bg-alt: #0a0a0a;
  --gov-text: #ffffff;
  --gov-text-soft: #f2f2f2;
  --gov-muted: #e0e0e0;
  --gov-border: #ffffff;
  --gov-border-strong: #ffffff;
  --gov-primary: #ffff00;
  --gov-primary-dark: #000000;
  --gov-primary-soft: #1a1a00;
}
.contraste-alto body { background: #000; color: #fff; }
.contraste-alto a { color: #ffff00; }
.contraste-alto .btn-primary { background: #ffff00; border-color: #fff; color: #000; }
.contraste-alto .portal-header,
.contraste-alto .portal-nav,
.contraste-alto .portal-rodape { background: #000; color: #fff; border-color: #fff; }
.contraste-alto .panel,
.contraste-alto .service-card { background: #000; border-color: #fff; }


/* --------------------------------------------------------- casca de acesso */
/* Entrar, cadastrar, validar documento e prévia por token. Cartão centralizado,
   sem menu: quem está aqui ainda não é ninguém no sistema. */
.acesso { display: flex; flex-direction: column; min-height: 100vh; }
/* As duas regras abaixo desenham o cartão de login: centrado e com 34rem.
   Elas alcançam TODO filho direto de `main.page` — e é por isso que a direção
   é `column`. Em linha, que é o padrão do flex, cada filho virava uma coluna:
   a prévia do serviço abria com seis painéis lado a lado, o primeiro cortado
   fora da tela, e a validação pública punha a trilha ao lado do formulário.
   Resposta 200 nas duas, sem erro e sem log. Guardado por
   `core.tests.test_casca_de_acesso`.

   O teto de 34rem continua: é a medida do cartão. Tela de conteúdo o solta por
   conta própria com `mw-100` — `w-100` sozinho não vence um `max-width`. */
.acesso .page {
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--s-6);
}
.acesso .page > * { width: 100%; max-width: 34rem; }
.acesso-rodape {
  margin-top: auto; border-top: 1px solid var(--gov-border);
  padding: var(--s-3); text-align: center; font-size: .85rem; color: var(--gov-muted);
}


/* -------------------------------------------------- telefone (390 px) */
/* O portal é usado no telefone. Em 390 px o cabeçalho empilha, a busca ocupa
   a largura toda e a navegação rola na horizontal **dentro dela mesma** — a
   página nunca rola de lado, que é o defeito mais comum em tela estreita. */
@media (max-width: 575.98px) {
  .portal-header__interno { gap: var(--s-2); padding: var(--s-2) var(--s-3); }
  .portal-header__marca { flex: 1 1 100%; }
  .portal-header__busca { flex: 1 1 100%; max-width: none; order: 3; }
  .portal-header__acesso { margin-left: 0; }
  .portal-nav__interno {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .portal-nav__link { white-space: nowrap; }
  .portal-rodape__interno { gap: var(--s-4); padding: var(--s-4) var(--s-3); }
  .barra-acessibilidade__interno { gap: var(--s-2); }
  .page h1, .page-head__title { font-size: 1.5rem; }
}

/* Entrada federada (Keycloak, gov.br): separada do formulário por um "ou", para
   não parecer um segundo botão de enviar o que já foi digitado. */
.auth-card__federados { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.auth-card__ou {
  display: block; text-align: center; font-size: .82rem;
  color: var(--gov-muted); text-transform: uppercase; letter-spacing: .06em;
}

/* ------------------------------------------------------------------ agenda
   A grade de dias do agendamento (E24). Um dia por linha, com os horários em
   faixa à direita — e não um calendário de mês: o cidadão escolhe entre os
   próximos quinze dias, não navega o ano, e calendário obriga a pintar dia sem
   vaga de um jeito que o leitor de tela não anuncia.

   O horário é um `<button type=submit>` de verdade, com o valor no `value`:
   sem JavaScript o formulário envia igual. Um `<div onclick>` teria deixado de
   fora quem navega por teclado, que é justamente parte do público do portal. */
.agenda { display: grid; gap: var(--s-2); }
.agenda__dia {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--gov-border);
}
.agenda__dia:last-child { border-bottom: 0; }
.agenda__dia--vazio { opacity: .75; }
.agenda__data { flex: 0 0 5.5rem; display: flex; flex-direction: column; }
.agenda__semana { font-size: .78rem; color: var(--gov-muted); text-transform: capitalize; }
.agenda__horarios { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.agenda__vaga {
  border: 1px solid var(--gov-border); background: var(--gov-surface);
  border-radius: var(--r-sm); padding: .35rem .7rem; font-size: .9rem;
  color: var(--gov-text); cursor: pointer; font-variant-numeric: tabular-nums;
}
.agenda__vaga:hover, .agenda__vaga:focus-visible {
  border-color: var(--gov-primary); color: var(--gov-primary); outline: 0;
}
.agenda__vaga:focus-visible { box-shadow: 0 0 0 3px rgba(36, 147, 70, .25); }
.agenda__livres {
  margin-left: .35rem; font-size: .72rem; color: var(--gov-muted);
}
.agenda__recado { flex: 1; margin: 0; font-size: .86rem; color: var(--gov-muted); }

@media (max-width: 575px) {
  .agenda__data { flex: 1 0 100%; }
}

/* Acompanhantes do agendamento coletivo (D44). Três linhas de três campos; em
   tela estreita cada campo ocupa a linha inteira, porque "Nome completo" em
   um terço de 360px não cabe nem o nome. */
.acompanhantes { border: 0; padding: 0; margin: 0; }
.acompanhantes__linha { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.acompanhantes__linha .form-control { flex: 1 1 12rem; min-width: 0; }

@media (max-width: 575px) {
  .acompanhantes__linha .form-control { flex: 1 1 100%; }
}

/* O cartão da senha, na tela do cidadão. Destaque forte porque quem abre esta
   tela no saguão está procurando exatamente isto — e rolar atrás do número,
   com a senha sendo chamada, é a pior hora para uma tela ser discreta. */
.senha-cartao { border-left: 4px solid var(--gov-primary); }
.senha-cartao__rotulo {
  margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gov-muted);
}
.senha-cartao__numero {
  margin: .2rem 0; font-size: clamp(2.2rem, 9vw, 3.5rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--gov-primary);
}
.senha-cartao__chamada { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--gov-text); }
.senha-cartao__posicao { margin: 0; font-size: 1.05rem; color: var(--gov-text); }