/* Componentes do modelo aprovado D01 (docs/design-system/fontes/acervo-anterior/proposta-design-rotas.html,
   aprovado pelo dono em 31/10/2026 19:33), seção 6 «Diálogo de curadoria — Depois», copiados do arquivo aprovado.
   Ajustes posteriores já determinados, cada um marcado: CX02 (título 18px/700 da família do corpo),
   CX08 (header fixo, só o conteúdo rola; pedido P5 de 03/11) e CX10 (× solto só na edição).
   Os tokens (--papel, --tinta, --marca…) vêm do CSS de produção do Rotas, nos dois temas. */

/* Botão */
.botao{display:inline-flex;align-items:center;gap:8px;min-height:var(--alvo);padding:0 16px;border-radius:var(--raio-controle);border:1px solid var(--linha-forte);background:var(--superficie);color:var(--tinta);font:600 14px/20px var(--font-ui);cursor:pointer;transition:background .12s,transform .12s}
.botao:hover{transform:translateY(-1px)}
.botao:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.botao--primario{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.botao--primario:hover{background:var(--marca-hover);border-color:var(--marca-hover)}
.botao--secundario:hover{background:var(--marca-suave);border-color:var(--marca)}
.botao--terciario{border-color:transparent;box-shadow:none;background:transparent}
.botao--terciario:hover{background:var(--marca-suave)}
.botao--pequeno{min-height:32px;padding:0 12px;font-size:13px}
.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Selo, selo de estado e chip removível */
.selo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:500 12px/1 var(--font-ui);color:var(--tinta-sobre-pastel);background:var(--pastel-lilas);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selo--menta{background:var(--pastel-menta)} .selo--sol{background:var(--pastel-sol)} .selo--neutro{background:var(--marca-suave);color:var(--tinta)}
.chip-remover{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 14px;border-radius:999px;border:0;background:var(--pastel-lilas);font:500 14px/1 var(--font-ui);color:var(--tinta-sobre-pastel);transition:box-shadow .12s}
.chip-remover:hover{box-shadow:inset 0 0 0 99px rgba(13,15,34,.08)}
.chip-remover button{width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--tinta-sobre-pastel);cursor:pointer;font:400 16px/1 var(--font-ui);display:grid;place-items:center}
.chip-remover button:focus-visible{outline:3px solid var(--marca);outline-offset:2px;border-radius:999px}
.linha-selos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Tooltip: hover e foco, nunca title */
.tt{position:relative;display:inline-flex}
.tt>[role="tooltip"]{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--tinta);color:var(--papel);font:400 12px/16px var(--font-ui);padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s .3s;z-index:2}
.tt:hover>[role="tooltip"],.tt:focus-within>[role="tooltip"]{opacity:1}

/* Campo */
.campo{min-height:var(--alvo);padding:0 12px;border-radius:var(--raio-controle);border:1px solid var(--linha-forte);background:var(--superficie);font:400 14px var(--font-ui);color:var(--tinta);width:100%}
.campo::placeholder{color:var(--tinta-atenuada)}
.campo:focus-visible{outline:3px solid var(--marca);outline-offset:2px;border-color:var(--marca)}

/* Stepper */
.stepper{display:flex;gap:4px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font:500 14px/20px var(--font-ui);color:var(--tinta-atenuada);border:1px solid transparent}
.stepper li[aria-current="step"]{background:var(--marca-suave);color:var(--tinta);border:1px solid var(--marca)}
.stepper .num{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--superficie);border:1px solid var(--linha-forte);color:var(--tinta)}
.stepper li[aria-current="step"] .num{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.stepper li.feito .num{background:var(--pastel-menta);border-color:transparent;color:var(--tinta-sobre-pastel)}

/* Diálogo, colunas e rodapé */
.dialogo{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);box-shadow:0 8px 24px rgba(13,15,34,.08);padding:24px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.col{border:1px solid var(--linha);border-radius:12px;padding:16px;background:var(--papel)}
.col .cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
/* CX02 (03/11): título 18px, peso 700, família do corpo; substitui o rótulo de 12px em caixa alta do D01. */
.col .cab h4{margin:0;font:700 18px/1.3 var(--font-ui);color:var(--tinta)}
.col p{margin:0 0 12px;font-size:14px;color:var(--tinta-atenuada);overflow-wrap:anywhere}
.rodape{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--linha);flex-wrap:wrap}

/* CX08 (pedido P5 de 03/11): header fixo; só o conteúdo central rola; o rodapé não cobre o texto. */
.dialogo{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;max-height:calc(100dvh - 48px)}
.dialogo-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.dialogo-cab h2{margin:0;font:600 24px/1.25 var(--font-ui);color:var(--tinta)}
.dialogo-cab p{margin:4px 0 0;font-size:14px;color:var(--tinta-atenuada)}
.dialogo-corpo{overflow:auto;min-height:0;padding:4px}

/* RB3 (medido pela rotas-c5, SSM 98ddc136): passo do stepper com 6px entre texto e borda; mínimo 8px. */
.stepper li{padding:8px 12px}
/* RB2 em 320 px (SSM 98ddc136): em tela estreita a rolagem interna escondia caixas sob o rodapé.
   Até 640 px o diálogo cresce com o conteúdo e a página rola; rodapé depois do conteúdo, sem cobrir nada. */
@media (max-width:640px){.dialogo{display:block;max-height:none}.dialogo-corpo{overflow:visible;margin:16px 0}.rodape{margin-top:0}}