/* =====================================================================
   Estudometrics Concursos · identidade interna do /app · tokens v1
   Substitui os blocos de variáveis de index.html (/app):
     linhas ~143-153 (:root, @media dark, [data-theme="dark"])
     linha  ~906-908 (segunda cópia dos mesmos blocos)
   e as cores fixas de <style id="emPaleta">.
   Regras: azul #1A4480, azul escuro #0F315F, azul claro #E7EEF6, branco,
   papel #F6F5F2, vinho #8C1D18 / #F8EBE9. Vinho só para erro, pegadinha
   e alerta, e nunca sobre azul. Raio 2px (controles) e 4px (blocos).
   Sem sombra. Só Inter e JetBrains Mono.
   Mockup. Nada disto foi aplicado no app.
   ===================================================================== */

/* ---------- 1. Marca (constantes, não mudam com o tema) ---------- */
:root{
  --em-azul:#1A4480;
  --em-azul-escuro:#0F315F;
  --em-azul-claro:#E7EEF6;
  --em-branco:#FFFFFF;
  --em-papel:#F6F5F2;
  --em-vinho:#8C1D18;
  --em-vinho-claro:#F8EBE9;

  /* derivados dos azuis, já usados hoje no app (tema escuro e DES) */
  --em-azul-medio:#24548F;
  --em-azul-nevoa:#C5D4E8;
  --em-azul-cinza:#8FA6C4;
  --em-azul-aco:#4A6A94;
  --em-noite:#071422;      /* fundo escuro; = theme-color atual */
  --em-noite-2:#10243F;    /* superfície escura */
  --em-noite-3:#16325A;    /* realce escuro */
  --em-noite-linha:#2A4468;
  --em-vinho-noite:#3A1614;/* fundo de erro no escuro */
  --em-linha-clara:#DCE4EE;/* 1px de cartão no claro (azul claro + 4% de azul) */

  /* ---------- 2. Tipografia ---------- */
  --em-fonte:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --em-mono:'JetBrains Mono',ui-monospace,monospace;
  --em-fs-numero:72px;   /* número grande de desempenho (mono 500) */
  --em-fs-display:48px;  /* título de página dentro do bloco azul */
  --em-fs-h1:36px;
  --em-fs-h2:24px;
  --em-fs-h3:19px;
  --em-fs-corpo:16px;
  --em-fs-leitura:17px;  /* texto de lição e enunciado */
  --em-fs-peq:14px;
  --em-fs-kicker:12px;   /* mono, maiúsculas, +0.08em */
  --em-lh-titulo:1.08;
  --em-lh-corpo:1.55;
  --em-peso-titulo:600;
  --em-peso-ui:500;

  /* ---------- 3. Espaço (base 4) ---------- */
  --em-e1:4px; --em-e2:8px; --em-e3:12px; --em-e4:16px;
  --em-e5:24px; --em-e6:32px; --em-e7:48px; --em-e8:64px;
  --em-alvo:44px;        /* altura mínima de toque */
  --em-coluna:1120px;    /* largura do conteúdo no desktop */

  /* ---------- 4. Forma ---------- */
  --em-r1:2px;           /* botão, chip, campo, aba, toast */
  --em-r2:4px;           /* cartão, bloco, painel, ilustração */
  --em-borda:1px;
  --em-borda-forte:2px;  /* alternativa marcada, erro, foco */
  --em-barra:4px;        /* barra de progresso */

  /* ---------- 5. Movimento ---------- */
  --em-dur-curta:160ms;
  --em-dur-media:240ms;
  --em-dur-ciclo:1200ms; /* indeterminado: carregando */
  --em-curva:cubic-bezier(.2,0,0,1);
}

/* ---------- 6. Funções · tema claro (padrão) ---------- */
:root{
  color-scheme:light;
  --em-fundo:var(--em-papel);
  --em-superficie:var(--em-branco);
  --em-superficie-2:var(--em-azul-claro);   /* chip, realce, aba ativa */
  --em-texto:var(--em-azul-escuro);
  --em-texto-2:var(--em-azul-medio);
  --em-texto-3:var(--em-azul-aco);
  --em-linha:var(--em-linha-clara);
  --em-linha-forte:var(--em-azul-cinza);
  --em-acao:var(--em-azul);                 /* botão principal, link, aba ativa */
  --em-acao-hover:var(--em-azul-escuro);
  --em-acao-texto:var(--em-branco);
  --em-bloco:var(--em-azul);                /* bloco de cor cheia */
  --em-bloco-texto:var(--em-branco);
  --em-bloco-texto-2:var(--em-azul-claro);
  --em-foco:var(--em-azul);
  /* estados de resposta */
  --em-certo:var(--em-azul);                /* acerto: azul cheio + ✓ + "Acertou" */
  --em-certo-fundo:var(--em-azul-claro);
  --em-erro:var(--em-vinho);                /* erro, pegadinha, alerta */
  --em-erro-fundo:var(--em-vinho-claro);
  --em-erro-cheio:var(--em-vinho);
  --em-duvida:var(--em-azul-medio);         /* "Acho que sei": contorno */
  --em-chute:var(--em-azul-aco);            /* "Vou chutar": contorno tracejado */
  --em-parcial:var(--em-azul-nevoa);        /* barra parcial (era âmbar) */
  --em-trilho:var(--em-azul-claro);         /* fundo de barra */
}

/* ---------- 7. Funções · tema escuro (só azuis; sem rosa) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --em-fundo:var(--em-noite);
    --em-superficie:var(--em-noite-2);
    --em-superficie-2:var(--em-noite-3);
    --em-texto:var(--em-azul-claro);
    --em-texto-2:var(--em-azul-nevoa);
    --em-texto-3:var(--em-azul-cinza);
    --em-linha:var(--em-noite-linha);
    --em-linha-forte:var(--em-azul-aco);
    --em-acao:var(--em-azul-claro);         /* botão azul-claro, texto azul escuro */
    --em-acao-hover:var(--em-branco);
    --em-acao-texto:var(--em-azul-escuro);
    --em-bloco:var(--em-azul);
    --em-bloco-texto:var(--em-branco);
    --em-bloco-texto-2:var(--em-azul-claro);
    --em-foco:var(--em-branco);
    --em-certo:var(--em-azul-claro);
    --em-certo-fundo:var(--em-noite-3);
    --em-erro:var(--em-vinho-claro);
    --em-erro-fundo:var(--em-vinho);
    --em-erro-cheio:var(--em-vinho);
    --em-duvida:var(--em-azul-nevoa);
    --em-chute:var(--em-azul-cinza);
    --em-parcial:var(--em-azul-aco);
    --em-trilho:var(--em-noite-3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --em-fundo:var(--em-noite);
  --em-superficie:var(--em-noite-2);
  --em-superficie-2:var(--em-noite-3);
  --em-texto:var(--em-azul-claro);
  --em-texto-2:var(--em-azul-nevoa);
  --em-texto-3:var(--em-azul-cinza);
  --em-linha:var(--em-noite-linha);
  --em-linha-forte:var(--em-azul-aco);
  --em-acao:var(--em-azul-claro);
  --em-acao-hover:var(--em-branco);
  --em-acao-texto:var(--em-azul-escuro);
  --em-bloco:var(--em-azul);
  --em-bloco-texto:var(--em-branco);
  --em-bloco-texto-2:var(--em-azul-claro);
  --em-foco:var(--em-branco);
  --em-certo:var(--em-azul-claro);
  --em-certo-fundo:var(--em-noite-3);
  --em-erro:var(--em-vinho-claro);
  --em-erro-fundo:var(--em-vinho);
  --em-erro-cheio:var(--em-vinho);
  --em-duvida:var(--em-azul-nevoa);
  --em-chute:var(--em-azul-cinza);
  --em-parcial:var(--em-azul-aco);
  --em-trilho:var(--em-noite-3);
}

/* ---------- 8. Ponte: variáveis antigas → novas ----------
   Mantém todo o CSS atual funcionando. Ficam no mesmo seletor :root,
   então seguem o tema sozinhas. Apagar só depois de trocar os usos. */
:root,
:root[data-theme="dark"]{
  --ink:var(--em-texto);            /* era #1A4480 / #E7EEF6 */
  --ink-2:var(--em-texto);          /* era #1A4480 / #F6F5F2 */
  --muted:var(--em-texto-2);        /* era #1A4480 / #C5D4E8 */
  --quiet:var(--em-texto-3);        /* era #24548F / #8FA6C4 */
  --line:var(--em-linha);           /* era #E4E4E7 (cinza) / #2A4468 */
  --edge:var(--em-linha-forte);     /* era #A1A1AA (cinza) / #4A6A94 */
  --ground:var(--em-fundo);         /* era #F6F5F2 / #071422 */
  --surface:var(--em-superficie);   /* era #FFFFFF / #10243F */
  --accent:var(--em-acao);          /* era #1A4480 / #F8EBE9 (rosado no escuro) */
  --accent-ink:var(--em-acao-texto);/* era #FFFFFF / #0F315F */
  --accent-tint:var(--em-superficie-2); /* era #E7EEF6 / #3A1614 (vinho no escuro) */
  --accent-hi:var(--em-acao-hover); /* era #0F315F / #FFFFFF */
  --accent-hi2:var(--em-acao-hover);/* era #0F315F / #F8EBE9 */
  --amber:var(--em-texto-2);        /* era #8A5A00 / #FFD27A (âmbar sai) */
  --amber-tint:var(--em-superficie-2); /* era #FBF3D8 / #3A2E12 */
  --coral:var(--em-erro);           /* era #8C1D18 / #F8EBE9 (igual ao accent no escuro) */
  --coral-tint:var(--em-erro-fundo);/* era #F8EBE9 / #3A1614 */
  --ok:var(--em-certo);             /* era #1F7A4D / #7DDBA6 (verde sai) */
  --ok-tint:var(--em-certo-fundo);  /* era #E7F6EE / #143528 */
  --band:var(--em-bloco);           /* era #1A4480 */
  --on-band:var(--em-bloco-texto);  /* era #FFFFFF */
  --on-band-2:var(--em-bloco-texto-2); /* era #E4E4E7 / #E7EEF6 */
  --hl:var(--em-acao);              /* era #1A4480 / #E7EEF6 */
  --hl2:var(--em-texto-2);          /* era #24548F / #F8EBE9 */
  --mark:var(--em-superficie-2);    /* era #F8EBE9 / #3A1614 (grifo deixa de ser vinho) */
  --focus:var(--em-foco);           /* era #8C1D18 / #F8EBE9 (foco deixa de ser vinho) */
  --c1t:var(--em-azul-claro);  --c1i:var(--em-azul);        /* trilha 1: azul */
  --c2t:var(--em-azul-escuro); --c2i:var(--em-branco);      /* trilha 2: era verde */
  --c3t:var(--em-papel);       --c3i:var(--em-azul-medio);  /* trilha 3: era âmbar */
  --bd:var(--em-borda) solid var(--em-linha);
  --sh:none; --sh-sm:none;
  --r:var(--em-r2); --rb:var(--em-r1);
  --display:var(--em-fonte); --body:var(--em-fonte); --mono:var(--em-mono);
}
:root[data-theme="dark"]{
  --c1t:var(--em-noite-3);     --c1i:var(--em-azul-claro);
  --c2t:var(--em-azul);        --c2i:var(--em-branco);
  --c3t:var(--em-noite-2);     --c3i:var(--em-azul-nevoa);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c1t:var(--em-noite-3);   --c1i:var(--em-azul-claro);
    --c2t:var(--em-azul);      --c2i:var(--em-branco);
    --c3t:var(--em-noite-2);   --c3i:var(--em-azul-nevoa);
  }
}

/* ---------- 9. Camada de forma (carregar por último) ----------
   O app tem ~300 regras com raio de 5 a 999px. Estas são as que
   aparecem nas telas principais; o resto vai sendo trocado por arquivo.
   "html " na frente ganha das regras atuais sem !important.
   Círculos de dados (anel de progresso, gráfico) ficam de fora. */
html .btn, html .btn.sm, html .chip, html .badge, html .tag, html .lic-bloco .tag,
html .fase, html .pchip, html .rx-chip, html .cz-chip, html .seg, html .seg button,
html .ia-seg button, html .jd-btn, html .nav a, html .theme-btn, html .side-toggle,
html .side-burger, html .side-search, html .tb-ic, html .bottom a svg, html .toast,
html textarea, html input, html select, html .nz-sel, html .nz-in, html .banca-sel,
html .cho-bt button, html .pv-nav button, html .pv-map button, html .lb-btn,
html .em-modo, html .lic-bloco>summary, html .nav-s>summary, html .alm-a, html .vz-opt,
html .dh-tabs a span, html .fam-s, html .fam-s a, html .pl-done, html .opt{
  border-radius:var(--em-r1);
}
html .card, html .box, html .band, html .feedback, html .tbl-wrap, html .hub-ic,
html .modo-c, html .shelf, html .mural-hero, html .lei-hero, html .hj-foco,
html .pq-card, html .teo-bloco, html .piloto-sec, html .piloto-item, html .pv-alt,
html .rx-bank, html .lc-mod, html .td-kpi>div, html .emc-sk i, html .mf-stage{
  border-radius:var(--em-r2);
}
html .bar, html .bar i, html .lei-bar, html .lei-bar span, html .ct-bar, html .nz-bar,
html .pag-bar, html .pag-bar i, html .pr-bar, html .pr-bar>span, html .td-bar{
  border-radius:0;
}
html .card, html .box, html .btn, html .toast, html .band{ box-shadow:none; }

/* ---------- 10. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html *, html *::before, html *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
}
/* O app também tem o ajuste próprio "Reduzir animações" (html.emc-motion-off). */
html.emc-motion-off *, html.emc-motion-off *::before, html.emc-motion-off *::after{
  animation-duration:1ms !important; animation-iteration-count:1 !important;
  transition-duration:1ms !important;
}

/* ---------- 11. Carregamento (abertura .emc-porta e "Carregando" do loader.js) ---------- */
/* Abertura: fundo azul cheio no claro, noite no escuro. Sem sombra, sem rosa. */
.emc-porta{background:var(--em-azul);color:var(--em-branco);font-family:var(--em-fonte)}
.emc-porta p{color:var(--em-azul-claro)}
.emc-porta .btn{background:var(--em-branco);color:var(--em-azul-escuro);border-radius:var(--em-r1)}
.emc-porta .emc-sair{box-shadow:none;border:1px solid rgba(255,255,255,.5)}
.emc-porta input{background:var(--em-azul-escuro);border-color:rgba(255,255,255,.35)}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .emc-porta{background:var(--em-noite)} }
html[data-theme="dark"] .emc-porta{background:var(--em-noite)}
.emc-porta .emc-marca{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.emc-porta .emc-marca>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px}
.emc-porta .emc-marca b{font-weight:600;letter-spacing:-.03em;color:var(--em-branco)}
.emc-porta .emc-marca span span{font:500 11px/1 var(--em-mono);letter-spacing:.14em}
.emc-porta .emc-marca svg{width:40px;height:40px;background:var(--em-branco);border-radius:var(--em-r1)}
.emc-porta .emc-etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:24px 0 0;padding:0;width:min(520px,100%)}
.emc-porta .emc-etapas li{list-style:none;font:500 11px/1 var(--em-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--em-azul-claro)}
.emc-porta .emc-etapas i{position:relative;display:block;height:4px;margin-bottom:8px;overflow:hidden;background:rgba(255,255,255,.25)}
.emc-porta .emc-etapas .feito i{background:var(--em-branco)}
.emc-porta .emc-etapas .agora i b{position:absolute;inset:0 auto 0 0;width:30%;background:var(--em-branco);
  animation:emcCorre var(--em-dur-ciclo,1200ms) linear infinite}
.emc-porta .emc-num{font:500 72px/1 var(--em-mono);letter-spacing:-.04em;color:var(--em-branco)}
.emc-porta p[data-erro]{color:var(--em-azul-claro)}
.emc-porta.erro .emc-cartao{background:var(--em-branco);color:var(--em-azul-escuro);border-top:6px solid var(--em-vinho);border-radius:var(--em-r2);padding:24px}
@keyframes emcCorre{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

/* "Carregando" dentro do app: barra fina no topo + cartões fantasma sem brilho */
.emc-barra{position:fixed;top:0;left:0;right:0;height:3px;overflow:hidden;z-index:60;background:transparent}
.emc-barra b{position:absolute;top:0;bottom:0;width:30%;background:var(--em-acao);animation:emcCorre var(--em-dur-ciclo,1200ms) linear infinite}
html .emc-sk i{border-radius:var(--em-r2);background:var(--em-superficie);border:1px solid var(--em-linha);animation:none !important}

@media (prefers-reduced-motion: reduce){
  .emc-porta .emc-etapas .agora i b{animation:none;width:50%;transform:none}
  .emc-barra b{animation:none;width:100%;opacity:.5}
}
html.emc-motion-off .emc-porta .emc-etapas .agora i b{animation:none;width:50%;transform:none}
html.emc-motion-off .emc-barra b{animation:none;width:100%;opacity:.5}

/* Acerto: o pulso emcOk deixa de ser box-shadow verde e vira contorno azul */
@keyframes emcOk{0%{outline:2px solid var(--em-certo);outline-offset:0}100%{outline:2px solid transparent;outline-offset:6px}}