/* ==========================================================================
   MOTIM — tokens visuais + componentes base
   Compartilhado entre o formulário (index.html) e o painel (admin.html).
   Estilo: papel creme, contorno preto, laranja de destaque e o pino com a
   carinha da MOTIM (cores amostradas do layout de referência).
   ========================================================================== */

:root {
  /* --- Cores ------------------------------------------------------------ */
  --cor-tinta: #000000;           /* contornos, texto principal, pino */
  --cor-tinta-2: #1f1e1b;
  --cor-papel: #fcffc2;           /* fundo amarelo-claro (Figma iPhone 17 - 2) */
  --cor-papel-claro: #fcffc2;     /* cards, campos, trilhos */
  --cor-papel-escuro: #eef0b4;
  --cor-linha: #ed4000;           /* divisórias vermelhas entre perguntas */
  --cor-linha-forte: #999587;
  --cor-texto: #000000;
  --cor-texto-suave: #3d3c36;
  --cor-texto-mudo: #5b5951;      /* rótulos claros (6:1 sobre o papel) */
  --cor-destaque: #1944fa;        /* azul: preenchimentos, pino, botão */
  --cor-numero: #ed4000;          /* vermelho-laranja dos números grandes */
  --cor-destaque-forte: #1530c8;
  --cor-destaque-claro: #c9d3ff;
  --cor-verde: #1d7a4c;
  --cor-verde-claro: #dcebdd;
  --cor-erro: #b3261e;
  --cor-alerta: #8a5a00;
  --cor-alerta-claro: #f3e2b8;
  --cor-logo: #1944fa;            /* azul do mascote */

  /* --- Tipografia ------------------------------------------------------- */
  --fonte-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rastreio-kicker: 0.08em;
  --rastreio-botao: 0.06em;

  /* --- Traço e raios ---------------------------------------------------- */
  --traco: 2.5px;     /* contorno preto dos trilhos e botões */
  --raio-xs: 4px;
  --raio-sm: 6px;
  --raio-caixa: 6px;  /* quadradinho de marcar */
  --raio-md: 14px;
  --raio-lg: 18px;
  --raio-pill: 999px;

  /* --- Espaçamento (base 4) -------------------------------------------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;

  /* --- Sombras ---------------------------------------------------------- */
  --sombra-dura: 0 4px 0 var(--cor-tinta);           /* "adesivo" impresso */
  --sombra-flutuante: 0 10px 28px rgba(0, 0, 0, 0.16);

  /* --- Movimento -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 320ms;

  --alvo-toque: 48px;
  --largura-conteudo: 600px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--cor-papel);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }

:focus-visible {
  outline: 3px solid var(--cor-tinta);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }

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

/* ==========================================================================
   Topo com logo
   ========================================================================== */

.topo {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--esp-4) 0;
  background: var(--cor-papel);
  color: var(--cor-tinta);
  border-bottom: 1.5px solid var(--cor-linha);
}
.logo { display: inline-flex; align-items: center; color: var(--cor-logo); text-decoration: none; }
.logo svg { height: 19px; width: auto; }
.topo-secao {
  font: 700 12px/1 var(--fonte-corpo);
  letter-spacing: var(--rastreio-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}
.topo-secao::before { content: "/"; margin-right: 8px; font-weight: 400; color: var(--cor-texto-mudo); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: var(--esp-3); }

/* ==========================================================================
   Tipografia
   ========================================================================== */

.kicker {
  margin: 0;
  font: 700 12px/1.3 var(--fonte-corpo);
  letter-spacing: var(--rastreio-kicker);
  text-transform: uppercase;
  color: var(--cor-texto-mudo);
}

/* número grande laranja das perguntas */
.numero {
  font: 800 56px/0.9 var(--fonte-display);
  letter-spacing: -0.04em;
  color: var(--cor-numero);
  font-variant-numeric: tabular-nums;
}

/* marca-texto laranja atrás de palavras (mantém o texto preto legível) */
.marca {
  background: linear-gradient(transparent 58%, var(--cor-destaque-claro) 58%, var(--cor-destaque-claro) 92%, transparent 92%);
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alvo-toque);
  padding: 0 var(--esp-5);
  border: var(--traco) solid var(--cor-tinta);
  border-radius: var(--raio-pill);
  font: 800 14px/1 var(--fonte-corpo);
  letter-spacing: var(--rastreio-botao);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-tinta);
  background: transparent;
  transition: background-color 0.15s, transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primario { background: var(--cor-destaque); color: #fff; box-shadow: var(--sombra-dura); }
.btn-primario:hover { background: #3a56ff; }
.btn-primario:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cor-tinta); }
.btn-contorno:hover { background: var(--cor-papel-claro); }
.btn-contorno:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ==========================================================================
   Selos, cards, campos, divisória
   ========================================================================== */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  font: 600 13px/1.2 var(--fonte-corpo);
}
.selo svg { width: 14px; height: 14px; flex: none; }
.selo-contorno { border: 1.5px solid var(--cor-tinta); color: var(--cor-tinta); }
.selo-verde { background: var(--cor-verde); color: #fff; }
.selo-alerta { background: var(--cor-alerta-claro); color: var(--cor-alerta); }
.selo-claro { background: var(--cor-papel-escuro); color: var(--cor-texto-suave); }
.selo-vivo {
  background: var(--cor-destaque);
  color: #fff;
  border: 1.5px solid var(--cor-tinta);
  font: 800 11px/1 var(--fonte-corpo);
  letter-spacing: var(--rastreio-kicker);
  text-transform: uppercase;
}
.selo-vivo i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: 0.2; } }

.card {
  background: var(--cor-papel-claro);
  border: 2px solid var(--cor-tinta);
  border-radius: var(--raio-lg);
}

.divisoria { height: 0; border: 0; border-top: 1.5px solid var(--cor-linha); margin: 0; }

.campo {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 12px 16px;
  border: var(--traco) solid var(--cor-tinta);
  border-radius: var(--raio-md);
  background: var(--cor-papel-claro);
  font: 400 16px/1.4 var(--fonte-corpo); /* 16px evita zoom no iOS */
  color: var(--cor-tinta);
  transition: box-shadow 0.15s;
}
.campo::placeholder { color: var(--cor-texto-mudo); }
.campo:focus { outline: none; box-shadow: 0 0 0 4px var(--cor-destaque); }
textarea.campo { resize: vertical; min-height: 96px; }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1.5px solid var(--cor-linha-forte);
  border-radius: var(--raio-xs);
  font: 600 12px/1 var(--fonte-corpo);
  color: var(--cor-texto-mudo);
  background: transparent;
}

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