/* ═══════════════════════════════════════════════════════════════════════════
   AJUDA — página de uso do sistema para o operador do cliente.
   Reusa os tokens da casa (tokens.css). Arquivo IGUAL nos dois repos
   (lmgf e radiogestao): mudou aqui, muda lá.

   DESENHO: painel de duas colunas (decisão do Arthur, 25/09/2026).
   📏 O que ele substituiu: uma página única de 12,2 telas de rolagem que usava
   54% da largura em 1440px e 41% em 1920px. O índice sumia na primeira rolagem,
   então quem chegava pelo botão "? Ajuda desta tela" caía no meio de um texto
   longo sem saber em que etapa estava nem o que vinha depois.

   ⚠️ O JS é MELHORIA, não requisito: sem ele todos os tópicos aparecem
   empilhados, como antes. É o mesmo motivo de o conteúdo continuar em HTML
   estático nesta página — a guarda §5.2 varre este arquivo atrás dos rótulos,
   e quem edita continua editando HTML.
════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
}

/* ── Cabeçalho ── */
.cab {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 14px 24px; display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.cab img { height: 34px; width: auto; }
.cab h1 { margin: 0; font-size: 19px; color: var(--navy); font-weight: 600; line-height: 1.2; }
.cab .sub { color: var(--text3); font-size: 13px; margin: 2px 0 0; }

.busca { margin-left: auto; position: relative; }
.busca input {
  width: 270px; max-width: 100%; padding: 8px 12px 8px 32px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--bg); color: var(--text); font-family: inherit;
}
.busca input:focus { outline: 2px solid var(--navy-l); outline-offset: -1px; background: var(--white); }
.busca::before {
  content: '⌕'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 17px; pointer-events: none;
}

.aviso-aba {
  background: var(--navy-050); border-radius: 8px; padding: 10px 14px;
  color: var(--text2); font-size: 14px; margin: 0 0 20px;
}

/* ── As duas colunas ── */
.corpo { display: grid; grid-template-columns: 262px 1fr; align-items: start; }

.lado {
  background: var(--white); border-right: 1px solid var(--border);
  padding: 18px 14px 28px; position: sticky; top: 0;
  max-height: 100vh; overflow-y: auto;
}
.lado h2 {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3); margin: 20px 6px 8px; font-weight: 600;
}
.lado h2:first-child { margin-top: 0; }
.lado nav { display: flex; flex-direction: column; gap: 2px; }
.lado nav a {
  display: flex; gap: 10px; align-items: center; text-decoration: none;
  color: var(--text); font-size: 14.5px; line-height: 1.35;
  padding: 8px 10px; border-radius: 7px;
}
.lado nav a:hover { background: var(--navy-050); }
.lado nav a.ativo { background: var(--navy); color: var(--white); font-weight: 600; }
.lado nav a.ativo .bolha { background: rgba(255,255,255,.22); color: var(--white); }
.bolha {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy-100); color: var(--navy-d);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* A rotina NÃO tem período (Arthur, 25/09): se a página for dizer alguma coisa
   sobre quando fazer, diz o MENOR período possível. */
.freq {
  margin: 8px 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--text2);
  background: var(--warn-bg); border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0; padding: 8px 10px;
}

/* ── Conteúdo ── */
.conteudo { padding: 26px 34px 64px; max-width: 1500px; }
section.topico > h2 { margin: 0 0 4px; font-size: 26px; color: var(--navy); line-height: 1.25; }
section.topico h3 { font-size: 17px; margin: 26px 0 8px; color: var(--text); }
.intro { color: var(--text2); margin: 0 0 18px; font-size: 17px; }

/* Um BLOCO é um print e os passos que acontecem DENTRO dele.
   ⛔ A regra que o criou (Arthur, 25/09): todo passo numerado tem de acontecer
   naquele print. O tópico "Importar" acontece em três lugares — o botão, o
   formulário e a lista —, então tem três blocos. */
.bloco {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.05fr);
  gap: 30px; align-items: start; margin: 0 0 30px;
}
/* Print de faixa (proporção acima de 5:1): ocupa a linha inteira, embaixo do
   texto. Espremido em meia coluna ele fica ilegível. Quem marca é o ajuda.js,
   pela proporção da imagem. */
.bloco.largo { grid-template-columns: 1fr; gap: 16px; }
.bloco.largo figure.print { max-width: 1100px; }
.bloco.sem-print { grid-template-columns: 1fr; max-width: 820px; }
.etiqueta {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3); margin: 0 0 8px;
}

/* ── Passos ── */
ol.passos { margin: 0; padding: 0; list-style: none; counter-reset: p; }
ol.passos > li {
  counter-increment: p; position: relative; padding: 10px 12px 10px 44px;
  border-radius: 8px;
}
ol.passos > li::before {
  content: counter(p); position: absolute; left: 10px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy-100); color: var(--navy-d);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
  transition: background .12s, color .12s, transform .12s;
}
ol.passos > li.aceso { background: var(--navy-050); box-shadow: inset 3px 0 0 var(--navy-l); }
ol.passos > li.aceso::before { background: var(--navy); color: var(--white); transform: scale(1.12); }
ol.passos > li.tem-ponto { cursor: zoom-in; }
ol.passos > li .ver {
  display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--navy-l);
  white-space: nowrap; opacity: 0; transition: opacity .12s;
}
ol.passos > li.tem-ponto:hover .ver, ol.passos > li.aceso .ver { opacity: 1; }

ul.opcoes { margin: 8px 0 0; padding-left: 20px; }
ul.opcoes li { margin: 6px 0; }

/* ── Rótulo exato da tela ── */
.ui {
  font-family: var(--font-mono); font-size: .86em; background: var(--navy-050);
  border: 1px solid var(--navy-100); border-radius: 4px; padding: 1px 5px;
  color: var(--navy-d); white-space: nowrap;
}
.msg { font-style: italic; color: var(--text2); }
.pronto { color: var(--pos); font-weight: 700; }

/* ── Destaques ── */
.dica, .atencao, .antes {
  border-radius: 8px; padding: 12px 16px; font-size: 15px; margin: 16px 0 0;
  border-left: 4px solid;
}
.dica { background: var(--navy-050); border-color: var(--navy-l); }
.atencao { background: var(--warn-bg); border-color: var(--warn); }
.antes { background: var(--bg); border-color: var(--border2); color: var(--text2); }
.dica p, .atencao p, .antes p { margin: 0; }
.atencao ul { margin: 8px 0 0; padding-left: 20px; }

/* ── O print ──
   ⚠️ Os marcadores ficam FORA da imagem (Arthur, 25/09): em cima, eles tapam
   justamente o texto que o print existe para mostrar. Dentro da imagem entra só
   o CONTORNO da região — contorno não tapa, preenchimento tapa.
   As posições NÃO são escritas à mão: vêm de prints/pontos.json, que o
   tools/prints-ajuda.mjs mede na tela real e grava junto com as imagens. */
figure.print { margin: 0; padding: 34px 0 0 34px; }
figure.print.sem-calha-esq { padding-left: 0; }
figure.print.sem-calha-topo { padding-top: 0; }
figure.print.com-calha-dir { padding-right: 34px; }
/* ⛔ A moldura ENCOLHE com a imagem, e a imagem tem TETO DE ALTURA (defeito
   visto pelo Arthur em produção, 25/09: "print muito grande antes de ampliar").
   📏 O que havia: só a proporção LARGA era tratada (acima de 5:1 desce para
   baixo do texto). A altura nunca foi limitada, e o formulário de importação —
   690x804, retrato — ocupava 605 px, 67% da janela, espremendo o texto, que é o
   conteúdo.
   ⚠️ O `inline-block` não é enfeite: sem ele a moldura fica com a largura da
   coluna enquanto a imagem encolhe, e as `.zona`, que são % do container,
   passam a apontar fora da figura — foi assim que o retângulo da lupa esticou. */
.moldura { position: relative; display: inline-block; max-width: 100%; }
/* 📏 36vh, e o número saiu de uma MEDIÇÃO, não de um palpite. A régua é a
   composição: a imagem não pode ser maior que o TEXTO ao lado dela, senão o
   passo a passo vira legenda da foto. No bloco do formulário de importação, o
   texto mede 329 px; a imagem ficava 468 px a 52vh — **1,42×** o texto, e o
   Arthur disse que ainda estava grande. A 36vh ela mede 324 px: 0,98×.
   Quem quiser ler o miolo da tela amplia — é para isso que a lupa existe. */
figure.print img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 36vh;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white);
}
figure.print figcaption { color: var(--text3); font-size: 13.5px; margin-top: 8px; }

.zona {
  position: absolute; border: 2px solid transparent; border-radius: 5px;
  pointer-events: none; transition: border-color .14s, box-shadow .14s;
}
.zona.aceso { border-color: var(--pos); box-shadow: 0 0 0 3px rgba(22,131,90,.18); }
.guia { position: absolute; background: var(--border2); pointer-events: none; transition: background .14s; }
.guia.aceso { background: var(--pos); }
.guia.esq  { left: -8px; width: 8px; height: 2px; transform: translateY(-1px); }
.guia.topo { top: -8px; height: 8px; width: 2px; transform: translateX(-1px); }
.guia.dir  { right: -8px; width: 8px; height: 2px; transform: translateY(-1px); }

.ponto {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--navy); color: var(--white); border: 2px solid var(--white);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
  box-shadow: var(--shadow-1); transition: transform .12s, background .12s;
  padding: 0; font-family: inherit; z-index: 2;
}
/* ⚠️ O deslocamento negativo mora AQUI e em lugar nenhum mais: em 25/09 eu o
   repeti num bloco acima e o `left:0` de baixo venceu — os marcadores voltaram
   para cima da imagem, tapando a coluna do checkbox. A olho passava por certo. */
/* ⚠️ O lado DIREITO existe porque a calha esquerda só distingue por ALTURA.
   📏 Medido em 25/09: no formulário de lançamento, "Valor e descrição" e
   "Datas" ficam lado a lado em duas colunas, na mesma altura — os marcadores 1
   e 3 caíam ambos em y=552 e o 3 cobria o 1, que ficou INCLICÁVEL em produção.
   O gerador escolhe o lado pela metade do recorte em que o alvo está, e recusa
   dois marcadores colados no mesmo lado. */
.ponto.esq  { left: -34px; top: 0; transform: translateY(-50%); }
.ponto.dir  { right: -34px; top: 0; transform: translateY(-50%); }
.ponto.topo { top: -34px; left: 0; transform: translateX(-50%); }
.ponto:hover, .ponto.aceso { background: var(--pos); }
.ponto.esq:hover, .ponto.esq.aceso,
.ponto.dir:hover, .ponto.dir.aceso { transform: translateY(-50%) scale(1.2); }
.ponto.topo:hover, .ponto.topo.aceso { transform: translateX(-50%) scale(1.2); }
.ponto:focus-visible { outline: 3px solid var(--navy-l); outline-offset: 2px; }

.ampliar {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  background: rgba(255,255,255,.94); border: 1px solid var(--border);
  border-radius: var(--r-ctl); padding: 5px 10px; font-size: 12.5px;
  cursor: pointer; color: var(--navy-d); font-family: inherit;
  box-shadow: var(--shadow-1); opacity: 0; transition: opacity .14s;
}
figure.print:hover .ampliar, .ampliar:focus-visible { opacity: 1; }

/* ── A lupa ──
   ⚠️ `display` SÓ no [open]: um `display:grid` solto anula o `display:none` que
   o navegador dá ao <dialog> fechado, e a caixa invisível cobre a página
   inteira comendo todo clique. A tela parece certa e não responde. */
.lupa { display: none; }
.lupa[open] {
  position: fixed; inset: 0; z-index: 50; background: rgba(12,20,38,.82);
  display: grid; place-items: center; padding: 70px 24px 24px; border: none;
  margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
}
.lupa::backdrop { background: rgba(12,20,38,.82); }
/* ⛔ A CAIXA DO ELEMENTO TEM DE SER O DESENHO (defeito visto pelo Arthur em
   produção, 25/09/2026: "retângulo verde muito grande em tela ampliada").
   📏 O que havia: `width:100%` + `object-fit: contain` + `max-height:74vh`. Com
   imagem em retrato — o formulário de importação é 690x804 — o elemento ficava
   com 1392 px de largura e o conteúdo era desenhado com 572 px, centralizado,
   com barras nos lados. As `.zona` são posicionadas em % do container, então
   um retângulo de 86,96% virava 1210 px e atravessava a viewport, em vez dos
   497 px do campo.
   🔑 As coordenadas medidas estavam certas o tempo todo; o container contra o
   qual eu as aplicava é que não era a imagem. ⇒ nada de `object-fit`: a imagem
   é limitada por `max-width`/`max-height` e a moldura ENCOLHE junto com ela. */
.lupa figure { margin: 0; max-width: 1600px; width: 100%; text-align: center; }
.lupa .moldura { position: relative; display: inline-block; max-width: 100%; }
.lupa img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh;
  border-radius: 8px; background: var(--white);
}
.lupa .zona.fraco { border-color: rgba(255,255,255,.34); }
.lupa figcaption { color: var(--white); font-size: 14px; margin-top: 14px; text-align: center; }
.lupa .passo-lupa {
  max-width: 900px; margin: 0 auto 8px; text-align: left; font-size: 16px;
  line-height: 1.55; background: rgba(255,255,255,.1); border-radius: 8px;
  padding: 12px 16px; display: flex; gap: 12px; align-items: baseline;
}
.lupa .passo-lupa .ui { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: var(--white); }
.lupa .bolha-lupa {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pos);
  color: var(--white); font-weight: 700; font-size: 13px; display: inline-grid;
  place-items: center; transform: translateY(3px);
}
.lupa .legenda-lupa { margin: 0; color: rgba(255,255,255,.72); font-size: 13.5px; }
.lupa .andar { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 12px 0 0; }
.lupa .andar span { color: rgba(255,255,255,.62); font-size: 13px; }
.lupa .ir, .lupa .fechar {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
  color: var(--white); border-radius: var(--r-ctl); padding: 7px 14px;
  font-size: 13.5px; cursor: pointer; font-family: inherit; line-height: 1;
}
.lupa .ir:hover:not([disabled]), .lupa .fechar:hover { background: rgba(255,255,255,.24); }
.lupa .ir[disabled] { opacity: .35; cursor: default; }

/* A saída tem de ser ÓBVIA (Arthur, 25/09): um "×" pequeno no canto deixa o
   operador sem saber se perdeu a página de trás. */
.barra-lupa {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: rgba(12,20,38,.96); border-bottom: 1px solid rgba(255,255,255,.14);
}
.barra-lupa .onde {
  color: rgba(255,255,255,.8); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lupa .fechar { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; }
.lupa kbd {
  font-family: var(--font-mono); font-size: 11.5px; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 2px 6px; color: var(--white);
}
.lupa .saida { margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 12.5px; }
.lupa .saida b { color: rgba(255,255,255,.85); font-weight: 600; }

/* ── Checklist da rodada ── */
.checklist {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-card); margin-top: 22px;
}
.checklist h3 {
  margin: 0; padding: 11px 14px; font-size: 12px; color: var(--navy);
  border-bottom: 1px solid var(--border-soft); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
}
.checklist ul { list-style: none; margin: 0; padding: 6px; }
.checklist label {
  display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13.5px; line-height: 1.35;
}
.checklist label:hover { background: var(--navy-050); }
.checklist input { width: 16px; height: 16px; accent-color: var(--navy); flex: none; margin-top: 2px; }
.checklist input:checked + span { color: var(--text3); text-decoration: line-through; }
.checklist .zerar {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 12px; padding: 5px; font-family: inherit;
}
.checklist .zerar:hover { color: var(--navy-l); text-decoration: underline; }
.checklist .barra { height: 4px; background: var(--border-soft); border-radius: 0 0 var(--r-card) var(--r-card); overflow: hidden; }
.checklist .barra i { display: block; height: 100%; background: var(--pos); width: 0; transition: width .25s; }

/* ── Navegação de rodapé ── */
.navega {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); margin-top: 26px; padding-top: 16px;
}
.navega a {
  font-size: 14px; text-decoration: none; color: var(--navy-l);
  padding: 8px 14px; border-radius: var(--r-ctl); border: 1px solid transparent;
}
.navega a:hover { background: var(--navy-050); border-color: var(--navy-100); }
.navega .prox { font-weight: 600; }
.navega .vazio { flex: 1; }

.ver-tudo {
  display: block; width: 100%; margin-top: 16px; padding: 9px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-ctl);
  color: var(--text2); font-size: 13px; cursor: pointer; font-family: inherit;
}
.ver-tudo:hover { background: var(--navy-050); color: var(--navy-d); border-color: var(--navy-100); }

.vazio-busca { color: var(--text3); padding: 48px 0; text-align: center; font-size: 15px; }

table.mensagens { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 14.5px; }
table.mensagens th, table.mensagens td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
table.mensagens th { background: var(--navy-050); color: var(--navy); font-size: 14px; }
table.mensagens td:first-child { width: 46%; font-style: italic; color: var(--text2); }

.rodape { color: var(--text3); font-size: 14px; margin-top: 40px; }

/* ── Telas estreitas ── */
@media (max-width: 1080px) {
  .bloco { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .corpo { grid-template-columns: 1fr; }
  .lado { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  .conteudo { padding: 20px 16px 48px; }
  .busca { margin-left: 0; width: 100%; }
  section.topico > h2 { font-size: 21px; }
}

/* ── Impressão / salvar em PDF ──
   O botão "Ver tudo" põe `data-tudo` no <html>; imprimir nesse modo sai com a
   página inteira, como era antes do painel. */
@media print {
  body { background: #fff; font-size: 12pt; }
  .cab, .lado, .navega, .aviso-aba, .ampliar, .ponto, .guia, .lupa { display: none !important; }
  .corpo { display: block; }
  .conteudo { padding: 0; max-width: none; }
  section.topico { break-before: page; display: block !important; }
  section.topico:first-of-type { break-before: auto; }
  figure.print { break-inside: avoid; padding: 0; }
  .bloco { display: block; }
}