/* Apuração: identidade "mesa de redação". Papel, tinta, carimbos e caneta vermelha de revisor. */

:root {
  --papel: #f3efe6;
  --papel-2: #ebe5d8;
  --papel-3: #e0d8c7;
  --tinta: #1c1a17;
  --tinta-2: #55504a;
  --tinta-3: #857e72;
  --regua: #cbc1ad;
  --vermelho: #b3311d;
  --vermelho-fundo: #f2dcd3;
  --verde: #2c6a45;
  --verde-fundo: #dbe7dc;
  --ocre: #9a600c;
  --ocre-fundo: #f1e3c6;
  --azul: #2d4c78;
  --azul-fundo: #dde3ee;
  --vende: #1c1a17;
  --sombra: rgba(28, 26, 23, 0.12);
  --f-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --largura: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #161513;
    --papel-2: #1f1d1a;
    --papel-3: #2a2722;
    --tinta: #ede6d9;
    --tinta-2: #b4ac9d;
    --tinta-3: #7f786c;
    --regua: #3b3731;
    --vermelho: #e2694f;
    --vermelho-fundo: #3a1f19;
    --verde: #62b386;
    --verde-fundo: #18291f;
    --ocre: #d89c3d;
    --ocre-fundo: #2f2513;
    --azul: #86a7d8;
    --azul-fundo: #1a2232;
    --vende: #ede6d9;
    --sombra: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 var(--f-ui);
  font-variation-settings: "wdth" 100;
  min-height: 100vh;
}
a { color: inherit; text-decoration-color: var(--vermelho); text-underline-offset: 3px; }
a:hover { color: var(--vermelho); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--vermelho); color: var(--papel); }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.carregando { padding: 40px 16px; font-family: var(--f-mono); color: var(--tinta-3); text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Cabeçalho ---------- */

.cabeca {
  border-bottom: 3px double var(--tinta);
  background: var(--papel);
  position: sticky; top: 0; z-index: 20;
}
.cabeca-in {
  max-width: var(--largura); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.marca {
  font: 700 28px/1 var(--f-titulo); letter-spacing: -0.02em; text-decoration: none;
  display: flex; align-items: baseline; gap: 10px;
}
.marca small {
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3);
}
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font: 600 13px/1 var(--f-ui); font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px; text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a.ativo { border-bottom-color: var(--vermelho); }

main.pagina { max-width: var(--largura); margin: 0 auto; padding: 28px 16px 120px; }

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

.kicker {
  font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3);
  margin: 0 0 8px;
}
.manchete {
  font: 650 clamp(30px, 5vw, 52px)/1.03 var(--f-titulo); letter-spacing: -0.02em; margin: 0 0 12px;
  font-variation-settings: "opsz" 72; text-wrap: balance;
}
.manchete em { font-style: italic; font-weight: 450; color: var(--vermelho); }
.linha-fina { font: 400 20px/1.45 var(--f-titulo); color: var(--tinta-2); margin: 0 0 20px; max-width: 760px; text-wrap: pretty; }
h2.secao {
  font: 650 26px/1.15 var(--f-titulo); letter-spacing: -0.01em; margin: 48px 0 6px;
  padding-top: 14px; border-top: 2px solid var(--tinta); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
h2.secao .kicker { margin: 0; }
.secao-sub { color: var(--tinta-2); margin: 0 0 18px; max-width: 760px; }
h3 { font: 600 19px/1.25 var(--f-titulo); margin: 0 0 6px; }
p { margin: 0 0 12px; }
.mudo { color: var(--tinta-3); }
.pequeno { font-size: 13px; }
.mono { font-family: var(--f-mono); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 650 13px/1 var(--f-ui); font-variation-settings: "wdth" 80; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 16px; min-height: 42px;
  border: 2px solid var(--tinta); background: transparent; cursor: pointer; text-decoration: none; color: var(--tinta);
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { background: var(--papel-2); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primario { background: var(--tinta); color: var(--papel); }
.btn.primario:hover { background: var(--vermelho); border-color: var(--vermelho); color: var(--papel); }
.btn.vermelho { border-color: var(--vermelho); color: var(--vermelho); }
.btn.vermelho:hover { background: var(--vermelho); color: var(--papel); }
.btn.leve { border-color: var(--regua); font-weight: 600; }
.btn.mini { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.btn-texto {
  border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 13px var(--f-ui);
  text-decoration: underline; text-decoration-color: var(--regua); text-underline-offset: 3px; color: var(--tinta-2);
}
.btn-texto:hover { color: var(--vermelho); text-decoration-color: var(--vermelho); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Formulários ---------- */

.campo { display: block; margin: 0 0 22px; }
.campo > span.rotulo { display: block; font: 650 13px/1.2 var(--f-ui); font-variation-settings: "wdth" 85; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.campo > span.ajuda { display: block; font-size: 14px; color: var(--tinta-2); margin-bottom: 8px; }
input[type="text"], input[type="password"], input[type="url"], textarea, select {
  width: 100%; border: 0; border-bottom: 2px solid var(--tinta); background: var(--papel-2);
  padding: 12px 12px; font: 400 17px/1.4 var(--f-titulo); border-radius: 0;
}
textarea { min-height: 110px; resize: vertical; font-size: 16px; }
textarea.mono, input.mono { font-family: var(--f-mono); font-size: 13px; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: none; background: var(--papel-3); border-bottom-color: var(--vermelho); }
select { font-family: var(--f-ui); font-size: 15px; cursor: pointer; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0 0 10px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vermelho); flex: none; }
.opcoes-cartao { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.opcao {
  position: relative; display: block; border: 2px solid var(--regua); padding: 14px 14px 12px; cursor: pointer; background: var(--papel);
}
.opcao input { position: absolute; opacity: 0; }
.opcao strong { display: block; font: 600 18px/1.2 var(--f-titulo); margin-bottom: 4px; }
.opcao span { font-size: 14px; color: var(--tinta-2); }
.opcao:has(input:checked) { border-color: var(--tinta); box-shadow: 4px 4px 0 var(--tinta); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font: 650 22px/1.2 var(--f-titulo); padding: 0; margin-bottom: 6px; }
.bloco-form { border-top: 2px solid var(--tinta); padding-top: 16px; margin-top: 8px; }

/* ---------- Carimbos e chips ---------- */

.carimbo {
  display: inline-block; font: 600 11px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid currentColor; padding: 5px 7px 4px; transform: rotate(-1.5deg); white-space: nowrap;
}
.carimbo.consenso { color: var(--verde); }
.carimbo.briga { color: var(--vermelho); }
.carimbo.unico { color: var(--ocre); }
.carimbo.lacuna { color: var(--azul); }
.carimbo.base { color: var(--tinta-3); border-style: dashed; }
.carimbo.cheio { background: currentColor; }
.carimbo.cheio span { color: var(--papel); }
.carimbo.reto { transform: none; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1 var(--f-mono);
  padding: 4px 6px; border: 1.5px solid var(--verde); color: var(--verde); background: transparent;
  cursor: pointer; margin: 0 4px 4px 0; white-space: nowrap;
}
.chip.vende { background: var(--vende); border-color: var(--vende); color: var(--papel); }
.chip.incerto { border-style: dashed; border-color: var(--tinta-3); color: var(--tinta-2); }
.chip:hover { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.chip.ativo { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.tag {
  display: inline-block; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 6px; background: var(--papel-3); color: var(--tinta-2);
}
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); margin: 8px 0; align-items: center; }
.legenda i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Mesa (lista de estudos) ---------- */

.mesa-topo { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.lista-estudos { border-top: 2px solid var(--tinta); }
.estudo-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 18px 4px; border-bottom: 1px solid var(--regua);
  text-decoration: none; align-items: center;
}
.estudo-linha:hover { background: var(--papel-2); color: var(--tinta); }
.estudo-linha h3 { font-size: 22px; margin: 0; }
.estudo-linha .meta { font: 400 13px/1.4 var(--f-mono); color: var(--tinta-3); grid-column: 1; }
.estudo-linha .lado { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.vazio { border: 2px dashed var(--regua); padding: 36px 24px; text-align: center; }
.vazio p { max-width: 560px; margin: 0 auto 16px; color: var(--tinta-2); }

/* ---------- Linha de produção (etapas) ---------- */

.etapas {
  display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--regua);
  margin: 22px 0 26px; position: sticky; top: calc(var(--topo, 56px) - 1px); background: var(--papel); z-index: 10;
}
.etapa {
  border: 0; background: none; text-align: left; padding: 10px 10px 9px; cursor: pointer; border-right: 1px solid var(--regua);
  display: flex; flex-direction: column; gap: 2px; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.etapa:last-child { border-right: 0; }
.etapa b { font: 600 11px/1 var(--f-mono); color: var(--tinta-3); }
.etapa span { font: 650 14px/1.15 var(--f-ui); font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: 0.04em; }
.etapa.feita b { color: var(--verde); }
.etapa.atual { border-bottom-color: var(--vermelho); background: var(--papel-2); }
.etapa:disabled { cursor: default; opacity: 0.35; }

/* ---------- Faixa de trabalho em andamento ---------- */

.faixa {
  border: 2px solid var(--tinta); padding: 14px 16px; margin: 0 0 22px; background: var(--papel-2);
  display: grid; gap: 10px;
}
.faixa.erro { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.faixa-topo { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.faixa-topo strong { font: 600 18px/1.2 var(--f-titulo); }
.barra { height: 8px; background: var(--papel-3); position: relative; overflow: hidden; }
.barra i { position: absolute; inset: 0 auto 0 0; background: var(--tinta); transition: width 0.4s ease; }
.barra.indef i { width: 30% !important; animation: varre 1.4s ease-in-out infinite; }
@keyframes varre { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .barra.indef i { animation: none; left: 0; width: 100% !important; opacity: 0.4; } }
.log { font: 400 12.5px/1.55 var(--f-mono); color: var(--tinta-2); max-height: 150px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.log li.aviso { color: var(--vermelho); }
.ponto-vivo { display: inline-block; width: 9px; height: 9px; background: var(--vermelho); border-radius: 50%; margin-right: 8px; animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: 0.2; } }

/* ---------- Fontes ---------- */

.vies {
  border: 2px solid var(--tinta); padding: 14px 16px; margin: 0 0 18px; display: grid; gap: 10px;
}
.vies-barra { display: flex; height: 26px; font: 600 12px/26px var(--f-mono); }
.vies-barra > div { padding: 0 8px; white-space: nowrap; overflow: hidden; min-width: 0; }
.vies-barra .v { background: var(--vende); color: var(--papel); }
.vies-barra .i { background: var(--verde-fundo); color: var(--verde); }
.vies-barra .x { background: var(--papel-3); color: var(--tinta-2); }
.fonte {
  display: grid; grid-template-columns: auto 120px 1fr auto; gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--regua); align-items: start;
}
.fonte.fora { opacity: 0.45; }
.fonte .num { font: 600 13px/1 var(--f-mono); padding-top: 4px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fonte .num input { width: 20px; height: 20px; accent-color: var(--vermelho); margin: 0; }
.miniatura { width: 120px; aspect-ratio: 16 / 9; background: var(--papel-3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.2s; }
.fonte:hover .miniatura img { filter: none; }
.miniatura .tipo { font: 600 11px var(--f-mono); color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.1em; }
.fonte h3 { font-size: 18px; margin: 0 0 4px; overflow-wrap: anywhere; }
.fonte h3 a { text-decoration: none; }
.fonte h3 a:hover { text-decoration: underline; }
.fonte .meta { font: 400 12.5px/1.4 var(--f-mono); color: var(--tinta-3); margin-bottom: 6px; }
.fonte .porque { font: 400 16px/1.4 var(--f-titulo); color: var(--tinta-2); margin: 0 0 8px; }
.fonte .lado-dir { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.seg { display: inline-flex; border: 1.5px solid var(--regua); }
.seg button {
  border: 0; background: none; padding: 5px 8px; font: 600 11px/1 var(--f-mono); text-transform: uppercase; cursor: pointer; color: var(--tinta-3);
}
.seg button + button { border-left: 1.5px solid var(--regua); }
.seg button.on { background: var(--tinta); color: var(--papel); }
.status { font: 600 12px/1.3 var(--f-mono); }
.status.ok { color: var(--verde); }
.status.falhou { color: var(--vermelho); }
.status.pendente, .status.capturando { color: var(--tinta-3); }
.erro-captura { background: var(--vermelho-fundo); padding: 8px 10px; font-size: 14px; margin: 6px 0; }
.adicionar { margin-top: 26px; padding: 16px; background: var(--papel-2); display: grid; gap: 12px; }

/* ---------- Régua ---------- */

.regua {
  border: 2px dashed var(--tinta-3); padding: 14px 18px; margin: 22px 0; background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--papel-2) 12px 13px);
}
.regua ol { margin: 8px 0 0; padding-left: 26px; font: 400 16px/1.45 var(--f-titulo); color: var(--tinta-2); }
.regua li::marker { font: 600 11px var(--f-mono); color: var(--tinta-3); content: "B" counter(list-item) "  "; }

/* ---------- Relatório ---------- */

.subnav { display: flex; gap: 2px; flex-wrap: wrap; margin: 6px 0 0; }
.subnav a { font: 600 12px/1 var(--f-mono); text-transform: lowercase; padding: 6px 8px; text-decoration: none; color: var(--tinta-2); }
.subnav a:hover { background: var(--papel-2); color: var(--vermelho); }
.em-uma-frase {
  background: var(--tinta); color: var(--papel); padding: 20px 22px; margin: 18px 0; display: grid; gap: 6px;
}
.em-uma-frase .kicker { color: var(--regua); margin: 0; }
.em-uma-frase p { font: 450 22px/1.35 var(--f-titulo); margin: 0; text-wrap: pretty; }
.placar { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); margin: 0 0 18px; }
.placar a { padding: 12px 12px 10px; text-decoration: none; border-right: 1px solid var(--regua); display: block; }
.placar a:last-child { border-right: 0; }
.placar a:hover { background: var(--papel-2); }
.placar b { display: block; font: 600 40px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.placar span { font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); }
.placar .c b { color: var(--verde); } .placar .d b { color: var(--vermelho); } .placar .u b { color: var(--ocre); } .placar .l b { color: var(--azul); }
.resumo-texto { font: 400 19px/1.55 var(--f-titulo); max-width: 760px; text-wrap: pretty; }
.alertas { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.alertas li { padding: 10px 12px 10px 14px; border-left: 4px solid var(--vermelho); background: var(--vermelho-fundo); font-size: 15px; }

.grade-fontes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--regua); border-left: 1px solid var(--regua); }
.cartao-fonte { border-right: 1px solid var(--regua); border-bottom: 1px solid var(--regua); padding: 12px; cursor: pointer; background: none; text-align: left; display: grid; gap: 6px; align-content: start; }
.cartao-fonte:hover, .cartao-fonte.ativo { background: var(--papel-2); }
.cartao-fonte.ativo { box-shadow: inset 0 0 0 2px var(--vermelho); }
.cartao-fonte .t { font: 600 15.5px/1.25 var(--f-titulo); }
.cartao-fonte .a { font: 400 12px/1.3 var(--f-mono); color: var(--tinta-3); }

.matriz-caixa { overflow-x: auto; border: 1px solid var(--regua); margin: 8px 0; }
table.matriz { border-collapse: collapse; font: 400 13px/1.3 var(--f-ui); min-width: 100%; }
.matriz th, .matriz td { padding: 5px 6px; border-bottom: 1px solid var(--regua); white-space: nowrap; }
.matriz thead th { font: 600 11px var(--f-mono); color: var(--tinta-3); position: sticky; top: 0; background: var(--papel); }
.matriz thead th button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 2px 3px; }
.matriz thead th button:hover, .matriz thead th button.ativo { color: var(--vermelho); text-decoration: underline; }
.matriz td.rot { max-width: 320px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--papel); font-weight: 500; }
.matriz td.rot b { font: 600 11px var(--f-mono); margin-right: 6px; }
.matriz td.cel { text-align: center; width: 26px; }
.matriz td.cel i { display: inline-block; width: 14px; height: 14px; vertical-align: middle; }
.matriz i.v { background: var(--vende); }
.matriz i.ind { background: var(--verde); }
.matriz i.inc { background: var(--tinta-3); }
.matriz i.no { width: 4px !important; height: 4px !important; background: var(--regua); border-radius: 50%; }
.matriz td.cont { font: 600 12px var(--f-mono); color: var(--tinta-2); text-align: right; }
.matriz tr.lado td.rot { color: var(--vermelho); }
.matriz tr.cortado { opacity: 0.35; }
.matriz tr.sep td { border-bottom: 2px solid var(--tinta); padding: 0; height: 0; }

.pontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.ponto { border-top: 3px solid var(--verde); padding: 12px 0 0; display: grid; gap: 8px; align-content: start; transition: opacity 0.2s; }
.ponto.unico { border-top-color: var(--ocre); }
.ponto.lacuna { border-top-color: var(--azul); }
.ponto.cortado { opacity: 0.4; }
.ponto.cortado .ponto-texto { text-decoration: line-through; text-decoration-color: var(--vermelho); }
.ponto.esmaecido { opacity: 0.18; }
.ponto-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ponto-topo h3 { font-size: 18px; margin: 0; }
.ponto-topo h3 b { font: 600 12px var(--f-mono); color: var(--tinta-3); margin-right: 6px; }
.contador { font: 600 12px var(--f-mono); color: var(--tinta-2); white-space: nowrap; }
.forca { height: 4px; background: var(--papel-3); }
.forca i { display: block; height: 100%; background: var(--verde); }
.ponto-texto { font: 400 16px/1.5 var(--f-titulo); color: var(--tinta); margin: 0; }
.ponto-acoes { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.editado { font: 600 11px var(--f-mono); color: var(--vermelho); text-transform: uppercase; }

.briga { border: 2px solid var(--tinta); margin: 0 0 22px; }
.briga.esmaecido { opacity: 0.2; }
.briga-topo { padding: 14px 16px; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--regua); flex-wrap: wrap; }
.briga-topo h3 { font-size: 22px; margin: 0; flex: 1 1 300px; }
.briga-topo h3 b { font: 600 13px var(--f-mono); color: var(--vermelho); margin-right: 8px; }
.lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lado-briga { padding: 14px 16px; border-right: 1px solid var(--regua); display: grid; gap: 8px; align-content: start; cursor: pointer; position: relative; }
.lado-briga:last-child { border-right: 0; }
.lado-briga:hover { background: var(--papel-2); }
.lado-briga.escolhido { background: var(--vermelho-fundo); box-shadow: inset 0 0 0 3px var(--vermelho); }
.lado-briga.descartado { opacity: 0.45; }
.lado-briga .rotulo { font: 650 14px/1.2 var(--f-ui); font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: 0.05em; }
.lado-briga p { font: 400 16px/1.45 var(--f-titulo); margin: 0; }
.lado-briga input { position: absolute; opacity: 0; }
.lado-briga:has(input:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: -4px; }
.leitura { padding: 12px 16px; background: var(--papel-2); border-top: 1px solid var(--regua); font: 400 15.5px/1.5 var(--f-titulo); }
.leitura b { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); margin-right: 6px; }
.decisao { padding: 12px 16px; border-top: 1px solid var(--regua); display: grid; gap: 10px; }
.decisao .acoes { gap: 6px; }
.decisao .btn.on { background: var(--vermelho); border-color: var(--vermelho); color: var(--papel); }

.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: 10px 0; border-bottom: 1px solid var(--regua); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
.lista-simples li > :first-child { grid-row: span 2; }
.vs-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vs-col h3 { font: 650 13px/1 var(--f-ui); font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 8px; border-bottom: 2px solid var(--tinta); }
.vs-col ul { padding-left: 18px; margin: 10px 0; font: 400 15.5px/1.45 var(--f-titulo); }
.vs-col li { margin-bottom: 8px; }
.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; }
.vocab dt { font: 650 17px/1.2 var(--f-titulo); }
.vocab dd { margin: 2px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.ordem { counter-reset: o; list-style: none; padding: 0; margin: 0; }
.ordem li { counter-increment: o; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--regua); }
.ordem li::before { content: counter(o); font: 650 30px/1 var(--f-titulo); color: var(--vermelho); grid-row: span 2; }
.ordem .t { font: 600 17px/1.3 var(--f-titulo); }

.pilula {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30;
  background: var(--tinta); color: var(--papel); padding: 8px 8px 8px 16px; display: flex; gap: 12px; align-items: center;
  font: 500 13px/1.3 var(--f-mono); box-shadow: 0 8px 24px var(--sombra); max-width: calc(100vw - 32px);
}
.pilula button { background: var(--vermelho); color: var(--papel); border: 0; padding: 6px 10px; font: 600 12px var(--f-mono); cursor: pointer; }

.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--papel); border-top: 3px double var(--tinta);
}
.barra-fixa-in { max-width: var(--largura); margin: 0 auto; padding: 10px 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.barra-fixa .estado { font: 500 13px/1.3 var(--f-mono); color: var(--tinta-2); }
.barra-fixa .estado b { color: var(--tinta); }

/* ---------- Aprendizado (leitura) ---------- */

.leitura-doc { max-width: 740px; font: 400 18.5px/1.65 var(--f-titulo); }
.leitura-doc h1 { font: 650 40px/1.08 var(--f-titulo); letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
.leitura-doc h2 { font: 650 24px/1.2 var(--f-titulo); margin: 40px 0 10px; padding-top: 12px; border-top: 2px solid var(--tinta); }
.leitura-doc h3 { font-size: 19px; margin: 24px 0 6px; }
.leitura-doc blockquote { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--vermelho); font-style: italic; font-size: 21px; }
.leitura-doc li { margin-bottom: 6px; }
.leitura-doc code { font: 400 0.82em var(--f-mono); background: var(--papel-2); padding: 1px 4px; }
.leitura-doc pre { background: var(--papel-2); padding: 12px; overflow: auto; }
.leitura-doc pre code { background: none; padding: 0; }
.leitura-doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.leitura-doc td, .leitura-doc th { border-bottom: 1px solid var(--regua); padding: 6px 8px; text-align: left; vertical-align: top; }
.leitura-doc a { color: var(--vermelho); }
.cit {
  font: 600 0.62em/1 var(--f-mono); padding: 3px 4px; border: 1.5px solid var(--verde); color: var(--verde); background: none; cursor: pointer; vertical-align: 0.25em; margin: 0 1px;
}
.cit.vende { background: var(--vende); color: var(--papel); border-color: var(--vende); }
.cit:hover { outline: 2px solid var(--vermelho); }

/* ---------- Skill ---------- */

.skill-grade { display: grid; grid-template-columns: 250px 1fr; gap: 0; border: 2px solid var(--tinta); min-height: 520px; }
.arvore { border-right: 1px solid var(--regua); padding: 10px 0; background: var(--papel-2); }
.arvore .raiz { font: 600 13px var(--f-mono); padding: 6px 14px 10px; border-bottom: 1px solid var(--regua); margin-bottom: 6px; overflow-wrap: anywhere; }
.arvore button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 14px; font: 400 13px/1.3 var(--f-mono); cursor: pointer; overflow-wrap: anywhere; }
.arvore button:hover { background: var(--papel-3); }
.arvore button.on { background: var(--tinta); color: var(--papel); }
.editor { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.editor-topo { padding: 10px 14px; border-bottom: 1px solid var(--regua); display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.editor textarea { min-height: 460px; border: 0; background: var(--papel); font: 400 13px/1.6 var(--f-mono); padding: 14px; resize: vertical; }
.editor .leitura-doc { padding: 14px 18px; max-width: none; font-size: 16.5px; overflow: auto; }
.checagens { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--regua); font: 500 12px var(--f-mono); }
.checagens .ok { color: var(--verde); } .checagens .ruim { color: var(--vermelho); }
.instalar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.instalar div { border-top: 2px solid var(--tinta); padding-top: 10px; font-size: 14.5px; }
.instalar code, .cmd { font: 400 12.5px/1.5 var(--f-mono); background: var(--papel-2); padding: 2px 5px; overflow-wrap: anywhere; }
.versoes { list-style: none; padding: 0; margin: 10px 0; }
.versoes li { padding: 8px 0; border-bottom: 1px solid var(--regua); font-size: 14px; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }

/* ---------- Teste ---------- */

.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sugestoes button { border: 1.5px solid var(--regua); background: var(--papel); padding: 8px 10px; font: 400 14px/1.3 var(--f-titulo); text-align: left; cursor: pointer; max-width: 100%; }
.sugestoes button:hover { border-color: var(--tinta); }
.teste { border-top: 2px solid var(--tinta); padding-top: 14px; margin-top: 30px; }
.teste-pedido { font: italic 400 19px/1.4 var(--f-titulo); margin: 6px 0 14px; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--regua); }
.lado-a-lado > div { padding: 14px 16px; min-width: 0; }
.lado-a-lado > div + div { border-left: 1px solid var(--regua); background: var(--papel-2); }
.lado-a-lado .leitura-doc { font-size: 16px; max-width: none; }
.lado-a-lado .leitura-doc h1 { font-size: 26px; }
.lado-a-lado .leitura-doc h2 { font-size: 19px; margin-top: 22px; }

/* ---------- Configuração ---------- */

.passo-config { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; padding: 22px 0; border-bottom: 1px solid var(--regua); }
.passo-config > b { font: 650 44px/1 var(--f-titulo); color: var(--regua); }
.passo-config.ok > b { color: var(--verde); }
.passo-config h3 { font-size: 22px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.passo-config ol { padding-left: 20px; margin: 8px 0 12px; }
.passo-config li { margin-bottom: 6px; }
.resultado-teste { font: 500 13px/1.4 var(--f-mono); padding: 8px 10px; margin-top: 10px; }
.resultado-teste.ok { background: var(--verde-fundo); color: var(--verde); }
.resultado-teste.ruim { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------- Método ---------- */

.fluxo { counter-reset: f; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--tinta); border-left: 1px solid var(--regua); }
.fluxo li { counter-increment: f; padding: 16px; border-right: 1px solid var(--regua); border-bottom: 1px solid var(--regua); }
.fluxo li::before { content: counter(f, decimal-leading-zero); display: block; font: 600 12px var(--f-mono); color: var(--vermelho); margin-bottom: 8px; }
.fluxo li.voce::after { content: "você decide"; display: inline-block; margin-top: 8px; font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--vermelho); border: 1.5px solid currentColor; padding: 3px 5px; transform: rotate(-1.5deg); }
.fluxo strong { font: 600 19px/1.2 var(--f-titulo); display: block; margin-bottom: 4px; }
.cuidados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
.cuidados div { border-left: 4px solid var(--vermelho); padding-left: 14px; }
.chia { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--tinta); }
.chia div { padding: 14px; border-right: 1px solid var(--regua); }
.chia div:last-child { border-right: 0; }
.chia b { font: 650 40px/1 var(--f-titulo); display: block; }
.chia .h { background: var(--tinta); color: var(--papel); }

/* ---------- Modal ---------- */

dialog {
  border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); padding: 0; max-width: min(760px, calc(100vw - 24px)); width: 100%;
  box-shadow: 10px 10px 0 var(--sombra);
}
dialog::backdrop { background: rgba(20, 18, 15, 0.55); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--regua); gap: 12px; }
.modal-topo h3 { margin: 0; }
.modal-corpo { padding: 16px; max-height: 70vh; overflow: auto; }
.modal-corpo pre { white-space: pre-wrap; font: 400 13px/1.6 var(--f-mono); margin: 0; }
.modal-pe { padding: 12px 16px; border-top: 1px solid var(--regua); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.aviso-topo { position: fixed; top: 70px; right: 16px; z-index: 40; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.aviso-topo div { background: var(--tinta); color: var(--papel); padding: 12px 14px; font-size: 14.5px; box-shadow: 6px 6px 0 var(--sombra); }
.aviso-topo div.erro { background: var(--vermelho); }

/* ---------- Login ---------- */

.porta { max-width: 460px; margin: 8vh auto 0; padding: 0 16px; }
.porta .marca-grande { font: 700 64px/0.95 var(--f-titulo); letter-spacing: -0.03em; border-bottom: 3px double var(--tinta); padding-bottom: 12px; margin-bottom: 8px; }
.porta .lema { font: 400 19px/1.4 var(--f-titulo); color: var(--tinta-2); margin-bottom: 30px; }
.erro-form { color: var(--vermelho); font-weight: 600; min-height: 24px; }

/* ---------- Telas pequenas ---------- */

@media (max-width: 860px) {
  .etapas { grid-template-columns: repeat(3, 1fr); top: 0; position: relative; }
  .etapa:nth-child(3) { border-right: 0; }
  .etapa:nth-child(-n+3) { border-bottom: 1px solid var(--regua); }
  .placar { grid-template-columns: repeat(3, 1fr); }
  .placar a:nth-child(3) { border-right: 0; }
  .placar a:nth-child(-n+3) { border-bottom: 1px solid var(--regua); }
  .vs-col, .instalar, .grade-3, .fluxo { grid-template-columns: 1fr; }
  .skill-grade { grid-template-columns: 1fr; }
  .arvore { border-right: 0; border-bottom: 1px solid var(--regua); }
  .cuidados, .chia { grid-template-columns: 1fr 1fr; }
  .fonte { grid-template-columns: auto 1fr; }
  .fonte .miniatura { display: none; }
  .fonte .lado-dir { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .cabeca { position: relative; }
  .cabeca-in { gap: 6px; }
  .nav { margin-left: -10px; width: calc(100% + 20px); }
  .nav a { padding: 6px 8px; font-size: 12px; }
  .grade-2 { grid-template-columns: 1fr; }
  .lado-a-lado { grid-template-columns: 1fr; }
  .lado-a-lado > div + div { border-left: 0; border-top: 1px solid var(--regua); }
  .cuidados, .chia { grid-template-columns: 1fr; }
  .chia div { border-right: 0; border-bottom: 1px solid var(--regua); }
  .pontos { grid-template-columns: 1fr; }
  .manchete { font-size: 32px; }
  .pilula { bottom: 120px; }
  .estudo-linha { grid-template-columns: 1fr; }
  .estudo-linha .lado { grid-row: auto; grid-column: 1; justify-content: flex-start; }
  .placar b { font-size: 32px; }
}