/* A resolução C.O.R.A. do aluno: o botão que a abre, as quatro abas e o
 * painel. Item F.4b, decisão 12.4, e emenda 12.5 de 10/09/2026.
 *
 * Desde a emenda 12.5 a referência é o `templates/cora.jsx` da skill
 * `metodo-cora`, e os valores abaixo são os dele: as abas sem caixa, o trilho
 * que avança, o painel com filete e sombra, a rubrica com o traço, o único
 * bloco tingido por painel, o número do passo pendurado na margem. O que NÃO
 * é dele: cor e fonte, que vêm de `tokens.css`, decisão 12.2. O acento do
 * método aqui é a cor da marca, petróleo, porque laranja é a ação sobre a
 * questão e petróleo é o conteúdo.
 *
 * Sem JavaScript nada se esconde: o `[data-js]` que o `abas-cora.js` põe no
 * componente é o que autoriza as regras de painel ativo e de passo revelado.
 */

.pv-cora { margin-top: 1.4rem; }
.pv-cora [hidden] { display: none !important; }

/* ── o botão que abre a resolução ─────────────────────────────────────────
 * "O que eles querem é resolução", ordem do autor em 05/09/2026: o título da
 * camada não é texto, é um botão, largura inteira e 48 px de toque. A seta é
 * a do `cora.jsx`, e gira quando a resolução está aberta. */
.pv-cora-abrir {
  cursor: pointer; list-style: none;
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 0 1.1rem; border-radius: 9px;
  border: 1px solid var(--brand);
  background: var(--brand); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px var(--sans);
  transition: background .18s ease;
}
.pv-cora-abrir::-webkit-details-marker { display: none; }
.pv-cora-abrir::marker { content: ""; }
.pv-cora-abrir:hover { background: var(--brand-2); border-color: var(--brand-2); }
.pv-cora-abrir:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.pv-cora-abrir-seta { font-size: 11px; transition: transform .22s ease; }
.pv-cora[open] > .pv-cora-abrir { margin-bottom: 1.2rem; }
.pv-cora[open] > .pv-cora-abrir .pv-cora-abrir-seta { transform: rotate(180deg); }
.pv-cora[data-travada] > .pv-cora-abrir {
  background: var(--chip); border-color: transparent;
  color: var(--text-3); cursor: not-allowed;
}
.pv-cora[data-travada] > .pv-cora-abrir .pv-cora-abrir-texto::after { content: " · responda antes"; font-weight: 400; }

.pv-cora-corpo { animation: pv-cora-abre .3s ease both; }
@keyframes pv-cora-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── as quatro abas e o trilho ──────────────────────────────────────────── */
.pv-cora-abas { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; }
.pv-cora-aba {
  background: none; border: none; cursor: pointer; padding: 6px 2px 12px;
  display: flex; justify-content: center; align-items: center;
  font: 600 clamp(9px, 2.6vw, 12px) var(--sans);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-3); transition: color .22s ease;
}
.pv-cora-aba:hover { color: var(--text-2); }
.pv-cora-aba:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.pv-cora-aba.is-ativa { color: var(--brand); }
.pv-cora-aba[data-visto="1"]:not(.is-ativa) { color: var(--text-2); }
.pv-cora-trilho { position: relative; height: 2px; background: var(--line-10); }
.pv-cora-trilho-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--largura, 25%);
  background: var(--brand);
  transition: width .38s cubic-bezier(.4, 0, .2, 1);
}

/* ── o painel ───────────────────────────────────────────────────────────── */
.pv-cora-paineis {
  background: var(--surface);
  border: 1px solid var(--line-10); border-top: none;
  border-radius: 0 0 8px 8px;
  padding: clamp(20px, 3.4vw, 36px);
  box-shadow: var(--shadow);
}
.pv-cora[data-js] .pv-cora-painel:not(.is-ativa) { display: none; }
/* sem JavaScript os quatro painéis ficam em fila, cada um com o seu verbo */
.pv-cora:not([data-js]) .pv-cora-painel + .pv-cora-painel {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-10);
}
.pv-cora-verbo { margin: 0 0 18px; font: italic 400 13.5px/1.5 var(--sans); color: var(--text-3); }

.pv-cora-secao {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 12px;
  font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}
.pv-cora-secao::after { content: ""; flex: 1; height: 1px; background: var(--line-10); }
.pv-cora-verbo + .pv-cora-secao, .pv-cora-aviso + .pv-cora-secao { margin-top: 0; }
.pv-cora-lab {
  font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}

.pv-cora-prosa { margin: 0 0 8px; font: 400 14px/1.65 var(--sans); color: var(--text); max-width: 36em; }
.pv-cora-def-c { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--text-2); }
.pv-cora-fonte { margin: 6px 0 0; font: 400 11.5px/1.5 var(--sans); color: var(--text-3); }
.pv-cora-legenda {
  margin: 6px 0 0; text-align: center;
  font: 400 11.5px/1.5 var(--sans); color: var(--text-2);
}

/* item de conceito, dica e critério: hierarquia sem tarja */
.pv-cora-def { margin: 0 0 16px; max-width: 36em; }
.pv-cora-def-t { margin: 0 0 3px; font: 600 13.5px/1.5 var(--sans); color: var(--text); }
.pv-cora-def-n {
  font: 500 11px var(--sans); color: var(--text-3); margin-right: 7px;
  font-variant-numeric: tabular-nums;
}
.pv-cora-def-formula { margin-top: 10px; }
.pv-cora-def-formula .pv-formula { display: block; }
/* O KaTeX põe 1em de margem em cima e embaixo da fórmula de bloco, e a 34 px
   do destaque isso eram 82 px de branco numa caixa de uma linha. O espaço da
   caixa é o do `bloco-formula.css`, e a margem do KaTeX sai. 12/09/2026. */
.pv-cora-def-formula .katex-display { margin: 0; }

/* único bloco tingido por painel */
.pv-cora-realce {
  background: var(--brand-tint); border-left: 2px solid var(--brand);
  padding: 14px 18px; max-width: 36em;
  font: 400 14px/1.65 var(--sans); color: var(--text);
}

/* o aviso de defeito da prova, o único bloco com cor de alerta em Compreender */
.pv-cora-aviso {
  margin: 0 0 18px; padding: 12px 14px;
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0;
  background: var(--amber-soft);
}
.pv-cora-aviso-titulo { margin: 0 0 6px; font: 600 13.5px/1.5 var(--sans); color: var(--text); }
.pv-cora-aviso-texto { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--text); }

/* a lista de par e valor: alternativas em figura, pressuposto, divergência */
.pv-cora-lista { margin: 0 0 8px; }
.pv-cora-lista > div { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 8px; }
.pv-cora-lista dt { font: 600 11.5px var(--sans); color: var(--text-2); }
.pv-cora-lista dd { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--text); }

/* ── Organizar ──────────────────────────────────────────────────────────── */
.pv-cora-esquema { display: flex; justify-content: center; padding: 8px 0 4px; }
.pv-cora-esquema svg { width: 100%; max-width: var(--esquema-largura, 440px); height: auto; }

.pv-cora-tab { width: 100%; border-collapse: collapse; max-width: 36em; }
.pv-cora-tab th {
  text-align: left; padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--line-16);
  font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
}
.pv-cora-tab td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-10);
  vertical-align: baseline; font: 400 14px/1.5 var(--sans); color: var(--text);
}
.pv-cora-tab tr:last-child td { border-bottom: none; }
.pv-cora-tab tr.is-superfluo td { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.pv-cora-nota-sup {
  display: inline-block; margin-left: 10px; white-space: nowrap; text-decoration: none;
  font: 600 10.5px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--warn);
}

.pv-cora-ol { margin: 0; padding-left: 1.3em; max-width: 36em; font: 400 14px/1.6 var(--sans); color: var(--text); }
.pv-cora-ol li { margin-bottom: 7px; padding-left: .3em; }
.pv-cora-ol li::marker { color: var(--text-3); font-size: .85em; }

/* ── Resolver: o número pendurado na margem, e a revelação ──────────────── */
.pv-cora-passos { max-width: 40em; }
.pv-cora-passo { display: flex; gap: 16px; margin-bottom: 22px; animation: pv-cora-abre .28s ease both; }
.pv-cora-passo-n {
  flex: 0 0 1.4em; text-align: right; padding-top: .3em;
  font: 500 12px var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.pv-cora-passo-c { flex: 1; min-width: 0; }
.pv-cora-passo-t { margin: 0 0 2px; font: 600 14px/1.5 var(--sans); color: var(--text); }

.pv-cora-formula {
  background: var(--surface-2); border-radius: 6px;
  padding: 14px 16px; margin: 10px 0 0; overflow-x: auto; overflow-y: hidden;
  text-align: center; font-family: var(--serif); font-size: 19px; color: var(--text);
}
.pv-cora-nota { margin-top: 12px; }
.pv-cora-formula .katex-display { margin: 0; }
/* o embrulho `q-mat-bloco` do renderizador também rola na horizontal; dois
   contêineres de rolagem aninhados desenhavam uma barra vertical dentro da
   fórmula. Aqui só a caixa de fora rola. */
.pv-cora-formula .q-mat-bloco { overflow: visible; margin: 0; }
.pv-cora-resposta .q-mat-bloco { overflow: visible; margin: 0; }
.pv-cora-minima + .pv-cora-minima { margin-top: 6px; }

.pv-cora-revelar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 6px 0 0 calc(1.4em + 16px);
}
.pv-cora-btn {
  cursor: pointer; padding: 9px 18px; border-radius: 6px;
  background: none; color: var(--brand);
  border: 1px solid var(--line-16);
  font: 500 13.5px var(--sans); letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  transition: background .18s ease, border-color .18s ease;
}
.pv-cora-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.pv-cora-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pv-cora-btn-seta { font-size: 10px; }
.pv-cora-dica-inline { font: italic 400 12.5px var(--sans); color: var(--text-3); }

.pv-cora-fim { animation: pv-cora-abre .3s ease both; }
.pv-cora-resposta {
  border-top: 2px solid var(--brand); border-bottom: 1px solid var(--line-10);
  padding: 20px 0; text-align: center; max-width: 36em;
  font-family: var(--serif); font-size: 21px; color: var(--text);
}
.pv-cora-resposta .katex-display { margin: 0; }
.pv-cora-resposta-alt {
  margin-top: 12px;
  font: 600 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}

/* ── Acelerar ───────────────────────────────────────────────────────────── */
.pv-cora-sematalho {
  color: var(--text-2); border-left: 2px solid var(--line-16);
  padding-left: 14px; margin: 0 0 12px;
}
.pv-cora-alerta {
  background: var(--warn-soft); border-left: 2px solid var(--warn);
  padding: 16px 18px; max-width: 36em;
}
.pv-cora-alerta-t { margin: 0 0 4px; font: 600 14px/1.5 var(--sans); color: var(--warn); }
.pv-cora-alerta-c { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--text); }
.pv-cora-quem-cai { margin: 0 0 8px; font: italic 400 13px/1.6 var(--sans); color: var(--text-2); }
.pv-cora-antidoto {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line-16);
  font: 400 13.5px/1.6 var(--sans); color: var(--text-2);
}
.pv-cora-antidoto .pv-cora-lab { color: var(--ok); margin-right: 8px; }
.pv-cora-extra { margin-top: 10px; max-width: 36em; font-size: 12.5px; }

/* ── o rodapé de anterior e próxima ─────────────────────────────────────── */
.pv-cora-rodape {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 0 4px;
}
.pv-cora-seta {
  background: none; border: none; cursor: pointer; padding: 10px 0; min-height: 44px;
  font: 500 12.5px var(--sans); letter-spacing: .04em; color: var(--text-3);
  transition: color .18s ease;
}
.pv-cora-seta:hover { color: var(--brand); }
.pv-cora-seta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pv-cora-seta-prox { color: var(--brand); margin-left: auto; }

/* ── os três blocos de Língua Portuguesa e a varredura ──────────────────── */
.pv-cora-marcas { margin: 0 0 4px; display: grid; gap: 10px; }
.pv-cora-marca { padding-left: 12px; border-left: 2px solid var(--line-14); }
.pv-cora-marca-rotulo { margin: 0 0 3px; font: 600 11.5px var(--sans); color: var(--text-2); }
.pv-cora-marca-linha {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--chip); color: var(--text-3);
  font: 500 10.5px var(--sans); letter-spacing: .02em;
}
.pv-cora-marca-trecho { margin: 0; font: 400 13.5px/1.6 var(--serif); color: var(--text); }

.pv-cora-varredura { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pv-cora-item {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-14);
}
.pv-cora-letra {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px var(--sans); background: var(--chip); color: var(--text-2);
}
.pv-cora-item[data-veredito="certa"] { border-color: var(--ok); }
.pv-cora-item[data-veredito="certa"] .pv-cora-letra { background: var(--ok); color: var(--brand-ink); }
.pv-cora-trecho { margin: 0 0 4px; font: 400 13.5px/1.6 var(--sans); color: var(--text); }
.pv-cora-razao { margin: 0; font: 400 12.5px/1.6 var(--sans); color: var(--text-2); }
.pv-cora-correcao { margin: 6px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--ok); }

@media (min-width: 1024px) {
  .pv-cora-aba { font-size: 12.5px; padding-bottom: 14px; }
  .pv-cora-paineis { padding: 36px 40px; border-radius: 0 0 9px 9px; }
  .pv-cora-lista > div { grid-template-columns: 8.5rem 1fr; gap: 10px; }
  .pv-cora-lista dt { padding-top: 2px; }
  .pv-cora-formula { font-size: 21px; }
}
@media (max-width: 480px) {
  .pv-cora-revelar { margin-left: 0; }
  .pv-cora-passo { gap: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-cora *, .pv-cora *::before, .pv-cora *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ── as iniciais no celular, proposta 3 do autor, 30/09/2026 ─────────────── */
/* Nas telas de estudo, `pv-cora--estudo`, o celular mostra só C, O, R e A, em
 * letra grande, e a linha de baixo diz o nome da etapa aberta. A largura de
 * um quarto da coluna não cabia "COMPREENDER" com letra legível. A home e a
 * curadoria não levam a classe e ficam como o protótipo. Aqui a consulta é
 * por largura máxima porque o desenho base é o do protótipo, e o celular de
 * estudo é a exceção. */
.pv-cora-aba-inicial, .pv-cora-etapa { display: none; }
@media (max-width: 639px) {
  .pv-cora--estudo .pv-cora-aba {
    min-height: 48px; padding: 4px 2px 8px;
    font: 700 20px var(--sans); letter-spacing: 0; text-transform: none;
    color: var(--text-2);
  }
  .pv-cora--estudo .pv-cora-aba.is-ativa { color: var(--brand); }
  .pv-cora--estudo .pv-cora-aba-inicial { display: inline; }
  .pv-cora--estudo .pv-cora-aba-nome { display: none; }
  .pv-cora--estudo .pv-cora-etapa {
    display: block; margin: 10px 0 0;
    font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand);
  }
  .pv-cora--estudo .pv-cora-etapa em {
    font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--text-2);
  }
}