/*
  Tela 03 — Calculadora (redesign Modernist).
  Spec: docs/redesign-modernist/HANDOFF.md, seção "03 — Calculadora de notas".

  Regra estrutural da spec: uma tela, sem rolagem. Aqui isso é feito com
  100vh + grid (não com a prancha escalada de 1440x900 do protótipo — o
  próprio handoff diz que a prancha existe só pro mockup e que no produto
  o certo é layout fluido).
*/

body.hje-v3 .v3-tela {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Header interno de 62px ---------- */
body.hje-v3 .v3-header {
  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-header__esq { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
body.hje-v3 .v3-header__materia { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }

/* Abas de disciplina do semestre */
body.hje-v3 .v3-abas { display: flex; gap: 8px; overflow-x: auto; }
body.hje-v3 .v3-aba {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  border: 2px solid var(--linha-clara-3);
  color: var(--texto-3);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-estado) var(--ease), color var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-aba:hover { border-color: var(--ink); }
body.hje-v3 .v3-aba--ativa { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* ---------- Corpo: tabela + painel de resultado ---------- */
body.hje-v3 .v3-corpo-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
}

/* --- Esquerda: tabela de avaliações --- */
body.hje-v3 .v3-tabela { display: flex; flex-direction: column; min-height: 0; border-right: 2px solid var(--ink); }

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

body.hje-v3 .v3-linhas { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

/* flex:1 1 0 (não altura fixa) é o que faz as linhas preencherem a altura */
body.hje-v3 .v3-linha {
  flex: 1 1 0;
  min-height: 58px;
  border-bottom: 1px solid var(--linha-clara);
  transition: background var(--dur-estado) var(--ease),
              padding-left var(--dur-estado) var(--ease),
              box-shadow var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-linha:hover {
  background: var(--roxo-tint);
  padding-left: 37px;
  box-shadow: inset 3px 0 0 var(--roxo);
}
body.hje-v3 .v3-linha__nome { font-size: 14px; font-weight: 600; color: var(--ink); }
body.hje-v3 .v3-linha__peso { font-size: 14px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

body.hje-v3 .v3-linha__nota { width: 74px; height: 34px; text-align: center; }

body.hje-v3 .v3-contrib { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.hje-v3 .v3-contrib__barra { height: 8px; flex: 1; max-width: 180px; }
body.hje-v3 .v3-contrib__valor { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

body.hje-v3 .v3-tabela__pe {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 30px;
  border-top: 2px solid var(--ink);
  font-size: 12px; color: var(--texto-2);
}

/* --- Direita: painel escuro de resultado --- */
body.hje-v3 .v3-painel {
  background: var(--ink);
  color: var(--ground);
  display: flex; flex-direction: column; min-height: 0;
  padding: 22px 24px;
  overflow-y: auto;
}
body.hje-v3 .v3-painel .v3-eyebrow { color: var(--rotulo-escuro); }

body.hje-v3 .v3-necessaria { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 10px; }
body.hje-v3 .v3-necessaria__num { color: var(--ground); }
body.hje-v3 .v3-necessaria__sufixo { font-size: 13px; line-height: 1.25; color: var(--rotulo-escuro-2); padding-bottom: 10px; }

body.hje-v3 .v3-explica { font-size: 13px; line-height: 1.45; color: var(--rotulo-escuro-2); margin: 0 0 18px; }

body.hje-v3 .v3-pontos { border-top: 1px solid var(--linha-escura); padding-top: 16px; }
body.hje-v3 .v3-pontos__topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
body.hje-v3 .v3-pontos__valor { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Barra da media com DUAS marcas: o corte oficial (fixo em 70%) e a meta
   pessoal, que o aluno arrasta. A trilha ganhou altura porque virou um
   controle — 14px era alvo de toque pequeno demais pro polegar. */
body.hje-v3 .v3-corte {
  position: relative; height: 20px; background: var(--trilha-escura);
  cursor: ew-resize; touch-action: none;
}
body.hje-v3 .v3-corte__fill { height: 100%; background: var(--roxo-claro); transition: width 300ms var(--ease); }

/* O corte de aprovacao. Nao se move, e por isso e discreto: tracejado, sem
   pegador. Quem manda no aprovado/reprovado e ele, nao a meta. */
body.hje-v3 .v3-corte__oficial {
  position: absolute; top: 0; bottom: 0; left: 70%; width: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--ground) 0 3px, transparent 3px 6px);
  opacity: 0.55; pointer-events: none;
}

/* A meta. Solida e com pegador, porque e a que se move. */
body.hje-v3 .v3-corte__marca {
  position: absolute; top: -3px; bottom: -3px; left: 70%; width: 2px;
  background: var(--ground);
  cursor: grab; touch-action: none;
}
body.hje-v3 .v3-corte__marca::after {
  /* Alvo de toque de 28px em volta de um risco de 2px. Sem isto, acertar a
     meta no celular seria sorte. */
  content: ''; position: absolute; top: -6px; bottom: -6px; left: -13px; right: -13px;
}
body.hje-v3 .v3-corte__marca::before {
  /* Pegador: um quadrado no topo do risco, que e o que diz "isto se
     arrasta". Radius 0, como o resto do sistema. */
  content: ''; position: absolute; top: -5px; left: -4px;
  width: 10px; height: 6px; background: var(--ground);
}
body.hje-v3 .v3-corte__marca:active { cursor: grabbing; }
body.hje-v3 .v3-corte__marca:focus-visible { outline: 2px solid var(--ground); outline-offset: 4px; }
body.hje-v3 .v3-corte__marca--movida,
body.hje-v3 .v3-corte__marca--movida::before { background: var(--roxo-claro); }

body.hje-v3 .v3-corte__escala { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--rotulo-escuro-3); }
body.hje-v3 .v3-corte__dica { letter-spacing: 0.04em; text-transform: uppercase; }

body.hje-v3 .v3-metricas { margin-top: 20px; border-top: 1px solid var(--linha-escura); }
body.hje-v3 .v3-metrica {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha-escura-2);
}
body.hje-v3 .v3-metrica__rot { font-size: 13px; color: var(--rotulo-escuro-2); }
body.hje-v3 .v3-metrica__val { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

body.hje-v3 .v3-painel__rodape { margin-top: auto; padding-top: 20px; }
body.hje-v3 .v3-chip {
  display: inline-block; padding: 6px 12px; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--roxo-claro); color: var(--ground);
}
body.hje-v3 .v3-chip--ok { background: var(--ok-claro); color: var(--ink); }
body.hje-v3 .v3-chip--risco { background: var(--risco-claro); color: var(--ink); }
body.hje-v3 .v3-painel__rodape .v3-btn { width: 100%; }

/* ---------- Mobile: empilha mantendo o resultado visível ---------- */
/* A spec é explícita: abaixo do alvo desktop, empilhar as duas colunas
   MANTENDO o painel de resultado sempre visível — ele é o valor da tela. */
@media (max-width: 900px) {
  body.hje-v3 .v3-tela { height: auto; min-height: 100vh; }
  body.hje-v3 .v3-corpo-grid { grid-template-columns: 1fr; }

  /* No desktop a lista rola DENTRO de uma altura fixa (flex:1 + overflow).
     Com a tela em height:auto isso colapsava: flex:1 nao tinha o que
     dividir e o overflow cortava a lista na 3a avaliacao. No celular quem
     rola e a pagina, entao a lista volta a ter altura natural. */
  body.hje-v3 .v3-linhas { flex: none; overflow: visible; }
  body.hje-v3 .v3-linha { flex: none; }
  body.hje-v3 .v3-painel { overflow: visible; }
  body.hje-v3 .v3-painel { order: -1; }   /* resultado primeiro */
  body.hje-v3 .v3-tabela { border-right: 0; }
  body.hje-v3 .v3-linha { grid-template-columns: 1fr 60px 84px; gap: 10px; padding: 0 16px; min-height: 52px; }
  body.hje-v3 .v3-linha:hover { padding-left: 22px; }
  body.hje-v3 .v3-tabela__head { grid-template-columns: 1fr 60px 84px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  body.hje-v3 .v3-contrib { display: none; }        /* coluna que menos importa no celular */
  body.hje-v3 .v3-tabela__head span:last-child { display: none; }
  body.hje-v3 .v3-linha__nota { width: 100%; height: 44px; }  /* alvo de toque >= 44px */
  body.hje-v3 .v3-header { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; }
}

/* ---------- Nota: campo digitavel + slider ----------
   O campo continua sendo o que vale (e o que vai no POST). O slider e pra
   tatear a nota, e para de meio em meio: com passo de 0,01 eram mil
   posicoes, acertar a nota certa arrastando era sorte, e o controle nao
   servia pra nada. Os tracos da trilha mostram onde ele para. */
body.hje-v3 .v3-nota-campo {
  display: flex; flex-direction: column; gap: 0; min-width: 0;
}
body.hje-v3 .v3-nota-campo .v3-linha__nota { width: 100%; }

body.hje-v3 .v3-nota-slider {
  -webkit-appearance: none; appearance: none;
  /* Encostado no campo, mesma largura: lidos juntos viram um controle so,
     em vez de um campo com uma barra de progresso solta embaixo. */
  width: 100%; height: 8px; margin: 0;
  border: 2px solid var(--linha-clara-3); border-top: 0;
  /* Duas camadas: os tracos por cima, o preenchimento por baixo.
     Traco a cada 10% (nota cheia), e nao a cada 5% (o passo real de 0,5):
     21 riscos numa trilha de ~120px viram hachura, nao referencia. O
     polegar continua parando de meio em meio; os riscos so dizem onde
     ficam o 7, o 8, o 9. */
  background-image:
    repeating-linear-gradient(
      to right,
      var(--linha-clara-3) 0 1px, transparent 1px 10%),
    linear-gradient(
      to right,
      var(--roxo) 0, var(--roxo) var(--pct, 0%),
      var(--trilha-clara) var(--pct, 0%), var(--trilha-clara) 100%
    );
  cursor: pointer;
  /* radius 0 e a regra do sistema; o polegar tambem e quadrado. */
  border-radius: 0;
}
body.hje-v3 .v3-nota-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 18px;
  background: var(--ink); border: 0; border-radius: 0;
  cursor: grab;
}
body.hje-v3 .v3-nota-slider::-webkit-slider-thumb:active { cursor: grabbing; background: var(--roxo); }
body.hje-v3 .v3-nota-slider::-moz-range-thumb {
  width: 12px; height: 18px;
  background: var(--ink); border: 0; border-radius: 0;
  cursor: grab;
}
body.hje-v3 .v3-nota-slider::-moz-range-track { background: transparent; }
body.hje-v3 .v3-nota-slider:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; }

/* No celular o slider e o jeito bom de lancar nota (sem teclado numerico na
   frente da tela), entao ganha altura de alvo de toque. */
@media (max-width: 720px) {
  body.hje-v3 .v3-nota-slider { height: 10px; }
  body.hje-v3 .v3-nota-slider::-webkit-slider-thumb { width: 16px; height: 24px; }
  body.hje-v3 .v3-nota-slider::-moz-range-thumb { width: 16px; height: 24px; }
}

/* ==========================================================================
   Tela da matéria: passa a rolar
   Tentar caber tudo numa dobra espremia o "já cursou" e a dispensa contra o
   rodapé. Notas e painel continuam ocupando a primeira tela; o resto desce.
   ========================================================================== */
body.hje-v3 .v3-materia-tela { display: block; height: auto; overflow: visible; }
body.hje-v3 .v3-materia-tela .v3-corpo-grid {
  min-height: calc(100dvh - var(--altura-header) - 62px);
}
body.hje-v3 .v3-header__esq .v3-migalha {
  text-decoration: none; color: var(--texto-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-header__esq .v3-migalha:hover { color: var(--roxo); border-bottom-color: currentColor; }

/* ---------- pé: já cursou / não curso ---------- */
body.hje-v3 .v3-materia-pe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 2px solid var(--ink);
}
body.hje-v3 .v3-bloco-materia { padding: 26px 30px 32px; min-width: 0; }
body.hje-v3 .v3-bloco-materia + .v3-bloco-materia { border-left: 2px solid var(--ink); }
body.hje-v3 .v3-bloco-materia .v3-bloco__titulo { margin-bottom: 10px; }
body.hje-v3 .v3-historico { display: flex; flex-direction: column; gap: 8px; max-width: 220px; }
body.hje-v3 .v3-historico__campo { width: 100%; padding: 11px 12px; font-size: 18px; }
body.hje-v3 .v3-historico #historico-estado:empty { display: none; }

/* a dispensa perdeu o fundo de card ao sair da coluna esquerda */
body.hje-v3 .v3-materia-pe .v3-dispensa {
  background: none; border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  /* Sem isto o bloco herdava o space-between de quando era card na coluna
     esquerda, e o "Motivo" descia pro pe da secao, longe do texto. */
  justify-content: flex-start;
}
body.hje-v3 .v3-materia-pe .v3-dispensa__form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- modo manual ---------- */
body.hje-v3 .v3-manual { padding: 16px 30px 4px; border-top: 1px solid var(--linha-clara); }
body.hje-v3 .v3-manual__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
body.hje-v3 .v3-manual__dica { display: block; max-width: 62ch; line-height: 1.55; }
body.hje-v3 .v3-manual__dica strong { color: var(--ink); }
body.hje-v3 .v3-manual__aviso {
  margin: 12px 0 0; padding: 10px 12px;
  background: var(--alerta); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.4;
}

body.hje-v3 .v3-linha__nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.hje-v3 .v3-linha__nome-input { flex: 1; min-width: 0; padding: 7px 9px; font-size: 14px; font-weight: 600; }
body.hje-v3 .v3-linha__remover {
  appearance: none; border: 2px solid var(--linha-clara-3); background: none;
  width: 26px; height: 26px; flex: 0 0 auto; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--texto-2);
  transition: border-color var(--dur-estado) var(--ease), color var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-linha__remover:hover { border-color: var(--risco); color: var(--risco); }

/* ---------- gatilho de TBL ---------- */
body.hje-v3 .v3-tbl-gatilho {
  appearance: none; flex: 0 0 auto; cursor: pointer;
  padding: 3px 7px; border: 2px solid var(--roxo); background: none;
  font: inherit; font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--roxo);
  transition: background var(--dur-estado) var(--ease), color var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-tbl-gatilho:hover { background: var(--roxo); color: #fff; }

/* ---------- modal ---------- */
/* As regras do .v3-modal moram agora em v3-telas.css: a janela deixou de
   ser exclusiva da calculadora quando o painel de grade (meus semestres)
   passou a usar o mesmo padrao, e essa tela nao carrega este arquivo. */

@media (max-width: 900px) {
  body.hje-v3 .v3-materia-tela .v3-corpo-grid { min-height: 0; }
  body.hje-v3 .v3-materia-pe { grid-template-columns: 1fr; }
  body.hje-v3 .v3-bloco-materia { padding: 22px 16px 26px; }
  body.hje-v3 .v3-bloco-materia + .v3-bloco-materia {
    border-left: 0; border-top: 2px solid var(--ink);
  }
  body.hje-v3 .v3-manual { padding: 16px 16px 4px; }
}

/* Simular a nota necessária: fica acima do rodapé do painel, porque é a
   ação que segue naturalmente depois de ler o número grande. */
body.hje-v3 .v3-btn--simular { width: 100%; justify-content: center; margin-top: auto; font-size: 12px; }
body.hje-v3 .v3-btn--simular[hidden] { display: none; }
/* Nota simulada tem que se distinguir de nota real de relance — ela não é
   salva, e o aluno não pode confundir uma com a outra. */
body.hje-v3 .v3-linha__nota[data-simulado="1"] {
  border-style: dashed; color: var(--texto-2); font-style: italic;
}

/* ---------- botão de voltar ----------
   Era migalha de 10px: quem não conhece o site não reconhecia como saída. */
body.hje-v3 .v3-btn--voltar {
  padding: 7px 12px; font-size: 11px; gap: 7px;
  border: 2px solid var(--linha-clara-3); background: var(--surface); color: var(--ink);
  flex: 0 0 auto;
}
body.hje-v3 .v3-btn--voltar:hover { border-color: var(--roxo); color: var(--roxo); background: var(--roxo-tint); }
body.hje-v3 .v3-header__local { flex: 0 0 auto; }

/* ---------- campo de nota que é TBL ----------
   Readonly de propósito: a nota do TBL é composta (IRAT + GRAT + casos), e
   digitar um número solto ali seria palpite. O campo é o gatilho. */
body.hje-v3 .v3-nota-campo--tbl .v3-linha__nota {
  cursor: pointer;
  border-color: var(--roxo);
  background: var(--roxo-tint);
}
body.hje-v3 .v3-nota-campo--tbl .v3-linha__nota::placeholder {
  color: var(--roxo); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Sem slider no TBL: arrastar contradiz a composição do pop-up. */
body.hje-v3 .v3-nota-campo--tbl .v3-nota-slider { display: none; }

/* ---------- sinalizador de rolagem ---------- */
body.hje-v3 .v3-mais-abaixo {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; cursor: pointer;
  background: var(--ink); color: var(--ground); border: 0;
  font: inherit; font-size: 13px;
  box-shadow: 0 4px 18px rgba(32, 30, 29, 0.25);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
body.hje-v3 .v3-mais-abaixo:hover { background: var(--roxo); }
body.hje-v3 .v3-mais-abaixo:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 3px; }
body.hje-v3 .v3-mais-abaixo strong { color: #fff; }
body.hje-v3 .v3-mais-abaixo__seta {
  width: 2px; height: 14px; background: currentColor; flex: 0 0 auto;
  animation: v3-descer 1.8s var(--ease) infinite;
}
/* Some da árvore quando cumpre o papel — pointer-events pra não bloquear
   clique no que estiver embaixo durante o fade. */
body.hje-v3 .v3-mais-abaixo--oculto {
  opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.hje-v3 .v3-mais-abaixo__seta { animation: none; }
}
@media (max-width: 720px) {
  body.hje-v3 .v3-mais-abaixo { left: 16px; right: 16px; transform: none; justify-content: center; }
  body.hje-v3 .v3-mais-abaixo--oculto { transform: translateY(10px); }
}

/* ---------- correção de plano de ensino ----------
   Ocupa a largura toda do pé: é um formulário com uma linha por avaliação,
   e espremê-lo em meia coluna deixaria os campos ilegíveis. */
body.hje-v3 .v3-bloco-materia--larga { grid-column: 1 / -1; border-bottom: 2px solid var(--ink); }

body.hje-v3 .v3-correcao {
  padding: 14px 16px; margin-bottom: 18px;
  border-left: 4px solid var(--alerta); background: #FBF1E8;
}
body.hje-v3 .v3-correcao--minha { border-left-color: var(--ok); background: #EAF5EE; }
body.hje-v3 .v3-correcao .v3-eyebrow { display: block; margin-bottom: 6px; }
body.hje-v3 .v3-correcao__texto {
  margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--texto-3); max-width: 70ch;
}
body.hje-v3 .v3-correcao__lista {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
body.hje-v3 .v3-correcao__lista li {
  font-size: 13px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
body.hje-v3 .v3-correcao__lista strong { color: var(--ink); }
body.hje-v3 .v3-correcao__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

body.hje-v3 .v3-correcao-linhas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
body.hje-v3 .v3-correcao-linha {
  display: grid; grid-template-columns: 1fr 92px 30px; gap: 10px; align-items: center;
}
body.hje-v3 .v3-correcao-linha .v3-input { padding: 8px 10px; font-size: 14px; }
body.hje-v3 .v3-correcao-peso { font-variant-numeric: tabular-nums; }
body.hje-v3 .v3-correcao-pe {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
body.hje-v3 .v3-correcao-form .v3-campo { margin-bottom: 16px; max-width: 520px; }

@media (max-width: 900px) {
  body.hje-v3 .v3-correcao-linha { grid-template-columns: 1fr 78px 30px; gap: 8px; }
}

/* ---------- zero explícito ----------
   Ocupa o espaço vazio ao lado da contribuição. Vermelho porque é a única
   ação da linha que assume um resultado ruim de propósito — e porque
   precisa ser distinguível de um campo simplesmente vazio. */
body.hje-v3 .v3-contrib {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  /* align-items: stretch e obrigatorio aqui. A regra antiga desta classe usa
     `center`, e numa coluna flex isso encolhe os filhos ao conteudo — a barra
     de contribuicao (flex-basis 0) colapsava pra largura zero e sumia. */
  align-items: stretch;
}
body.hje-v3 .v3-contrib__barra-linha {
  display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%;
}
body.hje-v3 .v3-contrib__barra-linha .v3-contrib__barra { flex: 1 1 auto; min-width: 0; }

body.hje-v3 .v3-zerar {
  align-self: flex-start; cursor: pointer;
  padding: 3px 8px; border: 2px solid var(--linha-clara-3); background: none;
  font: inherit; font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2);
  transition: border-color var(--dur-estado) var(--ease),
              color var(--dur-estado) var(--ease),
              background var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-zerar:hover { border-color: var(--risco); color: var(--risco); }
body.hje-v3 .v3-zerar--ativo {
  background: var(--risco); border-color: var(--risco); color: #fff;
}
body.hje-v3 .v3-zerar:focus-visible { outline: 2px solid var(--risco); outline-offset: 2px; }

/* ---------- barra de ações (abre as janelas) ----------
   Substituiu os blocos do pé: eles ocupavam a tela inteira e ainda exigiam
   um sinalizador pra ninguém perder de vista. */
body.hje-v3 .v3-acoes-materia {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--ink);
}
body.hje-v3 .v3-acao-materia {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 16px 22px; text-align: left; font: inherit; min-width: 0;
  transition: background var(--dur-estado) var(--ease);
}
body.hje-v3 .v3-acao-materia + .v3-acao-materia { border-left: 1px solid var(--linha-clara); }
body.hje-v3 .v3-acao-materia:hover { background: var(--roxo-tint); }
body.hje-v3 .v3-acao-materia:focus-visible { outline: 2px solid var(--roxo); outline-offset: -2px; }
body.hje-v3 .v3-acao-materia__titulo {
  font-size: 14px; font-weight: 800; color: var(--ink);
}
body.hje-v3 .v3-acao-materia .v3-aux { line-height: 1.4; }
body.hje-v3 .v3-acao-materia .v3-selo { margin-top: 6px; }
body.hje-v3 .v3-selo--alerta { background: var(--alerta); color: #fff; }

/* Janela larga: o formulário de correção tem uma linha por avaliação. */
body.hje-v3 .v3-modal__caixa--larga { max-width: 560px; }

/* Aviso de irreversibilidade: precisa parar o olho antes do botão. */
body.hje-v3 .v3-correcao__aviso {
  margin: 12px 0; padding: 9px 12px;
  background: var(--ink); color: var(--ground);
  font-size: 12px; font-weight: 700; line-height: 1.45;
}

@media (max-width: 900px) {
  body.hje-v3 .v3-acoes-materia { grid-template-columns: 1fr; }
  body.hje-v3 .v3-acao-materia + .v3-acao-materia {
    border-left: 0; border-top: 1px solid var(--linha-clara);
  }
}