/* ───────── COMO USAR — o tutorial de cada módulo (js/como-usar.js) ─────────
   Leitura longa: coluna de texto estreita (~70 caracteres), sumário ao lado no
   computador e em cima no celular. Tudo pelas variáveis do kit, então vale nos
   dois temas. */

/* O layout reage à largura DA ÁREA DO GUIA (container query), não da janela:
   com o menu lateral aberto, uma janela de 1024px deixa só ~700px para o guia,
   e um sumário lateral ali espreme o texto e encolhe os fluxogramas. */
.como-usar {
  container-type: inline-size;
  padding: 8px 0 48px;
  color: var(--preto-contorno);
  font-family: var(--fonte-corpo);
}
.cu-grade {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 1120px;
}
/* Texto em linha confortável (~72 caracteres); desenho e tabela usam a
   largura toda da coluna. */
.cu-texto > :not(.cu-fluxo):not(.cu-tabela) { max-width: 72ch; }

/* .como-usar na frente: a regra base do .cu-sumario (sticky) vem mais abaixo
   no arquivo e, com a mesma força, venceria — no celular o sumário ficava
   grudado no topo, por cima do texto. */
@container (max-width: 900px) {
  .cu-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .como-usar .cu-sumario { position: static; max-height: none; border-bottom: 1px solid var(--cinza-borda); padding-bottom: 12px; }
  .como-usar .cu-sumario ol { columns: 2; column-gap: 16px; }
}
@container (max-width: 520px) {
  .como-usar .cu-sumario ol { columns: 1; }
  .cu-texto { font-size: 15px; }
}

.cu-carregando, .cu-erro {
  grid-column: 1 / -1;
  padding: 24px; border-radius: var(--raio);
  background: var(--cinza-fundo); color: var(--cinza-texto);
}
.cu-erro { color: var(--vermelho-alerta); }

/* Sumário */
.cu-sumario {
  position: sticky; top: 12px;
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 4px 0;
  font-size: 13px;
}
.cu-sumario-titulo {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-texto);
}
.cu-sumario ol { list-style: none; margin: 0; padding: 0; }
.cu-sumario li a {
  display: block; padding: 5px 10px; border-left: 2px solid var(--cinza-borda);
  color: var(--cinza-texto); text-decoration: none; line-height: 1.35;
}
.cu-sumario li a:hover { color: var(--marinho); border-left-color: var(--dourado); background: var(--hover); }

/* Texto */
.cu-texto { font-size: 15.5px; line-height: 1.65; min-width: 0; }
.cu-texto h1 {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 30px; line-height: 1.15;
  margin: 0 0 6px; color: var(--marinho);
}
.cu-texto h2 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px;
  margin: 44px 0 10px; padding-top: 18px; border-top: 1px solid var(--cinza-borda);
  color: var(--marinho); scroll-margin-top: 16px;
}
.cu-texto h3 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px;
  margin: 28px 0 6px; color: var(--marinho); scroll-margin-top: 16px;
}
.cu-texto p, .cu-texto ul, .cu-texto ol { margin: 0 0 12px; }
.cu-texto ul, .cu-texto ol { padding-left: 22px; }
.cu-texto li { margin-bottom: 4px; }
.cu-texto a { color: var(--marinho); text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: 2px; }
.cu-texto code {
  font-size: .9em; padding: 1px 5px; border-radius: 4px;
  background: var(--cinza-fundo); border: 1px solid var(--cinza-borda);
}
.cu-texto hr { border: 0; border-top: 1px solid var(--cinza-borda); margin: 24px 0; }

/* Primeira linha do guia (versão / data): discreta, logo abaixo do título */
.cu-texto h1 + p { color: var(--cinza-texto); font-size: 13px; margin-bottom: 22px; }

/* Citações: dica neutra; as que começam com "Atenção" viram aviso */
.cu-texto blockquote {
  margin: 14px 0; padding: 10px 14px;
  border-left: 3px solid var(--marinho-claro, var(--marinho));
  background: var(--superficie-suave, var(--cinza-fundo)); border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.cu-texto blockquote p:last-child { margin-bottom: 0; }
.cu-texto blockquote.cu-atencao { border-left-color: var(--dourado); background: var(--dourado-fundo, #FFF6DC); }

/* Tabelas */
.cu-tabela { overflow-x: auto; margin: 12px 0 16px; }
.cu-texto table { border-collapse: collapse; width: 100%; font-size: 14px; }
/* O base.css do kit trava `white-space: nowrap` em toda célula — certo nas
   tabelas de dados do sistema, errado num texto corrido: a frase não quebra,
   a tabela passa da tela e, na impressão, o Chrome encolhe a folha inteira. */
.cu-texto th, .cu-texto td { padding: 8px 10px; border-bottom: 1px solid var(--cinza-borda); text-align: left; vertical-align: top; white-space: normal; }
.cu-texto th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto); font-weight: 700; }

/* Fluxogramas: sempre num cartão claro — o desenho tem cores fixas e precisa
   ler igual no tema escuro. */
.cu-fluxo {
  margin: 16px 0 20px; padding: 18px 12px;
  background: #FFFFFF; border: 1px solid var(--cinza-borda); border-radius: var(--raio);
  text-align: center; overflow-x: auto;
}
/* O desenho encolhe até caber, mas nunca abaixo do tamanho legível (o JS põe
   um min-width); se a área for mais estreita que isso, o cartão rola de lado. */
.cu-fluxo svg { height: auto; }
.cu-fluxo-falhou { white-space: pre; text-align: left; font-family: monospace; font-size: 12px; color: #5A6573; }


/* ───────── Impressão ─────────
   O timbrado vem do @page montado por ComoUsar.imprimir(). Aqui some tudo que
   não é o texto do guia (o JS marca os vizinhos com .cu-oculto). */
@media print {
  body.cu-imprimindo .cu-oculto { display: none !important; }
  body.cu-imprimindo, body.cu-imprimindo * { box-shadow: none !important; }
  body.cu-imprimindo { background: #fff !important; }
  body.cu-imprimindo .como-usar { display: block; padding: 0 14mm; color: #1B2430; container-type: normal; }
  body.cu-imprimindo .cu-grade { display: block; max-width: none; }
  body.cu-imprimindo .cu-texto > * { max-width: none !important; }
  body.cu-imprimindo .cu-fluxo svg { min-width: 0 !important; max-width: 100% !important; }
  /* No papel não existe rolagem: a tabela cabe na largura e o texto quebra. */
  body.cu-imprimindo .cu-tabela { overflow: visible; }
  body.cu-imprimindo .cu-texto table { font-size: 9pt; }
  body.cu-imprimindo .cu-texto td, body.cu-imprimindo .cu-texto th { padding: 5pt 6pt; }
  body.cu-imprimindo .cu-sumario { display: none; }
  body.cu-imprimindo .cu-texto { font-size: 10.5pt; line-height: 1.5; max-width: none; }
  body.cu-imprimindo .cu-texto h1 { font-size: 20pt; color: #1F4E86; }
  body.cu-imprimindo .cu-texto h2 { font-size: 14pt; color: #1F4E86; margin-top: 18pt; break-after: avoid; }
  body.cu-imprimindo .cu-texto h3 { font-size: 11.5pt; color: #1F4E86; break-after: avoid; }
  body.cu-imprimindo .cu-fluxo, body.cu-imprimindo .cu-tabela, body.cu-imprimindo blockquote { break-inside: avoid; }
  body.cu-imprimindo .cu-texto a { color: inherit; text-decoration: none; }
}