/*
  HJE Calculadora — sistema visual "Modernist" (redesign v3)
  Spec: docs/redesign-modernist/HANDOFF.md

  Substitui o sistema anterior (.hje-v2: Teko + chanfros + fundo escuro).
  Ativa por body.hje-v3, então as duas peles convivem enquanto a migração
  de telas acontece — nenhuma tela não-migrada quebra.

  Princípios inegociáveis da spec:
    - raio 0 em tudo (nada arredondado);
    - réguas estruturais de 2px, divisores de lista de 1px;
    - flat: sem sombra na UI;
    - tudo alinhado à esquerda, inclusive label de botão;
    - Archivo em toda parte;
    - acento é o roxo da HJE (#4B3A8F), não o vermelho do sistema Modernist.
*/

/* Archivo self-hosted seria o ideal (o projeto já self-hospeda as outras
   fontes), mas o arquivo .woff2 não veio no handoff — por ora via Google
   Fonts, com fallback de sistema. Trocar por self-host antes do deploy
   pra não depender de CDN externo. */
/* Auto-hospedada, e nao @import do Google. O @import era o pior caso de
   cadeia: o navegador baixava este CSS inteiro, so entao descobria o
   import, resolvia o DNS do fonts.googleapis.com, baixava outro CSS e so
   depois a fonte — quatro idas em serie antes do primeiro pixel. Agora e um
   arquivo, no mesmo dominio, que o WhiteNoise serve com cache longo.

   Uma fonte VARIAVEL de 34 KB cobre os tres pesos (400/600/800): baixar os
   tres separados traria o mesmo arquivo tres vezes. */
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/archivo-variable.cd56e2ec63d7.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* O styles.css legado tem "html, body { height: 100% }" global, nao escopado.
   Isso prende body.hje-v3 em exatamente 100vh: nas telas que crescem
   (perfil, plano de ensino, painel, desempenho) o conteudo abaixo da dobra
   ficava inalcancavel — a pagina simplesmente nao rolava. Mesmo override
   que primitives.css ja faz pro .hje-v2. */
html:has(body.hje-v3) { height: auto; }

body.hje-v3 {
  /* ---------- Cores ---------- */
  --ink: #201E1D;              /* base escura: painéis escuros, texto principal, réguas 2px */
  --ground: #F3F2F2;           /* fundo das telas claras / texto sobre escuro */
  --surface: #FFFFFF;          /* painéis secundários, campos */

  --roxo: #4B3A8F;             /* marca — CTA primário, destaque, seleção */
  --roxo-claro: #6A55C8;       /* CTA sobre escuro, barra em painel escuro */
  --roxo-escuro: #3B2C73;      /* hover do CTA */
  --roxo-pressed: #2C2057;     /* pressed */
  --roxo-tint: #F1EFFA;        /* hover de linha clara / linha selecionada */

  --ok: #1F7A46;               /* média >= 7 em fundo claro */
  --ok-claro: #8CE0AE;         /* idem em fundo escuro */
  --alerta: #B4531A;           /* média entre 5 e 7 */
  --alerta-claro: #F0B27A;
  --risco: #A31414;            /* média < 5 */
  --risco-claro: #FF8A70;

  --texto-2: #605D5D;          /* rótulos e secundário claro */
  --texto-3: #3A3735;          /* corpo sobre ground */

  --linha-escura: #3A3735;     /* divisor em painel escuro */
  --linha-escura-2: #33302F;
  --linha-clara: #DEDBDA;
  --linha-clara-2: #D6D3D2;
  --linha-clara-3: #C8C4C3;

  --rotulo-escuro: #8C8785;
  --rotulo-escuro-2: #B5B1AF;
  --rotulo-escuro-3: #6F6B69;

  --trilha-clara: #E6E3E2;     /* fundo de progress bar */
  --trilha-escura: #3A3735;

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-estado: 180ms;

  /* ---------- Estrutura ---------- */
  --altura-header: 62px;

  background: var(--ground);
  color: var(--texto-3);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  margin: 0;
}

/* Raio 0 é regra do sistema, não sugestão — o design anterior usava
   clip-path/chanfro em quase tudo, então isso precisa ser explícito. */
body.hje-v3 *,
body.hje-v3 *::before,
body.hje-v3 *::after {
  border-radius: 0 !important;
  clip-path: none !important;
  box-sizing: border-box;
}

body.hje-v3 input,
body.hje-v3 textarea,
body.hje-v3 select,
body.hje-v3 button { font-family: inherit; box-sizing: border-box; }

/* ---------- Tipografia ---------- */

body.hje-v3 .v3-display {
  font-size: 72px; font-weight: 800;
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
body.hje-v3 .v3-numero-gigante {
  font-size: 88px; font-weight: 800;
  line-height: .94; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-numero-grande {
  font-size: 76px; font-weight: 800; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-titulo-secao { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
body.hje-v3 .v3-titulo-painel { font-size: 46px; font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
body.hje-v3 .v3-kpi { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-valor { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

body.hje-v3 .v3-corpo { font-size: 16px; line-height: 1.45; text-wrap: pretty; color: var(--texto-3); }
body.hje-v3 .v3-rotulo { font-size: 13px; font-weight: 600; }
body.hje-v3 .v3-aux { font-size: 12px; color: var(--texto-2); }

/* Eyebrow: caixa alta com tracking largo — marca de seção do sistema. */
body.hje-v3 .v3-eyebrow {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--texto-2);
}
body.hje-v3 .v3-eyebrow--roxo { color: var(--roxo); }

/* ---------- Réguas ---------- */
body.hje-v3 .v3-regua { border: 0; border-top: 2px solid var(--ink); margin: 0; }
body.hje-v3 .v3-regua--escura { border-top-color: var(--linha-escura); }
body.hje-v3 .v3-divisor { border: 0; border-top: 1px solid var(--linha-clara); margin: 0; }

/* ---------- Botões ---------- */
/* Label sempre flush left: regra explícita da spec (nunca centralizado
   quando o botão é mais largo que o texto). */
body.hje-v3 .v3-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 22px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-estado) var(--ease),
              color var(--dur-estado) var(--ease),
              transform var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-btn--primario { background: var(--roxo); color: var(--ground); }
body.hje-v3 .v3-btn--primario:hover { background: var(--roxo-escuro); transform: translateY(-2px); }
body.hje-v3 .v3-btn--primario:active { background: var(--roxo-pressed); transform: none; }

body.hje-v3 .v3-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
body.hje-v3 .v3-btn--outline:hover { background: var(--ink); color: var(--ground); }

/* CTA sobre painel escuro + brilho atravessando (sheen da spec) */
body.hje-v3 .v3-btn--claro { background: var(--roxo-claro); color: var(--ground); position: relative; overflow: hidden; }
body.hje-v3 .v3-btn--claro:hover { background: var(--roxo); }

body.hje-v3 .v3-btn:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* ---------- Campos ---------- */
body.hje-v3 .v3-input {
  padding: 8px 10px;
  border: 2px solid var(--linha-clara-3);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-estado) var(--ease);
}
/* .v3-input e 800 pra nota ficar legivel de longe, mas o placeholder
   herdava isso e "Ex: Mecanica Geral" parecia um campo ja preenchido. */
body.hje-v3 .v3-input::placeholder {
  font-weight: 500; color: var(--texto-2); opacity: 1;
}
body.hje-v3 .v3-input:focus { border-color: var(--roxo); outline: none; }
body.hje-v3 .v3-input:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* ---------- Barras de progresso ---------- */
body.hje-v3 .v3-barra { background: var(--trilha-clara); overflow: hidden; }
body.hje-v3 .v3-barra--escura { background: var(--trilha-escura); }
body.hje-v3 .v3-barra__fill {
  height: 100%;
  background: var(--roxo);
  transform-origin: left;
  transition: width 300ms var(--ease);
}
body.hje-v3 .v3-barra__fill--ok { background: var(--ok); }
body.hje-v3 .v3-barra__fill--alerta { background: var(--alerta); }
body.hje-v3 .v3-barra__fill--risco { background: var(--risco); }

/* ---------- Cores de situação ---------- */
body.hje-v3 .v3-ok { color: var(--ok); }
body.hje-v3 .v3-alerta { color: var(--alerta); }
body.hje-v3 .v3-risco { color: var(--risco); }
body.hje-v3 .v3-ok-escuro { color: var(--ok-claro); }
body.hje-v3 .v3-alerta-escuro { color: var(--alerta-claro); }
body.hje-v3 .v3-risco-escuro { color: var(--risco-claro); }

/* ---------- Animação ---------- */
/* Todas as entradas ficam atrás de prefers-reduced-motion. E, lição do
   redesign anterior: conteúdo real NUNCA começa em opacity:0 esperando
   scroll — estas animações rodam no load, não em IntersectionObserver. */
@keyframes v3-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-descer {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50%      { transform: translateY(6px); opacity: 1; }
}   /* seta que desce: home e materia */
@keyframes v3-riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v3-rowIn  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes v3-numIn  { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes v3-growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-wipeIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-sheen { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

@media (prefers-reduced-motion: no-preference) {
  body.hje-v3 .v3-anim-rise { animation: v3-riseIn 500ms var(--ease) both; }
  body.hje-v3 .v3-anim-row  { animation: v3-rowIn 500ms var(--ease) both; }
  body.hje-v3 .v3-anim-num  { animation: v3-numIn 550ms var(--ease) both; }
  body.hje-v3 .v3-anim-wipe { animation: v3-wipeIn 700ms var(--ease) both; transform-origin: left; }

  body.hje-v3 .v3-btn--claro::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    /* Tres passadas, nao `infinite`: o brilho existe pra chamar atencao no
       primeiro olhar, e depois disso vira so repaint de gradiente rodando
       enquanto a aba estiver aberta — inclusive em celular, gastando
       bateria por nada. */
    animation: v3-sheen 2.6s ease-in-out 1s 3;
  }
}

/* Cascata: o passo vem inline via --i (índice), como a spec define.

   Com teto de 300ms, e com o seletor preso a quem realmente anima. Sem o
   teto, a 12a linha de um curso de medicina so aparecia 1,04s DEPOIS de a
   pagina estar pronta — o dono relatava isso como "nao carregou", e era
   so a animacao segurando conteudo que ja estava la.

   `[style*="--i"]` sozinho e um dos seletores mais caros que existem:
   casamento de substring no atributo style, avaliado contra a arvore
   inteira. Preso as tres classes que animam, o navegador so olha o que
   interessa. */
body.hje-v3 .v3-anim-rise[style*="--i"],
body.hje-v3 .v3-anim-row[style*="--i"],
body.hje-v3 .v3-anim-num[style*="--i"] {
  animation-delay: min(calc(var(--i) * 0.045s), 300ms);
}

/* ---------- Utilitários estruturais ---------- */
/* min-height/min-width 0: a spec marca como bug real que aconteceu — sem
   isso o conteúdo estoura a altura e a coluna alarga com texto longo. */
body.hje-v3 .v3-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
body.hje-v3 .v3-fill { flex: 1 1 0; min-height: 0; }
body.hje-v3 { height: auto; min-height: 100vh; }
body.hje-v3 .v3-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hje-v3 .v3-num { font-variant-numeric: tabular-nums; }


/* O styles.css legado poe padding: 40px no <main>. As telas v3 sao desenhadas
   pra ocupar a viewport inteira (100vh/100dvh), entao esse padding empurrava
   cada tela 80px alem da altura da janela e criava rolagem onde a spec pede
   "uma tela, sem rolagem". */
body.hje-v3 main { padding: 0; margin: 0; }

/* ---------- Primitivos de formulário ----------
   Usados por login, editar perfil, criar matéria e envio de plano de ensino.
   Rótulo em cima do campo (nunca placeholder como rótulo: some ao digitar). */
body.hje-v3 .v3-campo { display: flex; flex-direction: column; gap: 6px; }
body.hje-v3 .v3-campo + .v3-campo { margin-top: 14px; }
body.hje-v3 .v3-input--largo { width: 100%; padding: 11px 12px; font-size: 16px; }
body.hje-v3 select.v3-input--largo { font-weight: 800; }
body.hje-v3 .v3-campo-duplo {
  display: grid; grid-template-columns: 1fr 110px; gap: 12px; margin-top: 14px;
}
body.hje-v3 .v3-campo-duplo .v3-campo + .v3-campo,
body.hje-v3 .v3-campo-duplo .v3-campo { margin-top: 0; }
@media (max-width: 420px) {
  body.hje-v3 .v3-campo-duplo { grid-template-columns: 1fr; }
}

/* ---------- Modal de onboarding (base.html) ----------
   O CSS desse modal so existia sob .hje-v2. Nas telas v3 ele voltava a ser
   um bloco cru no topo do documento, empurrando a pagina pra baixo — a
   primeira coisa que todo aluno novo via. */
body.hje-v3 .onboarding-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none;                /* o JS troca pra flex */
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(32, 30, 29, 0.72);
  animation: v3-fadeIn 160ms var(--ease) both;
}
body.hje-v3 .onboarding-card {
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  padding: 30px 32px;
  background: var(--surface); color: var(--texto-3);
  border-top: 6px solid var(--roxo);
  animation: v3-riseIn 260ms var(--ease) both;
}
body.hje-v3 .onboarding-card:focus { outline: none; }
body.hje-v3 .onboarding-card h2 {
  margin: 0 0 6px;
  font-size: 26px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}
body.hje-v3 .onboarding-lead { margin: 0 0 22px; color: var(--texto-2); font-size: 14px; }

body.hje-v3 .onboarding-tip {
  padding: 16px 0;
  border-top: 1px solid var(--linha-clara);
}
/* Só o <strong> filho direto e o titulo do bloco. Sem o ">", os negritos
   no meio da frase ("peso 0.3", "30%") viravam blocos em caixa alta e
   quebravam o texto no meio. */
body.hje-v3 .onboarding-tip > strong {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink);
}
body.hje-v3 .onboarding-tip p strong,
body.hje-v3 .onboarding-tip li strong { font-weight: 800; color: var(--ink); }
body.hje-v3 .onboarding-tip p,
body.hje-v3 .onboarding-tip ul { margin: 0; font-size: 14px; line-height: 1.55; }
body.hje-v3 .onboarding-tip ul { padding-left: 18px; margin-top: 8px; }
body.hje-v3 .onboarding-tip li { margin-bottom: 4px; }
body.hje-v3 .onboarding-tip__footnote { margin-top: 10px !important; color: var(--texto-2); font-size: 13px !important; }

body.hje-v3 .onboarding-card__btn {
  width: 100%; margin-top: 22px; padding: 13px 16px;
  justify-content: center;
  background: var(--roxo); color: #fff; border: 2px solid var(--roxo);
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; cursor: pointer;
  transition: background var(--dur-estado) var(--ease);
}
body.hje-v3 .onboarding-card__btn:hover { background: var(--roxo-escuro); border-color: var(--roxo-escuro); }
body.hje-v3 .onboarding-card__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.hje-v3 .onboarding-overlay,
  body.hje-v3 .onboarding-card { animation: none; }
}

/* Texto que precisa aparecer literalmente (nome de usuario a ser digitado,
   slug, codigo) dentro de um rotulo em caixa alta. */
body.hje-v3 .v3-literal {
  text-transform: none; letter-spacing: 0; font-weight: 800; color: var(--ink);
}

/* ---------- Seção retrátil ----------
   Botão + região que abre e fecha com animação de altura.

   A altura anima com grid-template-rows 0fr -> 1fr, e não com max-height
   chutado: max-height precisa de um número inventado, e conteúdo mais alto
   que o chute fica cortado sem aviso.

   O conteúdo existe sempre no HTML. Sem JS a seção fica ABERTA (o atributo
   hidden é posto pelo script), então nada de real depende de clique pra
   aparecer. */
body.hje-v3 .v3-dobra { border-top: 2px solid var(--ink); }

body.hje-v3 .v3-dobra__botao {
  appearance: none; background: none; border: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; padding: 15px 0;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--ink);
}
body.hje-v3 .v3-dobra__botao:hover .v3-dobra__titulo { color: var(--roxo); }
body.hje-v3 .v3-dobra__botao:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

body.hje-v3 .v3-dobra__titulo {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: color var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-dobra__aux { color: var(--texto-2); font-size: 12px; margin-left: auto; }

/* Sinal de estado: um "+" que gira pra "×" quando abre. Dois traços, porque
   um caractere de texto não gira em torno do próprio centro de forma
   confiável entre fontes. */
body.hje-v3 .v3-dobra__sinal {
  position: relative; flex: 0 0 auto;
  width: 14px; height: 14px;
}
body.hje-v3 .v3-dobra__sinal::before,
body.hje-v3 .v3-dobra__sinal::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
body.hje-v3 .v3-dobra__sinal::before { width: 14px; height: 2px; }
body.hje-v3 .v3-dobra__sinal::after {
  width: 2px; height: 14px;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
body.hje-v3 .v3-dobra__botao[aria-expanded="true"] .v3-dobra__sinal::after {
  transform: rotate(90deg); opacity: 0;
}

body.hje-v3 .v3-dobra__area {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 300ms var(--ease);
}
body.hje-v3 .v3-dobra__area[hidden] {
  display: grid;           /* hidden esconderia de vez, matando a animação */
  grid-template-rows: 0fr;
}
body.hje-v3 .v3-dobra__area > * { overflow: hidden; min-height: 0; }
body.hje-v3 .v3-dobra__area[hidden] > * { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  body.hje-v3 .v3-dobra__area { transition: none; }
  body.hje-v3 .v3-dobra__sinal::after { transition: none; }
}

/* ---------- Revelação ao rolar ----------
   Só entra em cena quando há JS (html.js), e o conteúdo NUNCA fica preso
   invisível: o script tem um prazo depois do qual revela tudo, dê ou não o
   IntersectionObserver. Sem JS, sem opacity:0 nenhum. */
@media (prefers-reduced-motion: no-preference) {
  html.js body.hje-v3 .v3-revela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
    transition-delay: calc(var(--atraso, 0) * 90ms);
  }
}
html.js body.hje-v3 .v3-revela.v3-revelado {
  opacity: 1;
  transform: none;
}