/* SaibaTudo — base compartilhada (site + PWA): fonte, tokens de cor (claro/escuro), reset, acessibilidade, botões, chips. */
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/portal/fonts/poppins-semibold.woff") format("woff");
}

:root {
  color-scheme: light dark;
  --navy: #0C2340;
  --navy-2: #143A66;
  --verde: #007A3D;
  --ouro: #FFB81C;

  --bg: #F8F9FA;
  --surface: #FFFFFF;
  --surface-v: #F1F5F9;
  --txt: #0F172A;
  --txt2: #475569;
  --outline: #CBD5E1;
  --outline-v: #E2E8F0;
  --borda-campo: #64748B; /* contorno de campos e interruptores: contraste ≥ 3:1 (WCAG 1.4.11) */
  --primary: #007A3D;
  --on-primary: #FFFFFF;
  --primary-c: #E8F5E9;
  --on-primary-c: #004D26;
  --sec: #FFB81C;
  --on-sec: #0C2340;
  --sec-c: #FEF3C7;
  --on-sec-c: #78350F;
  --err: #B91C1C;
  --err-c: #FEE2E2;
  --foco: #1D4ED8;
  --sombra: 0 1px 3px rgb(15 23 42 / .14), 0 1px 2px rgb(15 23 42 / .08);
  --fs: 1;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-marca: "Poppins", var(--fonte);
}

/* Escuro: o tema "sistema" (sem data-theme) segue o aparelho; data-theme="dark" força; data-theme="light" ignora o aparelho. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B132B; --surface: #1C2541; --surface-v: #3A4765; --txt: #FFFFFF; --txt2: #CBD5E1;
    --outline: #475569; --outline-v: #334155; --borda-campo: #94A3B8; --primary: #22C55E; --on-primary: #052E16;
    --primary-c: #14532D; --on-primary-c: #BBF7D0; --sec: #FBBF24; --on-sec: #451A03; --sec-c: #78350F;
    --on-sec-c: #FEF3C7; --err: #F87171; --err-c: #450A0A; --foco: #93C5FD;
    --sombra: 0 0 0 1px rgb(255 255 255 / .06);
  }
}
:root[data-theme="dark"] {
  --bg: #0B132B; --surface: #1C2541; --surface-v: #3A4765; --txt: #FFFFFF; --txt2: #CBD5E1;
  --outline: #475569; --outline-v: #334155; --borda-campo: #94A3B8; --primary: #22C55E; --on-primary: #052E16;
  --primary-c: #14532D; --on-primary-c: #BBF7D0; --sec: #FBBF24; --on-sec: #451A03; --sec-c: #78350F;
  --on-sec-c: #FEF3C7; --err: #F87171; --err-c: #450A0A; --foco: #93C5FD;
  --sombra: 0 0 0 1px rgb(255 255 255 / .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--fs)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--txt);
  font-family: var(--fonte); line-height: 1.5; font-size: 1rem; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Acessibilidade */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: 8px; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 8px; }
.mudo { color: var(--txt2); }
.pequeno { font-size: .8125rem; }
.mini { font-size: .75rem; }
.bloco { display: block; }
.centro { text-align: center; }
.grow { flex: 1; }

/* Botões (alvo de toque ≥ 44 px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1.5px solid transparent; border-radius: 12px; font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: none;
  background: transparent; line-height: 1.2; text-align: center; transition: background-color .15s, border-color .15s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--primary); color: var(--on-primary); }
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); }
.btn-secundario { background: var(--sec); color: var(--on-sec); }
.btn-ouro { background: var(--sec); color: var(--on-sec); }
.btn-contorno { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-texto { color: var(--primary); padding: 0 12px; }
.btn-texto:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.btn.peq { min-height: 44px; padding: 0 12px; font-size: .8125rem; border-radius: 10px; }
.btn.grande { min-height: 52px; font-size: 1rem; border-radius: 14px; }
.btn.cheio { width: 100%; }
.btn.perigo { color: var(--err); }
.btn-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  color: var(--txt2); cursor: pointer; flex: none;
}
.btn-icone:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.btn-icone.claro { color: #fff; }
.btn-icone.ouro { color: var(--ouro); }
.ic { flex: none; }

/* Chips (visual 36 px; área de toque 44 px) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border-radius: 18px;
  border: 1px solid var(--outline-v); background: var(--surface-v); color: var(--txt); font-size: .8125rem; font-weight: 500;
  cursor: pointer; text-align: left; line-height: 1.25;
}
.chip::before { content: ""; position: absolute; inset: -4px 0; }
.chip:hover:not(:disabled) { border-color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip:disabled { opacity: .6; cursor: default; }

/* Etiquetas */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; font-size: .75rem; font-weight: 600;
  line-height: 1.25; background: var(--surface-v); color: var(--txt);
}
.tag-verde { background: var(--primary-c); color: var(--on-primary-c); }
.tag-no { background: var(--err-c); color: var(--txt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 45%, transparent); }
.tag-ouro { background: var(--sec-c); color: var(--on-sec-c); }
.tag-neutro { background: var(--surface-v); color: var(--txt); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip.on, .btn-primario { outline: 2px solid ButtonText; }
}