/*
 * Documento exportado (HTML autocontido) e impressão / PDF.
 * Vai inline no <style> do HTML gerado por exportar-html.js, logo depois do
 * dexterity.css: aqui ficam o layout do manual (.stepbystep-exportado) e as
 * regras de página. Visual de workflow: cabeçalho com resumo, um cartão por
 * passo (número grande em cerceta, título com o alvo em destaque, caixas de
 * dica/atenção/nota e a imagem ampliada). Na tela mantém o tema escuro
 * Dexterity; no papel vira fundo branco com tinta base — cantos retos, fio de
 * 1px, sem sombra. Fontes por nome, com o fallback de sistema do dexterity.css.
 */

/* ---------------------------- documento na tela ---------------------------- */
.stepbystep-exportado {
  font-weight: 400;
  background: var(--dxt-base);
  --sbs-largura: min(880px, calc(100vw - 32px));
  --sbs-dica: var(--dxt-cerceta);
  --sbs-dica-txt: var(--dxt-acc-txt);
  --sbs-atencao: var(--dxt-amarelo);
  --sbs-atencao-txt: var(--dxt-amarelo);
  --sbs-nota: var(--dxt-roxo);
  --sbs-nota-txt: #C58FC7;
}
.stepbystep-exportado .cabecalho,
.stepbystep-exportado main,
.stepbystep-exportado .rodape {
  width: var(--sbs-largura);
  margin-inline: auto;
}

/* cabeçalho */
.stepbystep-exportado .cabecalho { padding: 40px 0 28px; }
.stepbystep-exportado .marca svg { height: 27px; width: auto; display: block; }
.stepbystep-exportado .sobretitulo {
  margin: 32px 0 0;
  font-family: var(--dxt-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dxt-acc-txt);
}
.stepbystep-exportado .cabecalho h1 {
  margin: 8px 0 0;
  font-family: var(--dxt-font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.02;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.stepbystep-exportado .descricao { margin: 16px 0 0; max-width: 62ch; font-size: 1.0625rem; color: var(--dxt-muted); }
.stepbystep-exportado .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 20px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--dxt-line);
  border-bottom: 1px solid var(--dxt-line);
  font-family: var(--dxt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dxt-off);
}
.stepbystep-exportado .meta .sep { color: var(--dxt-cerceta); }
.stepbystep-exportado .no-print {
  margin-top: 20px;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--dxt-cerceta);
  background: var(--dxt-cerceta);
  color: var(--dxt-base);
  font-family: var(--dxt-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
}
.stepbystep-exportado .no-print:hover { background: transparent; color: var(--dxt-acc-txt); }

/* lista de passos: um cartão por passo */
.stepbystep-exportado ol.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.stepbystep-exportado li.passo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  padding: 24px 24px 24px 20px;
  background: var(--dxt-surface);
  border: 1px solid var(--dxt-line);
  border-radius: 0;
}
.stepbystep-exportado li.passo h2 { display: contents; }
.stepbystep-exportado li.passo h2 .numero {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: var(--dxt-font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dxt-acc-txt);
}
.stepbystep-exportado li.passo h2 .titulo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--dxt-font-sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dxt-off);
  overflow-wrap: anywhere;
}
.stepbystep-exportado li.passo h2 .titulo strong { font-weight: 600; color: var(--dxt-acc-txt); }
.stepbystep-exportado .passo-corpo { grid-column: 2; grid-row: 2; min-width: 0; }
.stepbystep-exportado .passo-descricao { margin: 10px 0 0; max-width: 70ch; color: var(--dxt-muted); }

/* caixas de dica / atenção / nota */
.stepbystep-exportado .nota {
  --sbs-cor: var(--sbs-nota);
  --sbs-cor-txt: var(--sbs-nota-txt);
  margin: 14px 0 0;
  padding: 10px 14px 12px;
  border: 1px solid var(--sbs-cor);
  background: color-mix(in srgb, var(--sbs-cor) 12%, transparent);
}
.stepbystep-exportado .nota--dica { --sbs-cor: var(--sbs-dica); --sbs-cor-txt: var(--sbs-dica-txt); }
.stepbystep-exportado .nota--atencao { --sbs-cor: var(--sbs-atencao); --sbs-cor-txt: var(--sbs-atencao-txt); }
.stepbystep-exportado .nota-rotulo {
  display: block;
  font-family: var(--dxt-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbs-cor-txt);
}
.stepbystep-exportado .nota-texto { margin: 4px 0 0; color: var(--dxt-off); }

/* imagem ampliada */
.stepbystep-exportado .passo-imagem { margin: 16px 0 0; border: 1px solid var(--dxt-line); background: var(--dxt-base); }
.stepbystep-exportado .passo-imagem img { display: block; width: 100%; height: auto; }

/* seções: faixas de título entre os cartões */
.stepbystep-exportado li.secao {
  margin-top: 20px;
  padding: 14px 0 6px;
  border-top: 2px solid var(--dxt-cerceta);
}
.stepbystep-exportado li.secao h2.secao {
  font-family: var(--dxt-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dxt-off);
  overflow-wrap: anywhere;
}
.stepbystep-exportado .secao-descricao { margin: 6px 0 0; max-width: 70ch; color: var(--dxt-muted); }

.stepbystep-exportado .rodape {
  margin-top: 32px;
  padding: 20px 0 48px;
  border-top: 1px solid var(--dxt-line);
  font-family: var(--dxt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dxt-rotulo);
}

/* celular: o número fica na linha do título e o corpo usa a largura inteira do cartão */
@media (max-width: 600px) {
  .stepbystep-exportado .cabecalho { padding-top: 24px; }
  .stepbystep-exportado li.passo { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .stepbystep-exportado li.passo h2 .numero { font-size: 2.25rem; }
  .stepbystep-exportado li.passo h2 .titulo { font-size: 1.0625rem; }
  .stepbystep-exportado .passo-corpo { grid-column: 1 / -1; }
}

/* ------------------------------- impressão -------------------------------- */
@page { size: A4; margin: 15mm; }

@media print {
  /* esconde a interface (do editor e do documento) */
  .no-print, .app-topbar, .app-rodape, .editor-abas, #avisos, .dialogo { display: none !important; }

  html, body { background: #fff !important; color: #1B1B1B !important; }
  .stepbystep-exportado { --sbs-dica-txt: #007A76; --sbs-atencao-txt: #A85F00; --sbs-nota-txt: #7A3F7C; }
  .stepbystep-exportado .cabecalho,
  .stepbystep-exportado main,
  .stepbystep-exportado .rodape { width: auto; margin-inline: 0; }
  .stepbystep-exportado .cabecalho { padding: 0 0 12pt; }
  .stepbystep-exportado .marca svg { --mk: #1B1B1B; }
  .stepbystep-exportado .sobretitulo { margin-top: 14pt; color: #007A76; }
  .stepbystep-exportado .cabecalho h1 { font-size: 26pt; color: #1B1B1B; }
  .stepbystep-exportado .descricao,
  .stepbystep-exportado .passo-descricao,
  .stepbystep-exportado .secao-descricao { color: #3a3a3a; }
  .stepbystep-exportado .meta { color: #1B1B1B; border-color: #1B1B1B; }
  .stepbystep-exportado .rodape { margin-top: 12pt; padding: 8pt 0 0; color: #6b6b6b; border-color: #cfcfcf; }
  .stepbystep-exportado ol.passos { gap: 8pt; }
  .stepbystep-exportado li.passo { grid-template-columns: 40pt minmax(0, 1fr); column-gap: 10pt; padding: 12pt 12pt 12pt 8pt; background: #fff; border-color: #cfcfcf; }
  .stepbystep-exportado li.passo h2 .numero { font-size: 28pt; color: #009994; }
  .stepbystep-exportado li.passo h2 .titulo { font-size: 13pt; color: #1B1B1B; }
  .stepbystep-exportado li.passo h2 .titulo strong { color: #1B1B1B; }
  .stepbystep-exportado .nota { background: #fff; }
  .stepbystep-exportado .nota-texto { color: #1B1B1B; }
  .stepbystep-exportado .passo-imagem { border-color: #cfcfcf; background: #fff; }
  .stepbystep-exportado .passo-imagem img { width: auto; max-width: 100%; max-height: 150mm; margin-inline: auto; }
  .stepbystep-exportado li.secao { margin-top: 8pt; border-top-color: #009994; }
  .stepbystep-exportado li.secao h2.secao { font-size: 16pt; color: #1B1B1B; }

  .passo, .nota { break-inside: avoid; page-break-inside: avoid; }
  .secao { break-after: avoid; page-break-after: avoid; }
  h1, h2 { break-after: avoid; page-break-after: avoid; }
}