/*
  Telas 01 (home) e 02 (meus semestres) — redesign Modernist.
  Spec: docs/redesign-modernist/HANDOFF.md

  O header horizontal daqui é a navegação REAL do produto (a sidebar
  escura do protótipo é o navegador do mockup e não entra, como o próprio
  handoff avisa).
*/

/* ================= Chrome: header do produto ================= */
body.hje-v3 .v3-topo {
  height: var(--altura-header);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 28px;
  border-bottom: 2px solid var(--ink);
  background: var(--ground);
}
body.hje-v3 .v3-topo__marca { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
body.hje-v3 .v3-topo__titulo {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
body.hje-v3 .v3-topo__nav { display: flex; align-items: center; gap: 26px; }
body.hje-v3 .v3-topo__link {
  font-size: 14px; color: var(--texto-3); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
body.hje-v3 .v3-topo__link:hover { color: var(--ink); }
body.hje-v3 .v3-topo__link--ativo { color: var(--ink); border-bottom-color: var(--roxo); font-weight: 600; }
body.hje-v3 .v3-avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--ink); color: var(--ground);
  font-size: 13px; font-weight: 800; text-decoration: none;
}

/* ================= 01 — Home ================= */
body.hje-v3 .v3-home { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; }
body.hje-v3 .v3-home__esq {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: 30px 32px 0;
  border-right: 2px solid var(--ink);
  /* grade horizontal de 48px — textura de fundo da spec */
  background-image: linear-gradient(var(--linha-clara) 1px, transparent 1px);
  background-size: 100% 48px;
  overflow-y: auto;
}
body.hje-v3 .v3-home__h1 { margin: 12px 0 0; }
body.hje-v3 .v3-home__h1 .v3-palavra { display: inline-block; }
/* Generico de proposito: a regra estava presa a .v3-home__h1, e quando a
   home virou .v3-abre__h1 a palavra em destaque voltou a ser preta em
   silencio. Destaque e destaque em qualquer titulo. */
body.hje-v3 .v3-destaque { color: var(--roxo); }
body.hje-v3 .v3-home__regua { max-width: 560px; margin: 18px 0 16px; }
body.hje-v3 .v3-home__lead { max-width: 52ch; margin: 0 0 22px; }
body.hje-v3 .v3-home__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

/* Bloco "o que falta lançar" (no lugar do "próximas avaliações" da spec,
   que dependia de data de prova — dado que o sistema não guarda). */
body.hje-v3 .v3-pendencias { margin-top: auto; padding-bottom: 20px; }
body.hje-v3 .v3-pendencia {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--linha-clara);
  text-decoration: none;
}
body.hje-v3 .v3-pendencia:hover { background: var(--roxo-tint); }
body.hje-v3 .v3-pendencia__nome { font-size: 14px; font-weight: 600; color: var(--ink); }
body.hje-v3 .v3-pendencia__meta { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-pendencia__meta b { color: var(--ink); }

body.hje-v3 .v3-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  margin-top: 4px;
}
body.hje-v3 .v3-kpi-cel { padding: 18px 16px 22px; border-left: 1px solid var(--linha-clara); }
body.hje-v3 .v3-kpi-cel:first-child { border-left: 0; padding-left: 0; }
body.hje-v3 .v3-kpi-cel .v3-eyebrow { margin-top: 4px; display: block; }

/* --- coluna direita: retomar --- */
body.hje-v3 .v3-home__dir {
  background: var(--surface);
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
body.hje-v3 .v3-retomar { padding: 20px 24px; border-bottom: 2px solid var(--ink); }
body.hje-v3 .v3-retomar__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.hje-v3 .v3-salvo { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--roxo); }
body.hje-v3 .v3-salvo__ponto { display: inline-block; width: 7px; height: 7px; background: var(--roxo); margin-right: 6px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes v3-pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  body.hje-v3 .v3-salvo__ponto { animation: v3-pulseDot 1.7s infinite; }
}
body.hje-v3 .v3-retomar__sem { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 8px 0 2px; }
body.hje-v3 .v3-retomar__curso { font-size: 13px; color: var(--texto-2); }

body.hje-v3 .v3-disciplinas { display: flex; flex-direction: column; }
body.hje-v3 .v3-disciplina {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 24px; border-bottom: 1px solid var(--linha-clara);
  text-decoration: none;
  transition: background var(--dur-estado) var(--ease), padding-left var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-disciplina:hover { background: var(--roxo-tint); padding-left: 30px; box-shadow: inset 3px 0 0 var(--roxo); }
body.hje-v3 .v3-disciplina__nome { font-size: 14px; color: var(--ink); }
body.hje-v3 .v3-disciplina__media { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-disciplina__barra { grid-column: 1 / -1; height: 4px; }

/* faixa inferior */
body.hje-v3 .v3-faixa {
  flex: 0 0 auto; height: 40px; background: var(--ink); color: var(--ground);
  display: flex; align-items: center; overflow: hidden;
}
body.hje-v3 .v3-faixa__conteudo {
  display: flex; gap: 42px; white-space: nowrap; padding-left: 42px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes v3-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  body.hje-v3 .v3-faixa__conteudo { animation: v3-marquee 26s linear infinite; }
}

/* ================= 02 — Meus semestres ================= */
body.hje-v3 .v3-sem { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 380px; }
body.hje-v3 .v3-sem__tabela { display: flex; flex-direction: column; min-height: 0; border-right: 2px solid var(--ink); overflow-y: auto; }

body.hje-v3 .v3-sem__head,
body.hje-v3 .v3-sem__linha {
  display: grid; grid-template-columns: 64px 1fr 170px 110px;
  gap: 16px; align-items: center; padding: 0 28px;
}
body.hje-v3 .v3-sem__head { flex: 0 0 auto; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-clara); }
body.hje-v3 .v3-sem__head span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--texto-2); }

body.hje-v3 .v3-sem__linha {
  flex: 1 1 0; min-height: 62px;
  border-bottom: 1px solid var(--linha-clara);
  text-decoration: none;
  transition: background var(--dur-estado) var(--ease), padding-left var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-sem__linha:hover { background: var(--roxo-tint); padding-left: 34px; box-shadow: inset 3px 0 0 var(--roxo); }
body.hje-v3 .v3-sem__linha--sel { background: var(--roxo-tint); }
body.hje-v3 .v3-sem__linha--sel .v3-sem__num { color: var(--roxo); }

body.hje-v3 .v3-sem__num { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-sem__sit { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--texto-3); }
body.hje-v3 .v3-ponto { width: 8px; height: 8px; flex: 0 0 auto; background: var(--linha-clara-3); }
body.hje-v3 .v3-ponto--fechado { background: var(--ok); }
body.hje-v3 .v3-ponto--andamento { background: var(--roxo); }
@media (prefers-reduced-motion: no-preference) {
  body.hje-v3 .v3-ponto--andamento { animation: v3-pulseDot 1.7s infinite; }
}
body.hje-v3 .v3-sem__prog { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.hje-v3 .v3-sem__prog .v3-barra { height: 8px; flex: 1; }
body.hje-v3 .v3-sem__prog span { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
body.hje-v3 .v3-sem__media { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; text-align: right; font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-sem__media--vazia { color: var(--linha-clara-3); }

/* painel escuro da direita */
body.hje-v3 .v3-sem__painel { background: var(--ink); color: var(--ground); padding: 24px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
body.hje-v3 .v3-sem__painel .v3-eyebrow { color: var(--rotulo-escuro); }
body.hje-v3 .v3-sem__painel-num { font-size: 76px; font-weight: 800; letter-spacing: -0.05em; line-height: .95; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-sem__painel-sit { font-size: 13px; color: var(--rotulo-escuro-2); margin-bottom: 20px; }
body.hje-v3 .v3-sem__lista { border-top: 1px solid var(--linha-escura); }
body.hje-v3 .v3-sem__item { padding: 11px 0; border-bottom: 1px solid var(--linha-escura-2); }
body.hje-v3 .v3-sem__item-topo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 7px; }
body.hje-v3 .v3-sem__item-nome { font-size: 13px; color: var(--ground); }
body.hje-v3 .v3-sem__item-media { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-sem__painel .v3-barra { background: var(--trilha-escura); height: 6px; }
body.hje-v3 .v3-sem__painel .v3-barra__fill--ok { background: var(--ok-claro); }
body.hje-v3 .v3-sem__painel .v3-barra__fill--alerta { background: var(--alerta-claro); }
body.hje-v3 .v3-sem__painel .v3-barra__fill--risco { background: var(--risco-claro); }
body.hje-v3 .v3-sem__painel-rodape { margin-top: auto; padding-top: 22px; }
body.hje-v3 .v3-sem__painel-rodape .v3-btn { width: 100%; }

/* ================= Mobile ================= */
@media (max-width: 900px) {
  body.hje-v3 .v3-topo { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }

  /* Com 6 itens no menu (entrou "Provas"), a nav quebrava em duas linhas e o
     header passava de 62px pra 99px no celular. Rolagem lateral na propria
     nav mantem todos os itens alcancaveis sem roubar altura da tela — e
     esconder item de navegacao no celular seria pior. */
  body.hje-v3 .v3-topo__nav {
    gap: 16px; font-size: 13px;
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.hje-v3 .v3-topo__nav::-webkit-scrollbar { display: none; }
  body.hje-v3 .v3-topo__link { white-space: nowrap; flex: 0 0 auto; }

  /* "HEALTHTECH JUNIOR EINSTEIN" ao lado do titulo quebrava em duas linhas e
     empurrava o cabecalho pra baixo. E redundante no celular: o titulo
     "Calculadora de Notas" ja identifica, e a marca aparece no rodape. */
  body.hje-v3 .v3-topo__marca .v3-eyebrow { display: none; }

  body.hje-v3 .v3-home,
  body.hje-v3 .v3-sem { grid-template-columns: 1fr; }
  body.hje-v3 .v3-home__esq,
  body.hje-v3 .v3-sem__tabela { border-right: 0; overflow: visible; padding: 22px 16px 0; }
  body.hje-v3 .v3-home__dir,
  body.hje-v3 .v3-sem__painel { overflow: visible; }
  body.hje-v3 .v3-sem__tabela { padding: 0; }

  /* mesma armadilha da tela 03: com altura automática, flex:1 colapsa */
  body.hje-v3 .v3-sem__linha { flex: none; grid-template-columns: 48px 1fr 88px; gap: 10px; padding: 0 16px; }
  body.hje-v3 .v3-sem__head { grid-template-columns: 48px 1fr 88px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  body.hje-v3 .v3-sem__prog,
  body.hje-v3 .v3-sem__head span:nth-child(3) { display: none; }

  body.hje-v3 .v3-kpis { grid-template-columns: repeat(2, 1fr); }
  body.hje-v3 .v3-kpi-cel:nth-child(3) { border-left: 0; padding-left: 0; }
  body.hje-v3 .v3-pendencias { margin-top: 24px; }
}

/* ================= Lista de disciplinas do semestre (tela existente) ================= */
/* O handoff nao desenha esta tela (a 02 cobre a escolha do semestre e a
   03 tem abas), mas a rota existe e fica no meio do fluxo: home -> aqui
   -> calculadora. Reaproveita o vocabulario de linha/barra das outras. */
body.hje-v3 .v3-lista-tela {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  max-width: 1000px; width: 100%; margin: 0 auto;
  padding: 0 28px; overflow-y: auto;
}
body.hje-v3 .v3-lista-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 30px 0 22px;
}
body.hje-v3 .v3-lista-cab .v3-titulo-painel { margin-top: 6px; }

body.hje-v3 .v3-lista-head,
body.hje-v3 .v3-lista-linha {
  display: grid; grid-template-columns: 1fr 240px 96px;
  gap: 20px; align-items: center;
}
body.hje-v3 .v3-lista-head {
  padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--linha-clara);
}
body.hje-v3 .v3-lista-head span {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--texto-2);
}

body.hje-v3 .v3-lista-linha {
  padding: 16px 0; border-bottom: 1px solid var(--linha-clara);
  text-decoration: none;
  transition: background var(--dur-estado) var(--ease), padding-left var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-lista-linha:hover {
  background: var(--roxo-tint); padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--roxo);
}
body.hje-v3 .v3-lista-nome { font-size: 15px; font-weight: 600; color: var(--ink); }
body.hje-v3 .v3-lista-prog { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.hje-v3 .v3-lista-prog .v3-barra { height: 8px; flex: 1; }
body.hje-v3 .v3-lista-detalhe { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
body.hje-v3 .v3-lista-media {
  font-size: 22px; font-weight: 800; letter-spacing: -0.04em;
  text-align: right; font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-lista-media--vazia { color: var(--linha-clara-3); }

/* ---------- barra de conferencia (so superadmin) ----------
   Deliberadamente diferente do resto da tela: quem esta olhando aqui NAO
   e o dono da conta, e confundir isso com a propria tela e como o defeito
   comecou. Fundo escuro, texto pequeno, sem parecer parte do fluxo. */
body.hje-v3 .v3-conferencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--ink); color: var(--ground);
  font-size: 12px;
}
body.hje-v3 .v3-conferencia__rot {
  font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px; color: var(--rotulo-escuro-2);
}
body.hje-v3 .v3-conferencia__turma {
  padding: 3px 10px; border: 1px solid var(--rotulo-escuro-3);
  color: var(--ground); text-decoration: none; font-weight: 700;
}
body.hje-v3 .v3-conferencia__turma:hover { border-color: var(--ground); }
body.hje-v3 .v3-conferencia__turma--ativa {
  background: var(--roxo-claro); border-color: var(--roxo-claro); color: var(--ink);
}
body.hje-v3 .v3-conferencia__nota { margin-left: auto; color: var(--rotulo-escuro-2); }

body.hje-v3 .v3-vazio { padding: 26px 0; color: var(--texto-2); max-width: 58ch; }
body.hje-v3 .v3-vazio a { color: var(--roxo); }

/* Segundo paragrafo logo abaixo de um .v3-vazio: encosta nele com uma
   regra de 2px em vez de abrir outro bloco de 26px de respiro. E uma
   ressalva sobre a frase de cima ("existe plano, mas nao pra sua turma"),
   nao um aviso independente. */
body.hje-v3 .v3-vazio--nota {
  padding: 14px 0 0;
  margin-top: 0;
  border-top: 2px solid var(--linha-clara);
  font-size: 13px;
  line-height: 1.5;
}
body.hje-v3 .v3-lista-pe { padding: 16px 0 30px; }

@media (max-width: 720px) {
  body.hje-v3 .v3-lista-tela { padding: 0 16px; overflow: visible; }
  body.hje-v3 .v3-lista-head,
  body.hje-v3 .v3-lista-linha { grid-template-columns: 1fr 72px; gap: 12px; }
  body.hje-v3 .v3-lista-prog,
  body.hje-v3 .v3-lista-head span:nth-child(2) { display: none; }
}

/* ================= Telas de formulário =================
   Perfil, criar matéria, envio de plano de ensino, excluir conta.
   Coluna única de 620px: formulário é leitura linear, não painel. */

/* Diferente das telas-painel, estas rolam: o formulário cresce com o
   conteúdo e travar em 100vh esconderia os botões de ação. */
body.hje-v3 .v3-tela--rolavel { height: auto; min-height: 100vh; overflow: visible; }

body.hje-v3 .v3-form-tela {
  width: 100%; max-width: 620px; margin: 0 auto;
  padding: 30px 28px 60px;
}
body.hje-v3 .v3-form-cab { padding-bottom: 26px; }
body.hje-v3 .v3-form-cab .v3-titulo-painel { margin-top: 6px; }
body.hje-v3 .v3-form-cab .v3-bloco__nota { margin-top: 14px; margin-bottom: 0; }

body.hje-v3 .v3-bloco {
  border-top: 2px solid var(--ink);
  padding: 20px 0 26px;
}
body.hje-v3 .v3-bloco--perigo { border-top-color: var(--risco); margin-top: 26px; }
body.hje-v3 .v3-bloco__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
body.hje-v3 .v3-bloco__titulo {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink);
}
body.hje-v3 .v3-bloco__cab .v3-bloco__titulo { margin-bottom: 0; }
body.hje-v3 .v3-bloco__nota {
  display: block; margin: 0 0 18px; max-width: 58ch; line-height: 1.55;
}
body.hje-v3 .v3-bloco__cab + .v3-bloco__nota { margin-top: 12px; }
body.hje-v3 .v3-bloco__nota a { color: var(--roxo); font-weight: 700; }

/* Selo de "alterações restantes": bloco sólido, vira cinza quando acabou. */
body.hje-v3 .v3-selo {
  padding: 5px 9px; background: var(--roxo); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; white-space: nowrap;
}
body.hje-v3 .v3-selo--gasto { background: var(--linha-clara-3); color: var(--texto-3); }

body.hje-v3 .v3-form-acoes {
  display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px;
}
body.hje-v3 .v3-form .v3-form-acoes { padding-top: 22px; }

body.hje-v3 .v3-btn--perigo {
  background: var(--risco); color: #fff; border-color: var(--risco);
}
body.hje-v3 .v3-btn--perigo:hover { background: #8A1010; border-color: #8A1010; }

/* Mensagens do Django (sucesso/erro), mesmo vocabulário do login. */
body.hje-v3 .v3-msgs { margin-bottom: 24px; }
body.hje-v3 .v3-msg {
  margin: 0 0 8px; padding: 11px 13px;
  font-size: 13px; font-weight: 700; line-height: 1.45; color: #fff;
}
body.hje-v3 .v3-msg--ok { background: var(--ok); }
body.hje-v3 .v3-msg--erro { background: var(--risco); }

/* Campo desativado precisa PARECER desativado, senão a pessoa digita e
   perde o que escreveu ao salvar. */
body.hje-v3 .v3-input:disabled {
  background: var(--trilha-clara); color: var(--texto-2);
  border-color: var(--linha-clara); cursor: not-allowed;
}

@media (max-width: 720px) {
  body.hje-v3 .v3-form-tela { padding: 22px 16px 48px; }
  body.hje-v3 .v3-form-acoes .v3-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Campos que o v3-input sozinho nao cobre ---------- */
body.hje-v3 .v3-textarea {
  font-family: inherit; font-weight: 500; line-height: 1.5; resize: vertical;
  font-variant-numeric: normal;
}
/* O botao nativo de "escolher arquivo" nao aceita os tokens; o que da pra
   controlar e a moldura e o espaco em volta dele. */
body.hje-v3 .v3-input--arquivo {
  padding: 10px 12px; font-weight: 600; font-size: 14px; cursor: pointer;
}
body.hje-v3 .v3-input--arquivo::file-selector-button {
  margin-right: 12px; padding: 7px 12px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--ground);
  font: inherit; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; cursor: pointer;
}
body.hje-v3 .v3-input--arquivo::file-selector-button:hover { background: var(--roxo); border-color: var(--roxo); }

/* ---------- Lista "o que voce ja enviou" ---------- */
body.hje-v3 .v3-envios { list-style: none; margin: 0; padding: 0; }
body.hje-v3 .v3-envio {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--linha-clara);
}
body.hje-v3 .v3-envio__titulo { font-size: 14px; font-weight: 700; color: var(--ink); }
body.hje-v3 .v3-envio__meta {
  grid-column: 1; font-size: 12px; color: var(--texto-2);
  overflow-wrap: anywhere;
}
body.hje-v3 .v3-envio .v3-selo { grid-row: 1 / span 2; justify-self: end; }

/* ---------- Tela de aviso (403 CSRF) ---------- */
body.hje-v3 .v3-aviso { padding-top: 60px; }
body.hje-v3 .v3-aviso__regua { margin: 20px 0 24px; border-color: var(--risco); }
body.hje-v3 .v3-aviso__texto {
  margin: 0 0 14px; max-width: 56ch;
  font-size: 15px; line-height: 1.6; color: var(--texto-3);
}
body.hje-v3 .v3-aviso .v3-form-acoes { padding-top: 16px; }

body.hje-v3 .v3-eyebrow--risco { color: var(--risco); }

/* ================= Painel de coordenacao (equipe) ================= */
body.hje-v3 .v3-painel-tela {
  width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 28px 60px;
}
body.hje-v3 .v3-painel-totais { display: flex; gap: 32px; }
body.hje-v3 .v3-total { display: flex; flex-direction: column; gap: 2px; }
body.hje-v3 .v3-total__num {
  font-size: 30px; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* O aviso de privacidade e a regra que rege a tela inteira, entao ele
   fica em bloco solido no topo — nao como notinha de rodape. */
body.hje-v3 .v3-nota-privacidade {
  margin: 0 0 34px; padding: 16px 18px;
  background: var(--ink); color: var(--ground);
  font-size: 13px; line-height: 1.6; max-width: 78ch;
}
body.hje-v3 .v3-nota-privacidade strong { color: #fff; }

body.hje-v3 .v3-painel-curso { margin-bottom: 38px; }
body.hje-v3 .v3-painel-curso__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 6px; border-bottom: 2px solid var(--ink);
}
body.hje-v3 .v3-painel-curso__nome {
  margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink);
}
body.hje-v3 .v3-painel-curso__media {
  font-size: 26px; font-weight: 900; letter-spacing: -0.03em;
  color: var(--roxo); font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-painel-curso__media--vazia { color: var(--linha-clara-3); }
body.hje-v3 .v3-painel-curso__sub { display: block; margin: 8px 0 14px; }

body.hje-v3 .v3-tabela-wrap { overflow-x: auto; }
body.hje-v3 .v3-tabela { width: 100%; border-collapse: collapse; }
body.hje-v3 .v3-tabela th {
  padding: 9px 12px 9px 0; text-align: left;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--texto-2);
  border-bottom: 1px solid var(--linha-clara);
}
body.hje-v3 .v3-tabela td {
  padding: 11px 12px 11px 0;
  font-size: 14px; color: var(--texto-3);
  border-bottom: 1px solid var(--linha-clara);
}
body.hje-v3 .v3-tabela tbody tr:hover { background: var(--roxo-tint); }
body.hje-v3 .v3-tabela__turma { font-weight: 800; color: var(--ink); }
/* Precisa do th/td no seletor: "body.hje-v3 .v3-tabela th" tem mais
   seletores de tipo e ganhava do text-align:right, deixando o cabecalho
   a esquerda e os numeros a direita. */
body.hje-v3 .v3-tabela th.v3-num-col,
body.hje-v3 .v3-tabela td.v3-num-col {
  text-align: right; font-variant-numeric: tabular-nums;
  padding-right: 0;
}
body.hje-v3 .v3-tabela__media { font-size: 15px; color: var(--ink); }
body.hje-v3 .v3-tabela__insuficiente { font-size: 12px; color: var(--texto-2); }

body.hje-v3 .v3-painel-rodape { display: block; padding-top: 8px; }

@media (max-width: 720px) {
  body.hje-v3 .v3-painel-tela { padding: 0 16px 48px; }
  body.hje-v3 .v3-painel-totais { gap: 22px; }
  body.hje-v3 .v3-total__num { font-size: 24px; }
}

/* ---------- Dispensa / suspensão de matéria ---------- */
body.hje-v3 .v3-dispensa {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 18px; padding: 15px 17px;
  background: var(--surface);
  border-left: 4px solid var(--linha-clara-3);
}
body.hje-v3 .v3-dispensa--ativa { border-left-color: var(--alerta); }
body.hje-v3 .v3-dispensa__texto { min-width: 0; flex: 1 1 260px; }
body.hje-v3 .v3-dispensa__nota {
  margin: 6px 0 0; max-width: 52ch;
  font-size: 13px; line-height: 1.5; color: var(--texto-2);
}
body.hje-v3 .v3-dispensa__form {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
body.hje-v3 .v3-dispensa__form .v3-input { min-width: 210px; }
body.hje-v3 .v3-eyebrow--alerta { color: var(--alerta); }

/* Suspensa na lista do semestre: o nome fica riscado e apagado, mas a
   linha continua clicável — é por ela que a pessoa reativa. */
body.hje-v3 .v3-lista-linha--suspensa .v3-lista-nome {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--texto-2);
}
body.hje-v3 .v3-lista-linha--suspensa .v3-lista-detalhe { color: var(--alerta); font-weight: 700; }

/* ---------- Passo a passo + prompt (envio de plano de ensino) ---------- */
body.hje-v3 .v3-passos { list-style: none; margin: 0 0 24px; padding: 0; }
body.hje-v3 .v3-passo {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha-clara);
}
body.hje-v3 .v3-passo:first-child { border-top: 1px solid var(--linha-clara); }
body.hje-v3 .v3-passo__num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--ink); color: var(--ground);
  font-size: 13px; font-weight: 800;
}
body.hje-v3 .v3-passo__corpo { min-width: 0; }
body.hje-v3 .v3-passo__titulo {
  margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--ink);
}
body.hje-v3 .v3-passo .v3-aux { display: block; max-width: 60ch; line-height: 1.5; }

body.hje-v3 .v3-prompt { border: 2px solid var(--ink); background: var(--surface); }
body.hje-v3 .v3-prompt__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 13px;
  border-bottom: 2px solid var(--ink);
  background: var(--ground);
}
/* O prompt e longo de proposito (e um contrato com o parser), entao a
   caixa rola em vez de empurrar o formulario pra fora da tela. */
body.hje-v3 .v3-prompt__texto {
  margin: 0; padding: 14px;
  max-height: 260px; overflow: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--texto-3);
  white-space: pre-wrap; word-break: break-word;
}
body.hje-v3 .v3-btn--mini { padding: 6px 10px; font-size: 10px; }
body.hje-v3 .v3-textarea--alta { min-height: 190px; font-size: 13px; }

/* Dobra dentro de painel escuro: a regua e o texto invertem. */
body.hje-v3 .v3-dobra--escura { border-top-color: var(--linha-escura); margin-top: 4px; }
body.hje-v3 .v3-dobra--escura .v3-dobra__botao { color: var(--ground); }
body.hje-v3 .v3-dobra--escura .v3-dobra__aux { color: var(--rotulo-escuro); }
body.hje-v3 .v3-dobra--escura .v3-dobra__botao:hover .v3-dobra__titulo { color: var(--roxo-claro); }
body.hje-v3 .v3-dobra--escura .v3-dobra__botao:focus-visible { outline-color: var(--roxo-claro); }
/* O painel e coluna flex com altura limitada; a dobra precisa poder crescer
   e a lista rolar dentro dela, senao abrir empurra o botao do rodape pra
   fora da tela. */
body.hje-v3 .v3-sem__painel .v3-dobra { min-height: 0; }
body.hje-v3 .v3-sem__painel .v3-dobra__area > * { overflow-y: auto; }

/* Mensagens do Django, logo abaixo do header — vivem no v3_chrome.html pra
   aparecerem na tela onde foram disparadas, e nao empilhadas na proxima que
   por acaso renderizasse o bloco. */
body.hje-v3 .v3-msgs--topo {
  width: 100%; max-width: 1060px;
  margin: 16px auto 0; padding: 0 28px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  body.hje-v3 .v3-msgs--topo { padding: 0 16px; margin-top: 12px; }
}

/* O item do painel so aparece pra superusuario; a cor roxa deixa claro que
   e area de equipe, nao navegacao de aluno. */
body.hje-v3 .v3-topo__link--admin { color: var(--roxo); font-weight: 700; }

/* Botao de contorno sobre painel escuro (o outline normal some no preto). */
body.hje-v3 .v3-btn--outline-claro {
  background: none; color: var(--ground); border: 2px solid var(--rotulo-escuro-3);
}
body.hje-v3 .v3-btn--outline-claro:hover { border-color: var(--ground); color: #fff; }


/* ==================== Janela (modal) ====================
   Compartilhada por materia_v3 (peso errado / ja cursou / nao cursa) e
   pelo painel de grade em meus_semestres. Vive aqui, e nao em
   v3-calculadora.css, porque telas fora da calculadora tambem abrem
   janela — e uma delas nao carrega aquele arquivo. */
body.hje-v3 .v3-modal {
  position: fixed; inset: 0; z-index: 120;
  display: 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 .v3-modal[hidden] { display: none; }
body.hje-v3 .v3-modal__caixa {
  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  padding: 26px 28px 28px; background: var(--surface);
  border-top: 6px solid var(--roxo);
  animation: v3-riseIn 240ms var(--ease) both;
}
body.hje-v3 .v3-modal__caixa:focus { outline: none; }
body.hje-v3 .v3-modal__topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
body.hje-v3 .v3-modal__titulo {
  margin: 0 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink);
}
body.hje-v3 .v3-modal__fechar {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--texto-2); padding: 0 2px;
}
body.hje-v3 .v3-modal__fechar:hover { color: var(--risco); }
body.hje-v3 .v3-modal__nota { display: block; margin: 0 0 18px; line-height: 1.55; }
body.hje-v3 .v3-modal__resultado {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin: 20px 0 18px; padding-top: 14px;
  border-top: 2px solid var(--ink);
}
body.hje-v3 .v3-modal__num {
  font-size: 34px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--roxo); font-variant-numeric: tabular-nums;
}
/* A conta aberta, logo abaixo do resultado: sobe encostada nele (o
   .v3-modal__resultado ja deixa 18px embaixo) porque e a explicacao
   daquele numero, nao um bloco novo. */
body.hje-v3 .v3-modal__conta {
  display: block; margin: -12px 0 18px;
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  body.hje-v3 .v3-modal, body.hje-v3 .v3-modal__caixa { animation: none; }
}


/* ==================== Painel de reordenacao de grade ====================
   Colunas = semestres. A metafora e espacial de proposito: a pergunta que a
   pessoa esta respondendo e "em que semestre isto cai", e uma coluna por
   semestre deixa a resposta visivel sem ler nada. */

body.hje-v3 .v3-modal__caixa--painel { max-width: 980px; }

body.hje-v3 .v3-grade-colunas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 2px;
  margin: 18px 0 4px;
  padding-bottom: 10px;
  /* Curso de 12 semestres nao cabe em tela nenhuma: rola dentro do proprio
     container, nunca empurrando a pagina de lado.
     O teto de altura existe pelo mesmo motivo na vertical: com 56 materias
     as colunas empurravam o resumo e o botao de enviar pra fora da janela —
     e o resumo e justamente o que a pessoa precisa ler antes de afirmar. */
  overflow: auto;
  max-height: 42vh;
  background: var(--ink);
}

body.hje-v3 .v3-grade-col {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 10px 8px 8px;
  background: var(--surface);
}

body.hje-v3 .v3-grade-col--alvo {
  background: var(--roxo-tint);
  outline: 2px solid var(--roxo);
  outline-offset: -2px;
}

body.hje-v3 .v3-grade-col__titulo {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 900; letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

body.hje-v3 .v3-grade-col__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}

body.hje-v3 .v3-grade-col__vazio {
  margin: 8px 0 0;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-2);
  opacity: 0;
}
body.hje-v3 .v3-grade-col--alvo .v3-grade-col__vazio { opacity: 1; }

body.hje-v3 .v3-grade-item {
  padding: 8px;
  background: var(--ground);
  border-left: 3px solid var(--ink);
  cursor: grab;
}
body.hje-v3 .v3-grade-item:active { cursor: grabbing; }

body.hje-v3 .v3-grade-item--arrastando { opacity: 0.4; }

/* Ja movida: e o unico estado que a pessoa precisa distinguir de relance
   quando olha o painel inteiro. */
body.hje-v3 .v3-grade-item--movida {
  border-left-color: var(--roxo);
  background: var(--roxo-tint);
}

body.hje-v3 .v3-grade-item__nome {
  display: block;
  font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--ink);
}

body.hje-v3 .v3-grade-item__mover {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px;
}
/* O rotulo repetido 56 vezes vira ruido: no computador o caminho e
   arrastar, e o seletor fica como alternativa silenciosa. No celular, onde
   ele e o UNICO caminho, o rotulo volta (ver a media query no fim). */
body.hje-v3 .v3-grade-item__mover .v3-eyebrow {
  font-size: 9px;
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.hje-v3 .v3-grade-item__mover { justify-content: flex-end; }

body.hje-v3 .v3-grade-item__select {
  font: inherit; font-size: 12px;
  padding: 2px 4px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

/* ---------- resumo do diff ---------- */
body.hje-v3 .v3-grade-resumo { margin: 8px 0 18px; }
body.hje-v3 .v3-grade-resumo__lista {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
body.hje-v3 .v3-grade-resumo__item {
  font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-grade-obs { margin-bottom: 16px; }

/* Botao desabilitado tem que PARECER desabilitado: cheio de cor, ele
   convida ao clique e o clique nao faz nada — a pessoa conclui que a tela
   esta quebrada, nao que ainda nao mudou nada. */
body.hje-v3 .v3-btn[disabled] {
  background: var(--ground);
  color: var(--texto-2);
  border-color: var(--texto-2);
  cursor: not-allowed;
}
body.hje-v3 .v3-btn[disabled]:hover {
  background: var(--ground);
  color: var(--texto-2);
}

/* A acao gruda no rodape da janela. Sem isto o "Enviar pedido" ficava
   cortado pela borda em telas mais baixas — e um CTA pela metade parece
   desabilitado. Teto de altura nas colunas sozinho nao resolve, porque
   depende da altura da tela de quem esta olhando. */
body.hje-v3 .v3-modal__caixa--painel .v3-form-acoes {
  position: sticky; bottom: -28px; z-index: 2;
  margin: 0; padding: 14px 0 4px;
  background: var(--surface);
  border-top: 2px solid var(--ink);
}

/* ---------- chamada e pedidos na tela de semestres ---------- */
body.hje-v3 .v3-grade-aviso { margin: 22px 0 18px; }
body.hje-v3 .v3-grade-aviso .v3-regua { margin-bottom: 14px; }
body.hje-v3 .v3-grade-aviso__texto {
  margin: 4px 0 14px; font-size: 14px; line-height: 1.55; max-width: 62ch;
}

/* Este card vive DENTRO do painel escuro, que define color: var(--ground).
   Sem pintar a cor explicitamente o texto herdava o claro do painel e
   sumia em cima do fundo claro do card — a pergunta "Confere?" ficava
   invisivel e so os botoes apareciam. Cor de texto nunca pode vir so do
   contexto quando o fundo muda junto. */
body.hje-v3 .v3-grade-pedido {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--roxo-tint);
  color: var(--ink);
  border-left: 3px solid var(--roxo);
}
body.hje-v3 .v3-grade-pedido__texto {
  margin: 0 0 10px; font-size: 14px; line-height: 1.5;
  color: var(--ink);
}
body.hje-v3 .v3-grade-pedido .v3-aux { color: var(--texto-2); }

/* O roxo da marca sobre a tinta escura nao tem contraste: no painel escuro
   o eyebrow usa a variante clara, que existe pra isso. */
body.hje-v3 .v3-sem__painel .v3-grade-aviso .v3-eyebrow--roxo { color: var(--roxo-claro); }
body.hje-v3 .v3-grade-pedido__acoes {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}

@media (max-width: 700px) {
  /* No celular arrastar nao existe: as colunas viram uma pilha e quem manda
     e o seletor de cada materia. Mesmo estado, outro caminho. */
  body.hje-v3 .v3-grade-colunas {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
  }
  body.hje-v3 .v3-grade-col { min-height: 0; }
  body.hje-v3 .v3-grade-item { cursor: default; }
  body.hje-v3 .v3-grade-col__vazio { display: none; }
  body.hje-v3 .v3-grade-colunas { max-height: none; }
  /* Aqui o seletor e o unico caminho, entao ele volta a ser rotulado. */
  body.hje-v3 .v3-grade-item__mover {
    justify-content: flex-start;
  }
  body.hje-v3 .v3-grade-item__mover .v3-eyebrow {
    position: static; width: auto; height: auto;
    overflow: visible; clip-path: none;
  }
}


/* ==================== Chamada da grade (painel escuro) ====================
   O problema nao era falta de enfase, era excesso: quatro botoes do mesmo
   peso empilhados, e a chamada da grade sumia por PARECER igual as outras.

   A solucao e forma, nao volume. Isto nao e um botao — e uma pergunta com
   rotulo, trilho roxo e acao propria. Como e o unico elemento com essa forma
   na tela, o olho para nele sem que ele precise gritar. */

body.hje-v3 .v3-chamada-grade {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ground);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--roxo-claro);
  /* Regua completa em volta, discreta: da corpo sem competir com o CTA. */
  box-shadow: inset 0 0 0 1px rgba(243, 242, 242, 0.16);
}

body.hje-v3 .v3-chamada-grade:hover,
body.hje-v3 .v3-chamada-grade:focus-visible {
  background: rgba(106, 85, 200, 0.16);
  box-shadow: inset 0 0 0 1px var(--roxo-claro);
}

body.hje-v3 .v3-chamada-grade__rotulo {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--roxo-claro);
  margin-bottom: 5px;
}

body.hje-v3 .v3-chamada-grade__pergunta {
  display: block;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ground);
}

body.hje-v3 .v3-chamada-grade__acao {
  display: block;
  margin-top: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--roxo-claro);
}

/* ---------- os dois PDFs, no peso de link ----------
   Baixa-se uma vez por semestre. Como botao de largura inteira, ocupavam
   dois blocos e roubavam a atencao de tudo o que importa mais. */
body.hje-v3 .v3-downloads {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rotulo-escuro);
}
body.hje-v3 .v3-downloads a {
  color: var(--ground);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rotulo-escuro);
}
body.hje-v3 .v3-downloads a:hover { text-decoration-color: var(--roxo-claro); }
body.hje-v3 .v3-downloads__sep { margin: 0 6px; color: var(--rotulo-escuro); }

@media (max-width: 700px) {
  body.hje-v3 .v3-downloads a { display: inline-block; }
}

/* ==================== Caixa de marcar ====================
   Alvo grande de propósito: a etiqueta inteira alterna a caixa, porque no
   celular acertar um quadrado de 13px é como não ter a opção. */
body.hje-v3 .v3-caixa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}

body.hje-v3 .v3-caixa input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--roxo);
  cursor: pointer;
}

body.hje-v3 .v3-caixa__texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}

body.hje-v3 .v3-caixa:hover .v3-caixa__texto strong { color: var(--roxo); }