/* ===== Fontes (arquivos locais: não depende do Google Fonts) ===== */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/poppins-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }

/* ===== Tokens ===== */
:root {
  --ferro: #131519;          /* fundo */
  --ferro-2: #181B20;
  --placa: #1D2026;          /* superfícies */
  --placa-2: #262A31;
  --linha: #333841;
  --giz: #F4F3EF;            /* texto */
  --giz-2: #A7ADB6;          /* texto secundário */
  --giz-3: #737A84;
  --accent: #E11D2A;         /* sobrescrito pela COR do config.js */
  --on-accent: #FFFFFF;
  --accent-texto: #EA616A;
  --accent-suave: rgba(225, 29, 42, 0.14);
  --ouro: #F5B301;
  --bom: #38C07A;
  --medio: #E9A23B;
  --ruim: #F0524F;
  --raio: 16px;
  --raio-p: 12px;
  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-num: 'Barlow Condensed', 'Poppins', system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ferro);
  color: var(--giz);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--fonte); font-weight: 900; line-height: 1.14; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--accent-texto); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--accent-texto); outline-offset: 3px; border-radius: 6px; }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--raio-p); border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .1s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--accent); color: var(--on-accent); }
.btn-principal:not(:disabled):hover { filter: brightness(1.08); }
.btn-secundario { background: var(--placa-2); border-color: var(--linha); color: var(--giz); }
.btn-secundario:not(:disabled):hover { border-color: var(--giz-3); }
.btn-texto { background: transparent; color: var(--giz-2); padding: 0 12px; }
.btn-texto:hover { color: var(--giz); }
.btn-largo { width: 100%; }

/* ===== Campos ===== */
.rotulo { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 8px; }
.rotulo .opcional { color: var(--giz-3); font-weight: 400; font-size: .85rem; margin-left: 6px; }
.campo {
  width: 100%; min-height: 52px; padding: 13px 16px;
  background: var(--ferro-2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  font-size: 1.0625rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
textarea.campo { resize: vertical; min-height: 112px; }
.campo::placeholder { color: var(--giz-3); }
.campo:focus { outline: none; border-color: var(--accent-texto); box-shadow: 0 0 0 3px var(--accent-suave); }
.campo[aria-invalid="true"] { border-color: var(--ruim); }
.erro-campo { color: var(--ruim); font-size: .9rem; margin-top: 6px; }

/* ===== Aviso no topo (modo demonstração / erro de configuração) ===== */
.aviso {
  position: relative; z-index: 30;
  padding: 10px 16px; font-size: .88rem; line-height: 1.45; text-align: center;
  background: #3A2A06; color: #FFE3A3; border-bottom: 1px solid #5C4410;
}
.aviso a { color: #FFE3A3; font-weight: 600; }
.aviso.aviso-erro { background: #3B1414; color: #FFC9C9; border-bottom-color: #6B2424; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 12px;
  background: var(--placa-2); border: 1px solid var(--linha); color: var(--giz);
  font-size: .95rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: opacity .2s, transform .2s;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { border-color: var(--ruim); }

/* ===== Carregando ===== */
.girando {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

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