/* Evoque — base visual compartilhada pelo app do aluno, pela Central, pela ficha e pelo cartaz.
   Identidade oficial: laranja #ff4d00 (CTA #cc3800), tinta #141417, Barlow Condensed nos títulos e Inter no texto.
   Regras de movimento (valem para todos os arquivos):
   1. Animação só nasce de um evento (navegar, tocar, dado novo do servidor), por classe posta depois do innerHTML;
      redesenho, mensagens de erro e a atualização automática nunca animam de novo.
   2. Estado que fica (marcado, válido, aberto) usa transition; nunca animation no seletor base de conteúdo redesenhado.
   3. Só transform e opacity. Deslize lateral de no máximo 12px e só dentro de contêiner com overflow-x: clip.
   4. Keyframes só com "from": o fim é o estado natural, nada fica preso invisível.
   5. Classe temporária sai por setTimeout (animationend borbulha dos filhos).
   6. Movimento reduzido: tudo instantâneo; só o anel de carregando continua girando, mais devagar.
   7. Impressão sem animação. Hover só com mouse; no toque o retorno vem do :active. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --ev: #ff4d00;          /* laranja da marca: barra de progresso, foco, detalhes */
  --ev-cta: #cc3800;      /* botão principal e links (contraste 5,1:1 com branco) */
  --ev-cta-hover: #b33100;
  --ev-soft: #ffe8dc;
  --ev-tint: #fff5ef;
  --ev-text: #b83700;     /* laranja para texto pequeno (o #ff4d00 não tem contraste para texto) */
  --ink: #141417;
  --ink-2: #3a3a42;
  --ink-deep: #0b0b0c;
  --muted: #62626c;       /* texto secundário (5,9:1 no branco) */
  --line: #e3e3e8;
  --line-strong: #8a8a94; /* borda de campos (3,4:1) */
  --bg: #f2f2f5;
  --surface: #ffffff;
  --ok: #067647;  --ok-soft: #e6f6ee; --ok-mark: #12b76a;
  --warn: #93370d; --warn-soft: #fff1d6; --warn-mark: #f79009;
  --err: #b3261e; --err-soft: #fdeceb;
  --r-s: 6px;
  --r: 12px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --shadow-1: 0 1px 2px rgba(20, 20, 23, .06), 0 1px 1px rgba(20, 20, 23, .04);
  --shadow-2: 0 10px 30px rgba(20, 20, 23, .10), 0 2px 6px rgba(20, 20, 23, .06);
  /* Movimento: tempos, curvas, distância e cascata. Toda entrada usa --e-out; saídas ~70% do tempo da entrada. */
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 520ms;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-move: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-sheet: cubic-bezier(.32, .72, 0, 1);
  --rise: 12px; --stagger: 45ms;
}

/* Keyframes só com "from": o fim é o estado natural do elemento, então nada fica preso invisível. */
@keyframes ev-in-up { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes ev-in-x { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--rise))); } }
@keyframes ev-fade-in { from { opacity: 0; } }
@keyframes ev-fade-out { to { opacity: 0; } }
@keyframes ev-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes ev-grow-x { from { transform: scaleX(0); } }
@keyframes ev-grow-y { from { transform: scaleY(0); } }
@keyframes ev-spin { to { transform: rotate(1turn); } }
@keyframes ev-pulse { 50% { opacity: .55; } }
@keyframes ev-draw { from { stroke-dashoffset: 1; } }
@keyframes ev-flash { from { background-color: var(--ev-soft); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ev-text); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* No celular, o retorno do toque vem do :active (sem o retângulo cinza do navegador e sem zoom de duplo toque). */
button, a, label, select, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, textarea { caret-color: var(--ev-cta); }
::selection { background: var(--ev-soft); color: var(--ink); }

/* Foco visível e consistente: contorno de 3px no laranja escuro (o #ff4d00 fica abaixo de 3:1 no cinza), afastado 2px. */
/* Navegador sem :focus-visible (iOS antes do 15.4, Chrome antes do 86) descarta a 1ª regra e mantém o anel padrão. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--ev-cta); outline-offset: 2px; border-radius: 4px; }

.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.muted { color: var(--muted); }

/* Botões em pílula. Principal = CTA laranja; secundário = contorno; discreto = só texto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
  transition: background-color var(--t-1) linear, border-color var(--t-1) linear, color var(--t-1) linear, transform var(--t-1) var(--e-out);
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--ev-cta); border-color: var(--ev-cta); color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-danger { color: var(--err); border-color: #e7b4b0; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: .55; cursor: default; }
.btn[aria-busy="true"] { cursor: progress; }
/* Ocupado: só depois de 150ms o rótulo some e o anel aparece no lugar (resposta rápida não pisca; a largura não muda). */
.btn[aria-busy="true"] { position: relative; animation: ev-hide-label 1ms 150ms forwards; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(20, 20, 23, .2); border-top-color: var(--ink); opacity: 0; animation: ev-show 1ms 150ms forwards, ev-spin .7s linear infinite; }
.btn-primary[aria-busy="true"]::after, .btn-dark[aria-busy="true"]::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes ev-hide-label { to { color: transparent; } }
@keyframes ev-show { to { opacity: 1; } }
.link { background: none; border: 0; padding: 0; color: var(--ev-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--ink); }
  .btn-primary:hover { background: var(--ev-cta-hover); border-color: var(--ev-cta-hover); }
  .btn-dark:hover { background: #2a2a30; border-color: #2a2a30; }
  .btn-ghost:hover { background: rgba(20, 20, 23, .06); border-color: transparent; }
  .btn-danger:hover { border-color: var(--err); background: var(--err-soft); }
}
@media (pointer: coarse) { .btn-sm { min-height: 42px; } }
/* Carregando: anel girando ao lado do texto, sem mudar o tamanho do botão. */
.spin { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; opacity: .85; animation: ev-spin .7s linear infinite; }

/* Campos: rótulo sempre visível, 16px no mínimo (evita zoom no iPhone), borda com contraste. */
.field { display: grid; gap: 6px; }
.field > span, .field > legend { font-weight: 600; font-size: 15px; }
.field .hint { color: var(--muted); font-size: 14px; font-weight: 400; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); font-size: 16px; line-height: 1.4; transition: border-color var(--t-1) linear;
}
.field textarea { min-height: 96px; resize: vertical; }
.input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--ink); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--err); border-width: 2px; }
.error-text { color: var(--err); font-weight: 600; font-size: 14px; }

.err-box { padding: 16px; border-radius: var(--r); background: var(--err-soft); color: var(--err); font-weight: 600; display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Etiquetas de estado: sempre com ícone e texto, nunca só cor. */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: #ececf0; color: var(--ink-2); }
.chip .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.chip-alert { background: var(--err-soft); color: var(--err); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-brand { background: var(--ev-soft); color: var(--ev-text); }

/* Aviso flutuante: centralizado sem transform (o transform fica livre para a animação) e sem bloquear cliques. */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100; margin-inline: auto;
  display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 560px; padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 15px; box-shadow: var(--shadow-2); pointer-events: none;
  opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity 160ms linear, transform 160ms var(--e-in), visibility 0s linear 160ms;
}
.toast.show { opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-2) linear, transform var(--t-3) var(--e-out), visibility 0s; }
.toast button, .toast a { pointer-events: auto; }
.toast .link { color: #ffb38f; flex: none; white-space: nowrap; padding: 6px 0; }

/* Esqueleto de carregamento (pulso de opacidade, barato para o celular). */
.sk { display: block; border-radius: 10px; background: #e8e8ed; animation: ev-pulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --stagger: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  /* O anel de carregando indica progresso: continua girando, mais devagar (valores em lista, um por animação). */
  .spin { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
  .btn[aria-busy="true"]::after { animation-duration: 1ms, 1.2s !important; animation-iteration-count: 1, infinite !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}