/* ==========================================================================
   Contrata+Brasil — CSS compartilhado por todas as páginas.
   Concatenação, nesta ordem (a cascata depende dela), dos arquivos do layout:
   base.css → layout.css → formulario.css → acesso.css, mais as páginas de erro.
   CSS exclusivo de uma página fica em arquivo próprio (index.css, login.css);
   painel.css é o CSS global da área privada.
   ========================================================================== */

/* ==========================================================================
   Base: fontes locais, tokens de design, reset e elementos reutilizáveis.
   ========================================================================== */

/* Raleway (SIL OFL 1.1, ver assets/fonts/OFL.txt) servida localmente para
   não expor o IP dos visitantes a serviços de terceiros (LGPD). */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/raleway-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paleta derivada da marca Contrata+Brasil (gov.br): azul, amarelo e verde. */
:root {
  --cor-azul: #2864ae;
  --cor-azul-escuro: #1b4a85;
  --cor-marinho: #0f2747;
  --cor-amarelo: #fabd10;
  --cor-verde: #46ad44;
  --cor-verde-texto: #2b7a2a;

  --cor-fundo: #f6f5f1;
  --cor-superficie: #ffffff;
  --cor-texto: #1a1f26;
  --cor-texto-suave: #4f5865;
  --cor-borda: #d9dbd6;
  --cor-link: var(--cor-azul-escuro);
  --cor-foco: var(--cor-amarelo);
  --cor-sobre-escuro: #ffffff;
  --cor-sobre-escuro-suave: #c7d3e3;
  /* Formulários: borda de campo com contraste ≥ 3:1 (WCAG 1.4.11). */
  --cor-borda-campo: #7b8490;
  --cor-erro: #b42318;
  --cor-erro-fundo: #fdeceb;

  --fonte: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4.5rem;

  --raio: 4px;
  --largura-maxima: 72rem;
  --gutter: 1rem;
  --altura-cabecalho: 4.5rem;
  --transicao: 160ms ease;
}

/* Modo de alto contraste ativado pelo botão da barra superior. */
:root[data-contraste="alto"] {
  /* Controles nativos (data, select, checkbox) também passam para o tema escuro. */
  color-scheme: dark;
  --cor-azul: #7fb2ff;
  --cor-azul-escuro: #000000;
  --cor-marinho: #000000;
  --cor-amarelo: #ffe14d;
  --cor-verde: #7ee07c;
  --cor-verde-texto: #7ee07c;
  --cor-fundo: #000000;
  --cor-superficie: #000000;
  --cor-texto: #ffffff;
  --cor-texto-suave: #ffffff;
  --cor-borda: #ffffff;
  --cor-link: #ffe14d;
  --cor-sobre-escuro-suave: #ffffff;
  --cor-borda-campo: #ffffff;
  --cor-erro: #ff9b8f;
  --cor-erro-fundo: #000000;
}

@media (min-width: 48em) {
  :root {
    --gutter: 1.5rem;
  }
}

/* Texto maior (botão "A+"): como as medidas são em rem, todo o layout acompanha. */
:root[data-fonte="grande"] {
  font-size: 112.5%;
}

/* ---------- Reset enxuto ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--espaco-4);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (min-width: 62em) {
  html {
    /* Compensa o cabeçalho fixo ao navegar por âncoras. */
    scroll-padding-top: calc(var(--altura-cabecalho) + var(--espaco-4));
  }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Raleway usa algarismos antigos por padrão; datas e telefones ficam irregulares. */
  font-variant-numeric: lining-nums;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--cor-link);
  text-underline-offset: 0.2em;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Alvos de foco programático (conteúdo, menu, itens do calendário) não ganham
   contorno ao receber foco por clique, apenas pelo teclado. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* No alto contraste, links sempre sublinhados para não depender só da cor. */
:root[data-contraste="alto"] a:not(.botao, .marca, .dia) {
  text-decoration: underline;
}

/* Indicadores e contagens: algarismos de largura fixa, alinhados em colunas. */
.numero {
  font-variant-numeric: lining-nums tabular-nums;
}

.icone {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---------- Utilitários ---------- */
/* Garante que [hidden] vença regras de display dos componentes. */
[hidden] {
  display: none !important;
}

/* Sprite de ícones embutido no <body>: presente no DOM, invisível na tela. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo {
  position: absolute;
  top: var(--espaco-2);
  left: var(--espaco-2);
  z-index: 100;
  padding: var(--espaco-2) var(--espaco-4);
  background: var(--cor-amarelo);
  color: #000;
  font-weight: 700;
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 2.75rem;
  padding: var(--espaco-2) var(--espaco-5);
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao);
}

.botao--primario {
  background: var(--cor-azul);
  color: #fff;
}

.botao--primario:hover {
  background: var(--cor-azul-escuro);
}

.botao--destaque {
  background: var(--cor-amarelo);
  color: #111;
}

.botao--destaque:hover {
  background: #e3a800;
}

.botao--contorno {
  border-color: currentColor;
  color: var(--cor-azul-escuro);
  background: transparent;
}

.botao--contorno:hover {
  background: var(--cor-azul-escuro);
  border-color: var(--cor-azul-escuro);
  color: #fff;
}

.botao--claro {
  border-color: rgb(255 255 255 / 0.7);
  color: #fff;
  background: transparent;
}

.botao--claro:hover {
  background: #fff;
  color: var(--cor-marinho);
}

.botao--bloco {
  width: 100%;
}

.botao--pequeno {
  min-height: 2.25rem;
  padding: var(--espaco-1) var(--espaco-4);
  font-size: 0.875rem;
}

:root[data-contraste="alto"] .botao--primario,
:root[data-contraste="alto"] .botao--destaque {
  background: var(--cor-amarelo);
  color: #000;
}

/* ---------- Seções ---------- */
.secao {
  padding-block: var(--espaco-7);
}

@media (min-width: 62em) {
  .secao {
    padding-block: var(--espaco-8);
  }
}

.secao--superficie {
  background: var(--cor-superficie);
  border-block: 1px solid var(--cor-borda);
}

.secao__cabecalho {
  display: grid;
  gap: var(--espaco-3);
  max-width: 44rem;
  margin-bottom: var(--espaco-6);
}

.secao__titulo {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
}

.secao__descricao {
  color: var(--cor-texto-suave);
}

/* Sobretítulo com o "+" da marca como marcador. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-azul-escuro);
}

.rotulo::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--cor-amarelo);
  color: #111;
  font-size: 1rem;
  line-height: 1;
  border-radius: 2px;
}

:root[data-contraste="alto"] .rotulo {
  color: var(--cor-amarelo);
}

/* ---------- Etiquetas e marcas de modalidade (calendário, tabelas) ---------- */
.marca-modalidade {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.marca-modalidade--presencial {
  background: var(--cor-azul);
}

.marca-modalidade--online {
  background: var(--cor-verde);
}

.marca-modalidade--hibrida {
  background: var(--cor-amarelo);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 0.125rem var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.etiqueta .marca-modalidade {
  width: 0.5rem;
  height: 0.5rem;
}

/* Faixa com as três cores da marca. */
.faixa-marca {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  height: 4px;
}

.faixa-marca::before,
.faixa-marca::after,
.faixa-marca > span {
  content: "";
}

.faixa-marca::before {
  background: var(--cor-azul);
}

.faixa-marca > span {
  background: var(--cor-amarelo);
}

.faixa-marca::after {
  background: var(--cor-verde);
}

.nota-dados {
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Layout compartilhado entre páginas: barra superior, cabeçalho, menu e rodapé.

   Responsividade do topo (ponto de quebra: 62em ≈ 992px):
   - Telas grandes: a barra superior rola com a página; o cabeçalho
     (logo + menu) fica fixo no topo (sticky).
   - Telas pequenas: o cabeçalho rola com a página; o conteúdo da barra
     superior é movido para dentro do menu sanduíche (ver componentes/menu.js)
     e o menu aberto ocupa espaço no fluxo, empurrando a página para baixo.
   ========================================================================== */

/* ---------- Barra superior ---------- */
.barra-topo,
.menu-painel .barra-topo__conteudo {
  background: var(--cor-marinho);
  color: var(--cor-sobre-escuro);
  font-size: 0.875rem;
}

.barra-topo__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-5);
  padding-block: var(--espaco-2);
}

/* Botões da barra usam as cores da própria classe (.botao--destaque tem texto escuro sobre amarelo). */
.barra-topo a:not(.botao) {
  color: inherit;
}

.barra-topo__contatos,
.barra-topo__redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-5);
}

.barra-topo__contatos a,
.barra-topo__redes a {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 2.25rem;
  color: var(--cor-sobre-escuro);
  text-decoration: none;
}

.barra-topo__contatos a:hover {
  text-decoration: underline;
}

.barra-topo__contatos .icone {
  color: var(--cor-amarelo);
}

.barra-topo__redes {
  gap: var(--espaco-1);
}

.barra-topo__redes a {
  justify-content: center;
  width: 2.25rem;
  border-radius: var(--raio);
  transition: background-color var(--transicao), color var(--transicao);
}

.barra-topo__redes a:hover {
  background: var(--cor-amarelo);
  color: #111;
}

.barra-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
}

/* O formulário do Sair não cria caixa: o botão participa do flex da barra e do menu móvel. */
.barra-topo__sair {
  display: contents;
}

/* Grupo de acessibilidade (A+ e alto contraste). Depende de JS, por isso só
   aparece com a classe .js. O estado ligado é visível (amarelo), não só anunciado. */
.acessibilidade {
  display: none;
  gap: var(--espaco-1);
}

.js .acessibilidade {
  display: flex;
}

.acessibilidade__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--espaco-2);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-sobre-escuro);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}

.acessibilidade__botao:hover {
  background: rgb(255 255 255 / 0.14);
}

.acessibilidade__botao[aria-pressed="true"] {
  border-color: var(--cor-amarelo);
  background: var(--cor-amarelo);
  color: #111;
}

.acessibilidade__simbolo {
  min-width: 1.125rem;
  letter-spacing: -0.02em;
  text-align: center;
}

:root[data-contraste="alto"] .acessibilidade__botao {
  border-color: #fff;
}

@media (min-width: 62em) {
  .barra-topo__acoes {
    margin-left: auto;
  }

  .acessibilidade {
    padding-right: var(--espaco-3);
    border-right: 1px solid rgb(255 255 255 / 0.2);
  }

  /* Na barra, só o ícone/símbolo aparece; o texto continua para leitores de tela. */
  .acessibilidade__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .barra-topo__redes {
    padding-left: var(--espaco-5);
    border-left: 1px solid rgb(255 255 255 / 0.2);
  }
}

/* Com JS em telas pequenas, a barra some e seu conteúdo vai para o menu. */
@media (max-width: 61.99em) {
  .js .barra-topo {
    display: none;
  }
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: relative;
  z-index: 50;
  background: var(--cor-superficie);
}

@media (min-width: 62em) {
  .cabecalho {
    position: sticky;
    top: 0;
  }
}

.cabecalho__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--altura-cabecalho);
  column-gap: var(--espaco-3);
}

/* Logomarca: símbolo em SVG + nome em texto (acessível e legível). */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  padding-block: var(--espaco-3);
  color: var(--cor-texto);
  text-decoration: none;
}

.marca img {
  width: 2.5rem;
  height: 2.5rem;
}

.marca__texto {
  display: grid;
  line-height: 1.1;
}

.marca__nome {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-azul);
}

.marca__mais {
  color: var(--cor-amarelo);
}

.marca__sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* ---------- Menu ---------- */
.menu-botao {
  display: none;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 2.75rem;
  padding: 0 var(--espaco-3);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Ícone sanduíche desenhado em CSS; vira "X" quando aberto. */
.menu-botao__icone,
.menu-botao__icone::before,
.menu-botao__icone::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--transicao), background-color var(--transicao);
}

.menu-botao__icone {
  position: relative;
}

.menu-botao__icone::before,
.menu-botao__icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-botao__icone::before {
  top: -6px;
}

.menu-botao__icone::after {
  top: 6px;
}

.menu-botao[aria-expanded="true"] .menu-botao__icone {
  background: transparent;
}

.menu-botao[aria-expanded="true"] .menu-botao__icone::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao__icone::after {
  transform: translateY(-6px) rotate(-45deg);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--espaco-3);
  color: var(--cor-texto);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.menu a::after {
  content: "";
  position: absolute;
  left: var(--espaco-3);
  right: var(--espaco-3);
  bottom: 0.4rem;
  height: 3px;
  background: var(--cor-amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}

.menu a:hover::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Telas pequenas: menu em painel no fluxo do documento. */
@media (max-width: 61.99em) {
  .js .menu-botao {
    display: inline-flex;
  }

  /* Ocupa toda a largura da tela, compensando o recuo lateral do container. */
  .menu-painel {
    flex-basis: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }

  .js .menu-painel {
    display: none;
  }

  .js .menu-painel.esta-aberto {
    display: block;
  }

  .menu {
    flex-direction: column;
    gap: 0;
    padding: var(--espaco-2) 0;
    border-top: 1px solid var(--cor-borda);
  }

  .menu a {
    padding-inline: var(--gutter);
  }

  .menu a::after {
    top: var(--espaco-3);
    bottom: var(--espaco-3);
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    transform: scaleY(0);
  }

  .menu a:hover::after,
  .menu a[aria-current="page"]::after {
    transform: scaleY(1);
  }

  /* Conteúdo da barra superior dentro do menu. */
  .menu-painel .barra-topo__conteudo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espaco-4);
    padding: var(--espaco-5) var(--gutter);
  }

  .menu-painel .barra-topo__contatos {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .menu-painel .barra-topo__acoes .botao {
    flex: 1 1 8rem;
  }

  /* No menu, os botões de acessibilidade mostram o texto e têm alvo maior. */
  .menu-painel .acessibilidade {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .menu-painel .acessibilidade__botao {
    flex: 1 1 10rem;
    justify-content: flex-start;
    min-height: 2.75rem;
    padding: 0 var(--espaco-3);
  }
}

@media (min-width: 62em) {
  .menu-painel {
    display: block;
  }
}

/* ---------- Fundo da marca (banner da inicial, página de login) ---------- */
/* Para usar a foto definitiva, troque a URL abaixo (ex.: ../img/banner.jpg).
   A sobreposição escura garante o contraste do texto sobre qualquer imagem. */
.fundo-marca {
  position: relative;
  isolation: isolate;
  color: var(--cor-sobre-escuro);
  background: var(--cor-marinho) url("../img/banner.svg") center / cover no-repeat;
}

.fundo-marca::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(15 39 71 / 0.95) 0%,
    rgb(15 39 71 / 0.82) 55%,
    rgb(15 39 71 / 0.6) 100%
  );
}

:root[data-contraste="alto"] .fundo-marca::before {
  background: rgb(0 0 0 / 0.92);
}

/* ---------- Migalhas de pão (sobre fundo escuro) ---------- */
.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--cor-sobre-escuro-suave);
}

.migalhas li + li::before {
  content: "/";
  margin-right: var(--espaco-2);
  opacity: 0.6;
}

.migalhas a {
  color: var(--cor-sobre-escuro);
}

.migalhas [aria-current="page"] {
  font-weight: 700;
  color: var(--cor-sobre-escuro);
}

/* Link da página atual na barra superior (ex.: "Entrar" em login.html):
   sublinhado grosso na cor do texto do próprio botão. */
.barra-topo__acoes [aria-current="page"] {
  box-shadow: inset 0 -3px 0 currentColor;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cor-marinho);
  color: var(--cor-sobre-escuro-suave);
  font-size: 0.9375rem;
}

.rodape a {
  color: var(--cor-sobre-escuro);
  text-decoration: none;
}

.rodape a:hover {
  text-decoration: underline;
}

.rodape__grade {
  display: grid;
  gap: var(--espaco-6);
  padding-block: var(--espaco-7);
}

@media (min-width: 40em) {
  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .rodape__grade {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  }
}

.rodape .marca {
  padding-top: 0;
  color: var(--cor-sobre-escuro);
}

.rodape .marca__nome {
  color: var(--cor-sobre-escuro);
}

.rodape .marca__sub {
  color: var(--cor-sobre-escuro-suave);
}

.rodape__sobre p {
  max-width: 24rem;
  margin-top: var(--espaco-3);
}

.rodape__titulo {
  margin-bottom: var(--espaco-3);
  color: var(--cor-sobre-escuro);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rodape__lista {
  display: grid;
  gap: var(--espaco-2);
}

.rodape address {
  display: grid;
  gap: var(--espaco-2);
  font-style: normal;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-5);
  padding-block: var(--espaco-5);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 0.8125rem;
}

/* ---------- Botão flutuante "voltar ao topo" ---------- */
.ao-topo {
  position: fixed;
  right: var(--espaco-4);
  bottom: var(--espaco-4);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid #fff;
  border-radius: var(--raio);
  background: var(--cor-azul-escuro);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--transicao), transform var(--transicao), visibility 0s linear 160ms;
}

.ao-topo[data-visivel="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--transicao), transform var(--transicao), visibility 0s;
}

.ao-topo:hover {
  background: var(--cor-azul);
}

.ao-topo .icone {
  width: 1.5rem;
  height: 1.5rem;
}

:root[data-contraste="alto"] .ao-topo {
  color: var(--cor-amarelo);
}

.rodape__topo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-weight: 700;
}


/* ==========================================================================
   Formulários: campos, mensagens de erro e resumo de erros.
   Compartilhado pelas páginas com formulário (login, cadastro...).
   Estrutura de um campo:
     <div class="campo">
       <label class="campo__rotulo" for="x">…</label>
       <p class="campo__dica" id="x-dica">…</p>                (opcional)
       <div class="campo__caixa"><input class="campo__entrada" id="x" aria-describedby="x-dica x-erro">…</div>
       <p class="campo__erro" id="x-erro" hidden></p>
     </div>
   ========================================================================== */

/* minmax(0, 1fr): campos com largura mínima grande (arquivo, selects longos)
   não alargam a página em telas estreitas. */
.formulario {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-5);
}

.campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Lado a lado na grade, um campo não estica por causa do vizinho mais alto. */
  align-content: start;
  gap: var(--espaco-2);
}

.campo__rotulo {
  font-weight: 700;
  font-size: 0.9375rem;
}

.campo__dica {
  margin-top: calc(var(--espaco-1) * -1);
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

/* A caixa envolve a entrada e ações (ex.: mostrar senha) e recebe o foco visível. */
.campo__caixa {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--cor-borda-campo);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  transition: border-color var(--transicao);
}

.campo__caixa:hover {
  border-color: var(--cor-texto-suave);
}

.campo__caixa:focus-within {
  border-color: var(--cor-azul);
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.campo__entrada {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0 var(--espaco-3);
  border: 0;
  background: transparent;
  font-size: 1rem;
}

.campo__entrada:focus {
  outline: none;
}

.campo__acao {
  display: grid;
  place-items: center;
  width: 3rem;
  border: 0;
  border-left: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.campo__acao:hover {
  color: var(--cor-azul-escuro);
}

.campo__acao:focus-visible {
  outline-offset: -4px;
}

.campo__acao .icone {
  width: 1.375rem;
  height: 1.375rem;
}

/* Botão "mostrar senha": troca o ícone conforme o estado. */
.campo__acao .icone--ligado,
.campo__acao[aria-pressed="true"] .icone--desligado {
  display: none;
}

.campo__acao[aria-pressed="true"] .icone--ligado {
  display: block;
}

.campo--invalido .campo__caixa {
  border-color: var(--cor-erro);
}

.campo__erro,
.campo__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.campo__erro {
  color: var(--cor-erro);
}

.campo__aviso {
  color: var(--cor-texto-suave);
}

.campo__erro .icone,
.campo__aviso .icone {
  margin-top: 0.125rem;
}

/* Resumo de erros: recebe o foco ao enviar com problemas. */
.resumo-erros {
  padding: var(--espaco-4);
  border: 1px solid var(--cor-erro);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--cor-erro-fundo);
}

.resumo-erros__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
  font-size: 1rem;
  color: var(--cor-erro);
}

.resumo-erros ul {
  display: grid;
  gap: var(--espaco-1);
  margin: 0;
  padding-left: var(--espaco-5);
  font-size: 0.9375rem;
}

.resumo-erros a {
  color: var(--cor-erro);
  font-weight: 600;
}

/* ---------- Grupos e grade de campos ---------- */
/* <fieldset class="grupo-campos"><legend>…</legend><div class="campos-grade">…</div></fieldset> */
.grupo-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-campos__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  width: 100%;
  padding: 0 0 var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
  font-size: 1.0625rem;
  font-weight: 750;
}

.campos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-5) var(--espaco-4);
}

@media (min-width: 40em) {
  .campos-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo--largo {
    grid-column: 1 / -1;
  }
}

/* Selects e datas usam a mesma caixa; mantêm a seta/ícone nativos. */
select.campo__entrada {
  padding-right: var(--espaco-2);
  cursor: pointer;
}

select.campo__entrada:disabled {
  cursor: not-allowed;
  color: var(--cor-texto-suave);
}

.campo__caixa:has(:disabled) {
  border-style: dashed;
}

/* ---------- Caixa de seleção (ex.: ciência dos termos) ---------- */
.campo-escolha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--espaco-1) var(--espaco-3);
}

.campo-escolha input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--cor-azul);
  cursor: pointer;
}

.campo-escolha label {
  font-size: 0.9375rem;
  cursor: pointer;
}

.campo-escolha .campo__erro {
  grid-column: 2;
}

/* ---------- Requisitos da senha (atualizados enquanto se digita) ---------- */
.requisitos {
  display: grid;
  gap: var(--espaco-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

.requisitos li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
}

.requisitos .icone {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}

.requisitos .icone--ligado,
.requisito--atendido .icone--desligado {
  display: none;
}

.requisito--atendido .icone--ligado {
  display: block;
}

.requisito--atendido {
  color: var(--cor-verde-texto);
}

/* ---------- Outros tipos de campo ---------- */
/* Marca de campo opcional dentro do rótulo: <span class="campo__opcional">(opcional)</span> */
.campo__opcional {
  font-weight: 500;
  color: var(--cor-texto-suave);
}

textarea.campo__entrada {
  min-height: 8rem;
  padding: var(--espaco-3);
  line-height: 1.5;
  resize: vertical;
}

.campo__contador {
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  text-align: right;
}

/* Somente leitura: valor gerado pelo sistema. */
.campo__caixa:has([readonly]) {
  border-style: dashed;
  background: var(--cor-fundo);
}

/* Arquivo: botão nativo estilizado como .botao. */
input[type="file"].campo__entrada {
  padding: var(--espaco-2);
  font-size: 0.9375rem;
}

input[type="file"].campo__entrada::file-selector-button {
  margin-right: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-4);
  border: 2px solid var(--cor-azul);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-azul-escuro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.previa-imagem {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  object-fit: cover;
}

/* Faixa (range) com o valor ao lado. */
.campo__faixa {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  min-height: 3rem;
}

.campo__faixa input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--cor-azul);
  cursor: pointer;
}

.campo__saida {
  min-width: 3.5rem;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
}

/* ---------- Grupos de opções (radio e checkbox) ---------- */
/* <fieldset class="opcoes"><legend class="campo__rotulo">…</legend><div class="opcoes__lista"><label class="opcao">…</label></div></fieldset> */
.opcoes {
  display: grid;
  gap: var(--espaco-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.opcoes > legend {
  margin-bottom: var(--espaco-2);
  padding: 0;
}

.opcoes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 2.75rem;
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 0.9375rem;
  cursor: pointer;
}

.opcao input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--cor-azul);
  cursor: pointer;
}

.opcao:has(:checked) {
  border-color: var(--cor-azul);
  background: #eaf1fa;
  font-weight: 700;
}

.opcao:has(:focus-visible) {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

:root[data-contraste="alto"] .opcao:has(:checked) {
  background: transparent;
  border-width: 2px;
}

.opcoes.campo--invalido .opcao {
  border-color: var(--cor-erro);
}

/* ---------- Interruptor (checkbox com role="switch") ---------- */
.interruptor {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  cursor: pointer;
}

.interruptor input {
  flex-shrink: 0;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--cor-borda-campo);
  border-radius: 999px;
  background: var(--cor-fundo);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
}

.interruptor input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--cor-texto-suave);
  transition: transform var(--transicao), background-color var(--transicao);
}

.interruptor input:checked {
  border-color: var(--cor-azul);
  background: var(--cor-azul);
}

.interruptor input:checked::before {
  background: #fff;
  transform: translateX(1.25rem);
}

:root[data-contraste="alto"] .interruptor input:checked::before {
  background: #000;
}

.interruptor__texto {
  display: grid;
  gap: 2px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.interruptor__texto small {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
}

/* ---------- Ações do formulário ---------- */
.formulario__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espaco-3);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}

@media (max-width: 29.99em) {
  .formulario__acoes .botao {
    flex: 1 1 100%;
  }
}

/* ---------- Finalidade do tratamento de dados (LGPD, art. 9º) ---------- */
.finalidade {
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-azul);
  border-radius: var(--raio);
  font-size: 0.875rem;
}

.finalidade summary {
  padding: var(--espaco-3) var(--espaco-4);
  font-weight: 700;
  color: var(--cor-azul-escuro);
  cursor: pointer;
}

:root[data-contraste="alto"] .finalidade summary {
  color: var(--cor-texto);
}

.finalidade ul,
.finalidade p {
  margin: 0;
  padding: 0 var(--espaco-4) var(--espaco-3);
  color: var(--cor-texto-suave);
}

.finalidade ul {
  display: grid;
  gap: var(--espaco-1);
  padding-left: calc(var(--espaco-4) + var(--espaco-4));
}

/* Separador "ou" entre formas de acesso. */
.separador {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cor-borda);
}


/* ==========================================================================
   Páginas de acesso (login, cadastro, recuperação de senha): cartão
   centralizado sobre o fundo da marca, com migalhas acima e notas abaixo.
   ========================================================================== */

.autenticacao {
  padding-block: var(--espaco-6) var(--espaco-7);
}

@media (min-width: 48em) {
  .autenticacao {
    padding-block: var(--espaco-7) var(--espaco-8);
  }
}

.autenticacao__conteudo {
  display: grid;
  /* minmax(0, 1fr): a coluna não cresce além da tela por causa de conteúdo largo. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--espaco-5);
}

/* Migalhas, cartão e notas compartilham a mesma largura e alinhamento. */
.autenticacao__conteudo > * {
  width: 100%;
  max-width: 28rem;
}

/* Formulários longos (ex.: cadastro) usam um cartão mais largo. */
.autenticacao__conteudo--largo > * {
  max-width: 46rem;
}

.cartao-acesso {
  display: grid;
  gap: var(--espaco-5);
  padding: var(--espaco-6) var(--espaco-5);
  border-top: 4px solid var(--cor-amarelo);
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

@media (min-width: 30em) {
  .cartao-acesso {
    padding: 2.5rem;
  }
}

:root[data-contraste="alto"] .cartao-acesso {
  border: 2px solid var(--cor-borda);
  border-top: 4px solid var(--cor-amarelo);
}

.cartao-acesso__cabecalho {
  display: grid;
  gap: var(--espaco-2);
}

.cartao-acesso__titulo {
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem);
  font-weight: 800;
}

.cartao-acesso__descricao {
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

/* Textos sobre o fundo escuro, abaixo do cartão. */
.autenticacao__nota {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-2);
  font-size: 0.9375rem;
  color: var(--cor-sobre-escuro-suave);
  text-align: center;
}

.autenticacao__nota a {
  color: var(--cor-sobre-escuro);
  font-weight: 700;
}

.autenticacao__nota .icone {
  color: var(--cor-amarelo);
}


/* ==========================================================================
   Mensagens de retorno (django.contrib.messages): usadas nas páginas públicas
   (ex.: erros do login via SUAP) e no painel. Vindas de painel.css.
   ========================================================================== */

.mensagens {
  display: grid;
  gap: var(--espaco-3);
}

.mensagens:empty {
  display: none;
}

.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid currentColor;
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 0.9375rem;
}

.alerta > .icone {
  margin-top: 0.2rem;
}

.alerta__texto {
  flex: 1;
  color: var(--cor-texto);
}

.alerta--sucesso {
  color: var(--cor-verde-texto);
}

.alerta--aviso {
  color: #8a5a00;
}

.alerta--erro {
  color: var(--cor-erro);
}

.alerta--info {
  color: var(--cor-azul-escuro);
}

:root[data-contraste="alto"] .alerta {
  color: var(--cor-texto);
}

.alerta__fechar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.5rem -0.25rem 0;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.alerta__fechar:hover {
  background: var(--cor-fundo);
}


/* ==========================================================================
   Páginas de erro (400, 403, 404): mensagem centralizada com ações.
   ========================================================================== */

.pagina-erro {
  display: grid;
  justify-items: center;
  gap: var(--espaco-4);
  padding-block: var(--espaco-7) var(--espaco-8);
  text-align: center;
}

.pagina-erro__titulo {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.pagina-erro__descricao {
  max-width: 36rem;
  color: var(--cor-texto-suave);
}

.pagina-erro__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-3);
}