﻿/* Entrega Donex Captação · documento técnico. Texto como protagonista, uma cor de destaque. */
/* Identidade visual da Elastre, tema único. As quatro cores são fixas; os tons de apoio saem do creme, do navy,
   do verde e do coral por opacidade. Razões de contraste medidas: ver DECISOES.md e PROVA-SITE.md. */
:root {
  --navy: #1f2547;
  --creme: #f9f7f4;
  --verde: #58d27a;
  --coral: #c55b45;
  --fundo: var(--navy);
  --texto: var(--creme);
  --suave: rgba(249, 247, 244, .75);        /* texto de apoio: 8,42:1 sobre o navy */
  --superficie: rgba(249, 247, 244, .06);   /* fundo de bloco e de botão */
  --superficie-forte: rgba(249, 247, 244, .12); /* hover */
  --borda: rgba(249, 247, 244, .2);         /* linhas e divisões (decorativas) */
  --borda-forte: rgba(249, 247, 244, .5);   /* borda de controle: 4,58:1 sobre o navy */
  --destaque: var(--verde);                 /* links, item ativo, marcadores, estado marcado, foco */
  --destaque-fundo: rgba(88, 210, 122, .14);
  --acento: var(--coral);                   /* só borda e marcador de aviso; nunca cor de texto */
  --acento-fundo: rgba(197, 91, 69, .18);
  --foco: var(--verde);
  --raio: 3px;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
  color-scheme: dark;
}

/* Fonte reserva com as métricas da Poppins (largura medida contra a Arial: 400 = 110,84%, 600 e 700 = 106,4%;
   ascendente 1050, descendente 350 e entrelinha 100 por 1000 da Poppins): enquanto a Poppins carrega, o texto
   ocupa quase o mesmo espaço e a troca de fonte não empurra a página. */
@font-face { font-family: "Poppins reserva"; src: local("Arial"), local("ArialMT"); font-weight: 400;
  size-adjust: 113%; ascent-override: 92.92%; descent-override: 30.97%; line-gap-override: 8.85%; }
@font-face { font-family: "Poppins reserva"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700;
  size-adjust: 106.4%; ascent-override: 98.68%; descent-override: 32.89%; line-gap-override: 9.4%; }

* { box-sizing: border-box; box-shadow: none !important; text-shadow: none !important; }
html { -webkit-text-size-adjust: 100%; color: var(--texto); background: var(--fundo); } /* raiz na paleta: sem o branco padrão do color-scheme dark */
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.65 Poppins, "Poppins reserva", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: normal;
  caret-color: transparent; /* cursor de texto só em campo editável (ver DECISOES.md, cursor piscando) */
}
input, textarea, select, [contenteditable]:not([contenteditable="false"]) { caret-color: var(--texto); }
::selection { background: var(--verde); color: var(--navy); }
strong, b { font-weight: 600; }
h1, h2, h3 { line-height: 1.3; margin: 0; font-weight: 600; }
h1 { font-weight: 700; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); }
h3 { font-size: 1.125rem; margin-top: 2rem; }
p { margin: .75rem 0 0; }
ul, ol { margin: .75rem 0 0; padding-left: 1.25rem; }
li + li { margin-top: .4rem; }
a { color: var(--destaque); text-underline-offset: 2px; }
main li::marker { color: var(--destaque); }
.mono { font-family: var(--mono); font-size: .94em; white-space: nowrap; }
q.tela { quotes: "\201C" "\201D"; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio); }
[tabindex="-1"]:focus { outline: none; }

.pular {
  position: absolute; left: 8px; top: -100px; z-index: 5;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--texto); border-radius: var(--raio);
  display: inline-flex; align-items: center;
}
.pular:focus { top: 8px; }

/* cabeçalho e rodapé */
.topo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1040px; margin: 0 auto; padding: 4px 16px; min-height: 52px;
  border-bottom: 1px solid var(--borda);
}
.marca { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--texto); text-decoration: none; }
.topo-rotulo { color: var(--suave); font-size: .9rem; }
.rodape { max-width: 1040px; margin: 40px auto 0; padding: 16px 16px 40px; border-top: 1px solid var(--borda); color: var(--suave); font-size: .9rem; }
.rodape p { margin: 0; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 8px; }

/* estrutura: índice + coluna de leitura */
.pagina { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.indice { margin: 12px 0 0; }
.indice details { border: 1px solid var(--borda); border-radius: var(--raio); }
.indice summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px;
  cursor: pointer; list-style: none; font-weight: 600;
}
.indice summary::-webkit-details-marker { display: none; }
.indice summary::after { content: "+"; color: var(--suave); font-weight: 400; }
.indice details[open] > summary::after { content: "\2212"; }
.indice details[open] > summary { border-bottom: 1px solid var(--borda); }
#indice-corpo { padding: 6px 8px 10px; }
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice li { margin: 0; }
.indice a {
  display: block; min-height: 44px; padding: 9px 10px;
  color: var(--texto); text-decoration: none; border-left: 2px solid transparent;
}
.indice a:hover { background: var(--superficie); }
.indice a[aria-current] { color: var(--destaque); border-left-color: var(--destaque); font-weight: 600; }
.indice ul ul { margin: 0 0 6px 14px; }
.indice ul ul a { min-height: 44px; font-size: .9rem; color: var(--suave); }
.indice ul ul a[aria-current] { color: var(--destaque); }

main { display: block; min-width: 0; max-width: 720px; padding: 24px 0 8px; }
main > :first-child { margin-top: 0; }
.lead { color: var(--suave); }
.suave { color: var(--suave); }
.pequeno { font-size: .9rem; }

.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin: 0 0 8px; padding-right: 10px; font-weight: 600;
}
.voltar::before { content: "\2190"; }

/* tela inicial: lista de seções */
.secoes { list-style: none; padding: 0; margin: 24px 0 0; }
.secoes li { margin: 0; padding: 12px 0; border-top: 1px solid var(--borda); }
.secoes li:last-child { border-bottom: 1px solid var(--borda); }
.secoes a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; font-weight: 600; }
.secoes p { margin: 0; color: var(--suave); }

/* tabelas e listas de definição */
.tab { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .95rem; }
.tab caption { text-align: left; color: var(--suave); padding-bottom: 4px; }
.tab th, .tab td { padding: 8px 14px 8px 0; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tab thead th { font-size: .85rem; font-weight: 600; color: var(--suave); border-top: 0; border-bottom: 1px solid var(--borda-forte); }
.tab td.num, .tab th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab a { display: inline-block; min-height: 44px; padding: 9px 0; }
.def { margin: 12px 0 0; }
.def > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--borda); }
.def > div:last-child { border-bottom: 1px solid var(--borda); }
.def dt { color: var(--suave); }
.def dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* recolhíveis */
details.caixa { border-top: 1px solid var(--borda); margin-top: 0; }
details.caixa:last-of-type { border-bottom: 1px solid var(--borda); }
details.caixa > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 6px 0; cursor: pointer; list-style: none; font-weight: 600;
}
details.caixa > summary::-webkit-details-marker { display: none; }
details.caixa > summary::after { content: "+"; flex: none; color: var(--suave); font-weight: 400; width: 24px; text-align: center; }
details.caixa[open] > summary::after { content: "\2212"; }
.corpo { padding: 0 0 14px; }
.resumo-meta { display: block; font-weight: 400; color: var(--suave); font-size: .875rem; }
.resumo-bloco { min-width: 0; }

.lista-limpa { list-style: none; padding: 0; margin: 8px 0 0; }
.lista-limpa > li { padding: 10px 0; border-top: 1px solid var(--borda); margin: 0; }
.lista-limpa > li:first-child { border-top: 0; }
.rotulo { margin: 16px 0 0; font-size: .85rem; font-weight: 600; color: var(--suave); }
.ppers { margin: 10px 0 0; padding-left: 0; list-style: none; }
.pers > li { padding: 8px 0; border-top: 1px solid var(--borda); margin: 0; }
.pers > li:first-child { border-top: 0; }
.pers .res { display: block; margin-top: 4px; color: var(--suave); }

/* botões */
.botao, .btn-copia {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--raio);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font: inherit; text-decoration: none; cursor: pointer;
}
.botao:hover, .btn-copia:hover { background: var(--superficie-forte); }
.botao.primario { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.botao.primario:hover { background: rgba(249, 247, 244, .85); border-color: rgba(249, 247, 244, .85); }
.botao[aria-pressed="true"] { border-color: var(--destaque); background: var(--destaque-fundo); color: var(--destaque); font-weight: 600; }
.botao[aria-pressed="true"]::before { content: "\2713"; }
.botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acoes.dupla > .botao { flex: 1 1 140px; }

/* progresso */
.barra { height: 4px; background: var(--borda); margin-top: 8px; }
.barra > i { display: block; height: 100%; background: var(--destaque); }

/* roteiro */
.passo-bloco { margin-top: 20px; }
.passo-bloco h2 { margin-top: 20px; padding-top: 0; border-top: 0; font-size: 1.125rem; }
.passo-bloco p { margin-top: 4px; }
.situacao { color: var(--suave); }
.situacao.ok { color: var(--destaque); font-weight: 600; }
.situacao.dif { color: var(--texto); font-weight: 600; }
.situacao.dif::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--acento); vertical-align: middle; }
.nota { margin-top: 14px; }
.nota label { display: block; font-weight: 600; }
textarea, input[type="search"], select {
  width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 10px;
  font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
textarea { min-height: 112px; resize: vertical; }
.navpasso { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.navpasso .botao { flex: 1 1 140px; }
.aviso-curto { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio); }
.aviso-curto[hidden] { display: none; }

/* feedbacks */
.busca { display: grid; gap: 10px; margin-top: 16px; }
.busca label { font-weight: 600; font-size: .9rem; }
.contagem { margin-top: 10px; color: var(--suave); font-size: .9rem; }
.pedido { display: grid; gap: 4px; }
.pedido-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pedido-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pedido-st { color: var(--suave); font-size: .9rem; }
.pedido p { margin: 0; }
.conferencia { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio); color: var(--suave); font-size: .9rem; }
.modulo-grupo h2 { font-size: 1.125rem; margin-top: 1.75rem; }

/* pendências */
.check { list-style: none; padding: 0; margin: 8px 0 0; }
.check li { margin: 0; border-top: 1px solid var(--borda); }
.check label { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; }
.check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check .caixinha { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1px solid var(--borda-forte); border-radius: 2px; display: grid; place-items: center; }
.check input:checked + .caixinha { border-color: var(--destaque); background: var(--destaque-fundo); }
.check input:checked + .caixinha::after { content: "\2713"; color: var(--destaque); font-weight: 700; line-height: 1; }
.check input:focus-visible + .caixinha { outline: 2px solid var(--foco); outline-offset: 2px; }
.check input:checked ~ .texto-check { color: var(--suave); }

/* contas */
.linha-copia { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linha-copia code { font: .95em var(--mono); white-space: nowrap; overflow-wrap: normal; }
.alerta { margin-top: 16px; padding: 10px 14px; border: 1px solid var(--acento); border-left-width: 4px; border-radius: var(--raio); background: var(--acento-fundo); color: var(--texto); }
.alerta p { margin: 0; }
.tab td .btn-copia { min-width: 76px; }
/* «Copiar» e «Copiado» ocupam a mesma célula da grade: a largura do botão não muda ao trocar o texto */
.btn-copia { display: inline-grid; place-items: center; flex: none; }
.btn-copia > span { grid-area: 1 / 1; }
.btn-copia .rc-feito, .btn-copia.copiado .rc-acao { visibility: hidden; }
.btn-copia.copiado .rc-feito { visibility: visible; }

video { display: block; width: 100%; margin-top: 8px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 0; }

/* celular: tabelas viram linhas empilhadas */
@media (max-width: 719px) {
  .tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tab, .tab tbody, .tab tr, .tab td, .tab th { display: block; width: 100%; }
  .tab tr { padding: 8px 0; border-top: 1px solid var(--borda); }
  .tab td, .tab th { border: 0; padding: 2px 0; }
  .tab td[data-r]::before { content: attr(data-r) ": "; color: var(--suave); white-space: nowrap; }
  .tab td.acao-copia { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px; }
}

/* computador: índice fixo na coluna própria */
@media (min-width: 1024px) {
  .pagina { display: grid; grid-template-columns: 232px minmax(0, 720px); column-gap: 56px; align-items: start; }
  .indice { position: sticky; top: 16px; margin: 24px 0 0; max-height: calc(100vh - 32px); overflow-y: auto; }
  .indice details { border: 0; }
  .indice summary { display: none; }
  #indice-corpo { padding: 0; }
  .indice ul ul { margin-bottom: 0; }
  .indice a { min-height: 32px; padding: 4px 10px; line-height: 1.45; }
  .indice ul ul a { min-height: 28px; padding: 3px 10px; font-size: .875rem; line-height: 1.4; } /* Poppins é mais larga: o índice do roteiro cabe em 1280x720 sem rolar por dentro */
  .rodape, .topo { padding-left: 16px; }
}
@media (min-width: 720px) {
  h1 { font-size: 1.875rem; }
  .busca { grid-template-columns: 1fr 240px; align-items: end; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* impressão: papel branco, sem fundo navy (não é tema de tela) */
@media print {
  :root { --fundo: #fff; --texto: #1f2547; --suave: #1f2547; --borda: #b5b8c6; --borda-forte: #1f2547; --destaque: #1f2547; --superficie: #fff; }
  .indice, .topo, .acoes, .navpasso, .progresso-topo { display: none; } .pagina { display: block; }
}
::placeholder { color: var(--suave); opacity: 1; }
.tab td, .tab th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.tab a { min-width: 44px; }

/* palavras nunca partidas; botões em uma linha; tabela de contas sempre empilhada */
button, .botao, .btn-copia, code, .marca, .nq, .mono { white-space: nowrap; }
.video-desc { margin: 8px 0 4px; }
.tab.pilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tab.pilha, .tab.pilha tbody, .tab.pilha tr, .tab.pilha td, .tab.pilha th { display: block; width: 100%; }
.tab.pilha tr { padding: 8px 0; border-top: 1px solid var(--borda); }
.tab.pilha td, .tab.pilha th { border: 0; padding: 2px 0; }
.tab.pilha td[data-r]::before { content: attr(data-r) ": "; color: var(--suave); white-space: nowrap; flex: none; }
/* sem largura para rótulo, e-mail e botão na mesma linha, o e-mail e o botão descem para a linha de baixo, inteiros */
.tab.pilha td.acao-copia { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px; }

/* topo do roteiro: progresso salvo neste navegador, envio a qualquer momento */
.progresso-topo { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.progresso-topo > p { margin: 0; }
.progresso-topo .acoes { margin-top: 10px; }
.aviso-armazenamento { margin-top: 10px !important; padding: 6px 10px; border-left: 3px solid var(--acento); background: var(--acento-fundo); font-size: .9rem; }
.aviso-armazenamento[hidden] { display: none; }
.progresso-topo > .aviso-anonima { margin-top: 4px; }
