/* Base do GLCP Forms: cores, letras, botões e campos. Toda página carrega este arquivo.
   O visual sai do formulário de papel: folha branca, linhas de pauta azuladas, tinta de
   caneta azul e um toque de marca-texto amarelo, reservado para o que pede ação. */

:root {
  --papel: #f4f7fc;        /* fundo da página */
  --folha: #ffffff;        /* a folha do formulário */
  --grafite: #1b2333;      /* texto */
  --suave: #566079;        /* texto de apoio */
  --pauta: #d3dcee;        /* linhas e bordas */
  --pauta-forte: #b4c2df;
  --tinta: #2340c8;        /* caneta azul: links, foco, marca */
  --tinta-escura: #172c96;
  --tinta-clara: #e7ecfc;
  --marca-texto: #ffe14d;  /* só no que pede ação */
  --ok: #12805a;
  --ok-fundo: #e3f4ec;
  --erro: #b9352a;
  --erro-fundo: #fbe9e7;

  --letra: "Atkinson Hyperlegible", system-ui, sans-serif;
  --titulo: "Familjen Grotesk", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mao: "Caveat", cursive;

  --raio: 10px;
  --raio-folha: 4px;
  --sombra-folha: 0 1px 0 var(--pauta), 0 18px 40px -24px rgba(23, 44, 150, .35);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font: 400 1.0625rem/1.6 var(--letra);
}

h1, h2, h3 { font-family: var(--titulo); line-height: 1.1; letter-spacing: -.015em; margin: 0; }

a { color: var(--tinta); text-underline-offset: .18em; }
a:hover { color: var(--tinta-escura); }

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

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

/* O atributo hidden vence qualquer display das classes abaixo. */
[hidden] { display: none !important; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botões ─────────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.15em;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--tinta); color: #fff;
  font: 700 1rem/1.2 var(--letra); text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.botao:hover { background: var(--tinta-escura); border-color: var(--tinta-escura); color: #fff; }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .55; cursor: not-allowed; }

/* O botão principal leva o marca-texto: é o único amarelo da tela. */
.botao-acao { background: var(--marca-texto); border-color: var(--grafite); color: var(--grafite); }
.botao-acao:hover { background: #ffd60a; border-color: var(--grafite); color: var(--grafite); }

.botao-linha { background: transparent; color: var(--tinta); }
.botao-linha:hover { background: var(--tinta-clara); color: var(--tinta-escura); }

.botao-discreto { background: transparent; border-color: transparent; color: var(--suave); padding-inline: .6em; }
.botao-discreto:hover { background: var(--tinta-clara); border-color: transparent; color: var(--tinta-escura); }

.botao-perigo { background: var(--erro); border-color: var(--erro); }
.botao-perigo:hover { background: #962a21; border-color: #962a21; }

/* ── Campos de formulário ───────────────────────────────────────────────── */

.campo { display: grid; gap: .35rem; margin-bottom: 1.15rem; }
.campo > label, .campo > legend { font-weight: 700; }
.campo .ajuda { color: var(--suave); font-size: .92rem; margin: 0; }
.obrigatorio { color: var(--erro); }

.entrada {
  width: 100%; min-height: 46px; padding: .6em .8em;
  border: 1.5px solid var(--pauta-forte); border-radius: 8px;
  background: var(--folha); color: var(--grafite);
  font: inherit;
}
.entrada:focus { border-color: var(--tinta); outline: 3px solid var(--tinta-clara); outline-offset: 0; }
textarea.entrada { min-height: 110px; resize: vertical; }
.entrada[aria-invalid="true"] { border-color: var(--erro); }

/* Data: o ícone do navegador dá lugar a um calendário na cor da tinta, e o campo inteiro
   abre o seletor. Vazio, o "dd/mm/aaaa" fica apagado. */
.entrada[type="date"] {
  position: relative; width: 100%; max-width: 15rem;
  padding-right: 2.9rem; cursor: pointer;
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
  background: var(--folha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232340c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='.6' fill='%232340c8'/%3E%3Ccircle cx='12' cy='14.5' r='.6' fill='%232340c8'/%3E%3Ccircle cx='15.5' cy='14.5' r='.6' fill='%232340c8'/%3E%3C/svg%3E") no-repeat right .85rem center / 20px;
}
.entrada[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer;
}
.entrada[type="date"]::-webkit-datetime-edit { padding: 0; }
.entrada[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.entrada[type="date"].vazia { color: var(--suave); }
.entrada[type="date"]:hover { border-color: var(--tinta); }
.data-extenso { margin: 0; min-height: 1.4em; color: var(--tinta); font-size: .95rem; font-weight: 700; }
.data-extenso::first-letter { text-transform: uppercase; }

.entrada-zap { max-width: 15rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }

fieldset.campo { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.campo > label.opcao, .opcao { display: flex; align-items: flex-start; gap: .6rem; padding: .3rem 0; cursor: pointer; font-weight: 400; }
.opcao input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--tinta); flex: none; }

.erro-campo { color: var(--erro); font-size: .92rem; margin: 0; }

.aviso { padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--grafite); text-decoration: none; font: 700 1.2rem/1 var(--titulo); }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca span { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Aviso de cookies ─────────────────────────────────────────────────────
   Um cartão no canto, sem bloquear a página. "Só os necessários" tem o mesmo peso
   de "Aceitar todos": recusar precisa ser tão fácil quanto aceitar. */
.cookies { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: flex-start; pointer-events: none; }
.cookies-caixa {
  pointer-events: auto; width: min(460px, 100%);
  background: var(--folha); color: var(--grafite);
  border: 1.5px solid var(--pauta-forte); border-top: 5px solid var(--tinta); border-radius: var(--raio);
  box-shadow: 0 24px 60px -20px rgba(23, 44, 150, .45);
  padding: 1.1rem 1.2rem 1rem;
  animation: cookies-entra .35s ease-out both;
}
@keyframes cookies-entra { from { opacity: 0; transform: translateY(14px); } }
.cookies h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.cookies p { margin: 0 0 .9rem; font-size: .95rem; color: var(--suave); }
.cookies-opcoes { display: grid; gap: .6rem; margin: 0 0 1rem; }
.cookies-opcao { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--pauta); border-radius: 8px; cursor: pointer; }
.cookies-opcao input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--tinta); flex: none; }
.cookies-opcao input:disabled { cursor: not-allowed; }
.cookies-opcao > span { display: grid; gap: .1rem; font-size: .9rem; color: var(--suave); }
.cookies-opcao strong { color: var(--grafite); font-size: .95rem; }
.cookies-acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cookies-acoes .botao { min-height: 42px; padding: .4em 1em; font-size: .95rem; }
.cookies-acoes .botao-discreto { margin-right: auto; padding-inline: .4em; }
@media (max-width: 520px) {
  .cookies { left: 8px; right: 8px; bottom: 8px; }
  .cookies-acoes .botao:not(.botao-discreto) { flex: 1 1 auto; }
}

/* Link que parece link mas é botão ("Preferências de cookies" no rodapé) */
.link-botao { border: 0; background: none; padding: 0; font: inherit; color: var(--tinta); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }