/* Estilos do sistema. TODO valor visual (cor, sombra, raio, fonte, espaço, duração, camada) vem de tokens.css.
   Aqui não há cor fixa: a auditoria (tests/test_design_system.py) reprova qualquer cor em hexadecimal ou função de cor neste arquivo.
   Exceção técnica: media queries não aceitam var(); usam os números de --quebra-* (480, 640, 900, 1200).
   Organização: 1 base · 2 casca do app · 3 componentes · 4 padrões de tela · 5 utilidades. */

/* ============================================================ 1. base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: var(--t-15); line-height: var(--altura-texto); color: var(--texto);
  background: var(--fundo); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }
a { color: var(--destaque); text-underline-offset: var(--esp-05); }
a:hover { color: var(--destaque-forte); }
h1 { font-size: var(--t-24); font-weight: var(--peso-semi); letter-spacing: var(--espaco-letra-titulo); line-height: var(--altura-titulo); margin: 0 0 var(--esp-4); }
h1 small { font-size: var(--t-15); font-weight: var(--peso-medio); color: var(--texto-3); }
h2 { font-size: var(--t-18); font-weight: var(--peso-semi); letter-spacing: var(--espaco-letra-titulo); line-height: var(--altura-titulo); margin: 0 0 var(--esp-3); }
h3 { font-size: var(--t-16); font-weight: var(--peso-semi); margin: var(--esp-4) 0 var(--esp-2); }
p { margin: 0 0 var(--esp-3); }
small, .pequeno { font-size: var(--t-13); color: var(--texto-3); }
code { font-size: var(--t-13); background: var(--superficie-3); padding: 0 var(--esp-15); border-radius: var(--raio-sm); }
code.quebra { word-break: break-all; }
hr { border: 0; border-top: var(--borda-fina) solid var(--borda); margin: var(--esp-5) 0; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-sm); }
.pular { position: absolute; left: -9999px; top: 0; z-index: var(--z-toast); background: var(--superficie); padding: var(--esp-25) var(--esp-4); }
.pular:focus { left: var(--esp-4); top: var(--esp-4); }
.num, .numeros strong, .kpi-valor, td.num { font-variant-numeric: var(--numeros); white-space: nowrap; }
.justificado, .texto-termo, .cartao.texto, .texto-longo p { text-align: justify; hyphens: auto; line-height: var(--altura-longa); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================ 2. casca do app (menu lateral, cabeçalho, barra inferior) */
.app { display: grid; grid-template-columns: var(--lateral-largura) 1fr; min-height: 100vh; transition: grid-template-columns var(--dur-media) var(--curva-padrao); }
.app.recolhida { grid-template-columns: var(--lateral-recolhida) 1fr; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--lateral-fundo); color: var(--lateral-texto);
  display: flex; flex-direction: column; padding: var(--esp-3) var(--esp-25); z-index: var(--z-lateral); scrollbar-width: thin; }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-15); padding: var(--esp-1) var(--esp-15) var(--esp-4); }
.marca { display: flex; align-items: center; gap: var(--esp-25); color: var(--sobre-marca); text-decoration: none; min-width: 0; }
.marca:hover { color: var(--sobre-marca); }
.marca-simbolo { flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--raio-md); display: grid; place-items: center;
  font-weight: var(--peso-negrito); font-size: var(--t-13); color: var(--sobre-simbolo); background: var(--gradiente-simbolo); }
.marca-texto { display: flex; flex-direction: column; line-height: var(--altura-titulo); font-weight: var(--peso-semi); white-space: nowrap; }
.marca-texto small { color: var(--lateral-texto); font-weight: var(--peso-medio); font-size: var(--t-12); }
.lateral nav { display: flex; flex-direction: column; gap: var(--esp-px); }
.lateral .grupo { font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaco-letra-caixa-alta); color: var(--lateral-texto); opacity: .75;
  padding: var(--esp-4) var(--esp-3) var(--esp-15); white-space: nowrap; }
.lateral nav a, .lateral nav button { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-sm);
  color: var(--lateral-texto); text-decoration: none; font-size: var(--t-15); font-weight: var(--peso-medio); white-space: nowrap; background: none; border: 0;
  font-family: inherit; cursor: pointer; width: 100%; text-align: left; min-height: var(--controle-md); margin: 0; }
.lateral nav a:hover, .lateral nav button:hover { background: var(--lateral-ativo); color: var(--lateral-realce); }
.lateral nav a.ativo { background: var(--lateral-ativo); color: var(--lateral-realce); box-shadow: inset var(--borda-media) 0 0 var(--lateral-marca); }
.lateral .ico { width: var(--ico-md); height: var(--ico-md); }
.lateral .contador { margin-left: auto; background: var(--lateral-alerta); color: var(--lateral-alerta-texto); font-size: var(--t-12); font-weight: var(--peso-negrito);
  padding: 0 var(--esp-15); border-radius: var(--raio-pill); }
.lateral-rodape { margin-top: auto; padding-top: var(--esp-4); }
.app.recolhida .lateral .rotulo, .app.recolhida .lateral .grupo, .app.recolhida .marca-texto, .app.recolhida .lateral .contador { display: none; }
.app.recolhida .lateral nav a, .app.recolhida .lateral nav button { justify-content: center; }
.app.recolhida .lateral-topo { flex-direction: column; }
.area { min-width: 0; display: flex; flex-direction: column; }
.cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); height: var(--cabecalho-altura); display: flex; align-items: center; gap: var(--esp-3);
  padding: 0 var(--esp-5); background: var(--cabecalho-fundo); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--borda-fina) solid var(--borda); }
.busca-global { flex: 1; max-width: 520px; position: relative; }
.busca-global .ico { position: absolute; left: var(--esp-3); top: 50%; transform: translateY(-50%); width: var(--ico-sm); height: var(--ico-sm); color: var(--texto-3); }
.busca-global input { margin: 0; padding: var(--esp-2) var(--esp-10) var(--esp-2) var(--esp-10); background: var(--superficie-3); border-color: transparent; border-radius: var(--raio-pill); }
.busca-global input:focus { background: var(--superficie); border-color: var(--borda-forte); }
.busca-global kbd { position: absolute; right: var(--esp-3); top: 50%; transform: translateY(-50%); font-family: inherit; font-size: var(--t-12);
  color: var(--texto-3); border: var(--borda-fina) solid var(--borda-forte); border-radius: var(--raio-sm); padding: 0 var(--esp-15); }
.cabecalho .direita { margin-left: auto; display: flex; align-items: center; gap: var(--esp-15); }
.icone-botao { display: inline-grid; place-items: center; width: var(--controle-md); height: var(--controle-md); min-height: 0; padding: 0; margin: 0;
  border-radius: var(--raio-md); border: var(--borda-fina) solid transparent; background: transparent; color: inherit; cursor: pointer; }
.icone-botao:hover { background: var(--superficie-3); }
.lateral .icone-botao { color: var(--lateral-texto); } .lateral .icone-botao:hover { background: var(--lateral-ativo); color: var(--lateral-realce); }
.icone-botao .ico { width: var(--ico-md); height: var(--ico-md); }
.tema-botao .so-escuro { display: none; }
:root[data-tema="escuro"] .tema-botao .so-escuro { display: block; } :root[data-tema="escuro"] .tema-botao .so-claro { display: none; }
.usuario-menu { position: relative; }
.usuario-menu summary { list-style: none; display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; padding: var(--esp-1) var(--esp-15) var(--esp-1) var(--esp-1); border-radius: var(--raio-pill); }
.usuario-menu summary::-webkit-details-marker { display: none; }
.usuario-menu summary:hover { background: var(--superficie-3); }
.usuario-menu .nome { display: flex; flex-direction: column; line-height: var(--altura-justa); font-size: var(--t-13); font-weight: var(--peso-semi); }
.usuario-menu .nome small { font-weight: var(--peso-medio); font-size: var(--t-12); }
.menu-suspenso { position: absolute; right: 0; top: calc(100% + var(--esp-15)); min-width: var(--menu-largura); background: var(--superficie); border: var(--borda-fina) solid var(--borda);
  border-radius: var(--raio-md); box-shadow: var(--sombra-3); padding: var(--esp-15); z-index: var(--z-menu); }
.menu-suspenso.largo { min-width: 290px; }
.menu-suspenso a, .menu-suspenso button { display: flex; align-items: center; gap: var(--esp-25); width: 100%; padding: var(--esp-2) var(--esp-25); margin: 0; border: 0;
  border-radius: var(--raio-sm); background: none; color: var(--texto); font: inherit; text-decoration: none; cursor: pointer; text-align: left; min-height: 0; }
.menu-suspenso a:hover, .menu-suspenso button:hover { background: var(--superficie-3); }
.menu-suspenso .ico { width: var(--ico-sm); height: var(--ico-sm); color: var(--texto-3); }
.menu-suspenso .nota { padding: var(--esp-15) var(--esp-25) 0; margin: 0; }
.conteudo { width: 100%; max-width: var(--conteudo-max); margin: 0 auto; padding: var(--esp-6) var(--esp-5) var(--esp-8); flex: 1; }
.conteudo.largo { max-width: var(--conteudo-largo); }
.conteudo.cheio { max-width: none; padding: 0; position: relative; }
.rodape { text-align: center; font-size: var(--t-12); color: var(--texto-3); padding: var(--esp-4) var(--esp-4) var(--esp-6); }
.rodape a { color: inherit; }
.so-celular { display: none; }
.barra-inferior { display: none; }
.veu { display: none; }

@media (max-width: 899px) {
  .app, .app.recolhida { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-105%); transition: transform var(--dur-media) var(--curva-padrao); box-shadow: var(--sombra-3); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto .veu { display: block; position: fixed; inset: 0; background: var(--veu); z-index: var(--z-veu-menu); }
  .app .lateral .rotulo, .app .lateral .grupo, .app .marca-texto { display: revert; }
  .lateral .recolher { display: none; }
  .so-celular { display: inline-grid; }
  .cabecalho { padding: 0 var(--esp-3); gap: var(--esp-2); }
  .busca-global kbd, .usuario-menu .nome { display: none; }
  .conteudo { padding: var(--esp-4) var(--esp-4) 104px; }
  .rodape { padding-bottom: 96px; }
  .barra-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cabecalho);
    background: var(--superficie); border-top: var(--borda-fina) solid var(--borda); padding: var(--esp-15) var(--esp-1) calc(var(--esp-15) + env(safe-area-inset-bottom));
    box-shadow: var(--sombra-barra-inferior); }
  .barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: var(--esp-05); min-height: var(--alvo-toque); justify-content: center;
    color: var(--texto-3); text-decoration: none; font-size: var(--t-12); font-weight: var(--peso-semi); border-radius: var(--raio-md); }
  .barra-inferior a.ativo { color: var(--primaria); }
  .barra-inferior .ico { width: var(--ico-lg); height: var(--ico-lg); }
  .barra-inferior a.central { position: relative; color: var(--primaria); }
  .barra-inferior a.central span.bola { width: 58px; height: 58px; margin-top: -26px; border-radius: var(--raio-circulo); display: grid; place-items: center;
    background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--sombra-cta); border: var(--borda-grossa) solid var(--superficie); }
  .barra-inferior a.central .ico { width: var(--ico-xl); height: var(--ico-xl); }
  .esconde-celular { display: none !important; }
}

/* ============================================================ 3. componentes */
/* --- campo de texto, select, área de texto */
label { display: block; margin: var(--esp-3) 0; font-weight: var(--peso-semi); font-size: var(--t-13); color: var(--texto); }
label small { font-weight: var(--peso-medio); }
label small.bloco { display: block; }
input, select, textarea { display: block; width: 100%; margin-top: var(--esp-15); padding: var(--esp-25) var(--esp-3); font: inherit; font-size: var(--t-16); color: var(--texto);
  border: var(--borda-fina) solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); min-height: var(--controle-md);
  transition: border-color var(--dur-rapida) var(--curva-padrao), box-shadow var(--dur-rapida) var(--curva-padrao); }
input:hover, select:hover, textarea:hover { border-color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--destaque); box-shadow: var(--foco); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-3); color: var(--texto-3); cursor: not-allowed; }
input[readonly] { background: var(--superficie-2); }
input[type="file"] { padding: var(--esp-2); }
select[multiple] { padding: var(--esp-1); }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
.campo-invalido input, .campo-invalido select, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { display: block; color: var(--erro); font-size: var(--t-12); font-weight: var(--peso-semi); margin-top: var(--esp-1); }
.ajuda-campo { display: block; color: var(--texto-3); font-size: var(--t-12); font-weight: var(--peso-medio); margin-top: var(--esp-1); }
.campo-ok input { border-color: var(--sucesso); }

/* --- checkbox e radio */
input[type="checkbox"], input[type="radio"] { width: var(--ico-md); height: var(--ico-md); min-height: 0; display: inline-block; margin: 0; padding: 0; accent-color: var(--primaria); flex: none; cursor: pointer; }
.escolha { display: flex; align-items: center; gap: var(--esp-25); font-weight: var(--peso-medio); font-size: var(--t-15); margin: var(--esp-2) 0; min-height: var(--alvo-toque); cursor: pointer; }
.escolha:has(input:disabled) { color: var(--texto-3); cursor: not-allowed; }
.grupo-escolha { border: 0; padding: 0; margin: var(--esp-3) 0; box-shadow: none; background: none; }
.grupo-escolha legend { font-size: var(--t-13); padding: 0; }
.grupo-escolha.linha { display: flex; gap: var(--esp-4); flex-wrap: wrap; }

/* --- botão: primário, secundário, fantasma, perigo; tamanhos sm, md, lg */
button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--controle-md); padding: var(--esp-2) var(--esp-4); margin: var(--esp-05) 0;
  font: inherit; font-size: var(--t-15); font-weight: var(--peso-semi); line-height: var(--altura-justa); border-radius: var(--raio-sm); border: var(--borda-fina) solid var(--borda-forte);
  background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; position: relative;
  transition: background var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao), transform var(--dur-rapida) var(--curva-padrao); }
button:hover, .botao:hover { background: var(--superficie-3); color: var(--texto); }
button:active, .botao:active { transform: translateY(var(--esp-px)); }
button .ico, .botao .ico { width: var(--ico-sm); height: var(--ico-sm); }
button.primario, .botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
button.primario:hover, .botao.primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); color: var(--sobre-primaria); }
button.primario:active, .botao.primario:active { background: var(--primaria-ativa); }
button.secundario, .botao.secundario { background: var(--destaque-fundo); border-color: transparent; color: var(--realce-texto); }
button.secundario:hover, .botao.secundario:hover { background: var(--destaque); color: var(--sobre-destaque); }
button.perigo, .botao.perigo { color: var(--erro); border-color: var(--erro); background: var(--superficie); }
button.perigo:hover, .botao.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
button.perigo.cheio, .botao.perigo.cheio { background: var(--erro); color: var(--texto-inverso); }
button.fantasma, .botao.fantasma { border-color: transparent; background: transparent; }
button.fantasma:hover, .botao.fantasma:hover { background: var(--superficie-3); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--destaque); font-weight: var(--peso-medio); text-decoration: underline; }
button[disabled], .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.botao.sm, button.sm, .pequeno-botao { min-height: var(--controle-sm); padding: var(--esp-1) var(--esp-3); font-size: var(--t-13); }
.botao.lg, button.lg { min-height: var(--controle-lg); padding: var(--esp-3) var(--esp-6); font-size: var(--t-16); border-radius: var(--raio-md); }
.grande { width: 100%; min-height: var(--controle-lg); font-size: var(--t-16); border-radius: var(--raio-md); }
.botao.atalho { min-height: 96px; font-size: var(--t-18); }
/* carregando: o texto some, o giro aparece, o botão fica inerte (aria-busy="true") */
button[aria-busy="true"], .botao[aria-busy="true"] { color: transparent !important; pointer-events: none; }
button[aria-busy="true"]::after, .botao[aria-busy="true"]::after { content: ""; position: absolute; width: var(--ico-sm); height: var(--ico-sm); border-radius: var(--raio-circulo);
  border: var(--borda-media) solid var(--texto-3); border-top-color: var(--texto); animation: giro var(--dur-lenta) linear infinite; }
button.primario[aria-busy="true"]::after, .botao.primario[aria-busy="true"]::after { border-color: var(--sobre-primaria); border-top-color: transparent; }
@keyframes giro { to { transform: rotate(360deg); } }
form.inline { display: inline; }
label.inline { display: inline-flex; align-items: center; gap: var(--esp-15); margin: var(--esp-05) var(--esp-15) var(--esp-05) 0; }
label.inline select { width: auto; margin: 0; }

/* --- cartão, fieldset, caixa de consentimento */
.cartao, fieldset, details.filtros, .bloco-cartao { background: var(--superficie); border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }
.cartao { padding: var(--esp-5); margin: 0 0 var(--esp-4); }
.cartao.plano { box-shadow: var(--sombra-0); }
.cartao.estreito { max-width: 440px; margin: var(--esp-8) auto; }
.cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.cartao-cabecalho h2 { margin: 0; }
fieldset { margin: 0 0 var(--esp-4); padding: var(--esp-4) var(--esp-5) var(--esp-5); min-width: 0; }
legend { font-weight: var(--peso-semi); padding: 0 var(--esp-15); font-size: var(--t-16); }
fieldset.destaque, .caixa.destaque { border-color: var(--destaque); background: var(--realce); }
fieldset.desligado { opacity: .55; }
.caixa { display: flex; gap: var(--esp-3); align-items: flex-start; font-weight: var(--peso-normal); font-size: var(--t-15); padding: var(--esp-35) var(--esp-4);
  border: var(--borda-fina) solid var(--borda-forte); border-radius: var(--raio-md); background: var(--superficie); cursor: pointer;
  transition: border-color var(--dur-rapida) var(--curva-padrao), background var(--dur-rapida) var(--curva-padrao); }
.caixa:hover { border-color: var(--destaque); }
.caixa input { width: var(--ico-lg); height: var(--ico-lg); margin: var(--esp-05) 0 0; }
.caixa.obrigatoria { border-color: var(--primaria); }
.caixa:has(input:checked) { background: var(--realce); border-color: var(--destaque); }
.texto-termo { max-height: 18rem; overflow: auto; padding: var(--esp-35) var(--esp-4); background: var(--superficie-2); border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-md); font-size: var(--t-15); }
.duas { display: grid; grid-template-columns: 1fr; gap: 0 var(--esp-4); }
@media (min-width: 640px) { .duas { grid-template-columns: 1fr 1fr; } }

/* --- aviso em linha (feedback persistente) */
.aviso { display: flex; gap: var(--esp-25); align-items: flex-start; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); margin: 0 0 var(--esp-4); font-size: var(--t-15);
  background: var(--sucesso-fundo); color: var(--texto); border: var(--borda-fina) solid var(--sucesso); }
.aviso .ico { width: var(--ico-md); height: var(--ico-md); margin-top: var(--esp-05); color: var(--sucesso); }
.aviso.erro { background: var(--erro-fundo); border-color: var(--erro); } .aviso.erro .ico { color: var(--erro); }
.aviso.alerta { background: var(--alerta-fundo); border-color: var(--alerta); } .aviso.alerta .ico { color: var(--alerta); }
.aviso.info { background: var(--info-fundo); border-color: var(--info); } .aviso.info .ico { color: var(--info); }
.aviso ul { margin: var(--esp-05) 0; padding-left: var(--esp-5); }

/* --- chip e selo */
.chip { display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-05) var(--esp-25); border-radius: var(--raio-pill); font-size: var(--t-12); font-weight: var(--peso-semi);
  background: var(--superficie-3); color: var(--texto-2); white-space: nowrap; border: var(--borda-fina) solid transparent; line-height: var(--altura-texto); }
.chip .ico { width: var(--ico-xs); height: var(--ico-xs); }
.chip .ponto { width: var(--esp-2); height: var(--esp-2); border-radius: var(--raio-circulo); background: currentColor; }
.chip.marca { background: var(--primaria); color: var(--sobre-primaria); }
.chip.destaque { background: var(--destaque-fundo); color: var(--realce-texto); }
.chip.ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.chip.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.chip.erro { background: var(--erro-fundo); color: var(--erro); }
.chip.info { background: var(--info-fundo); color: var(--info); }
.chip.contorno { background: transparent; border-color: var(--borda-forte); }
.chip.n1 .ponto { background: var(--nivel-1); } .chip.n2 .ponto { background: var(--nivel-2); } .chip.n3 .ponto { background: var(--nivel-3); }
.chip.n4 { background: var(--destaque-fundo); color: var(--realce-texto); } .chip.n4 .ponto { background: var(--nivel-4); }
.etiqueta { font-size: var(--t-12); padding: 0 var(--esp-15); border-radius: var(--raio-sm); font-weight: var(--peso-semi); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }

/* --- avatar de iniciais */
.avatar { flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--raio-circulo); display: inline-grid; place-items: center; font-size: var(--t-12);
  font-weight: var(--peso-negrito); color: var(--sobre-primaria); background: var(--primaria); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.destaque { color: var(--realce-texto); background: var(--destaque-fundo); }
.avatar.cinza { color: var(--texto-3); background: var(--superficie-3); }
.avatar.sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--t-12); }
.avatar.lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--t-15); border-radius: var(--raio-lg); }
.avatar.grande, .avatar.xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: var(--t-28); border-radius: var(--raio-xl); }

/* --- tabela */
.tabela-rolavel { overflow-x: auto; border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); background: var(--superficie); box-shadow: var(--sombra-1); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-15); }
th { position: sticky; top: 0; z-index: var(--z-base); background: var(--superficie-2); color: var(--texto-3); font-size: var(--t-12); font-weight: var(--peso-semi); text-transform: uppercase;
  letter-spacing: var(--espaco-letra-caixa-alta); text-align: left; padding: var(--esp-25) var(--esp-35); border-bottom: var(--borda-fina) solid var(--borda); white-space: nowrap; }
td { padding: var(--esp-25) var(--esp-35); border-bottom: var(--borda-fina) solid var(--borda); text-align: left; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--superficie-2); }
tr.marcado td { background: var(--alerta-fundo); }
tr.bloqueado td { background: var(--superficie-3); color: var(--texto-3); }
tr.clicavel { cursor: pointer; }
th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--esp-1); }
th a .ico { width: var(--ico-xs); height: var(--ico-xs); opacity: .5; } th a.ativo { color: var(--texto); } th a.ativo .ico { opacity: 1; }
.celula-pessoa { display: flex; align-items: center; gap: var(--esp-3); min-width: 200px; }
.celula-pessoa strong { display: block; font-weight: var(--peso-semi); }
.celula-pessoa small { display: block; }

/* --- barra de progresso (largura vem do dado: style="--v: 40%") */
.barra-col { width: 35%; }
.barra { display: inline-block; height: var(--esp-2); width: var(--v, 0); background: var(--apoio); border-radius: var(--raio-pill); min-width: var(--esp-05); vertical-align: middle; }
.progresso { height: var(--esp-2); background: var(--superficie-3); border-radius: var(--raio-pill); overflow: hidden; }
.progresso > span { display: block; height: 100%; width: var(--v, 0); background: var(--gradiente-progresso); border-radius: inherit; transition: width var(--dur-lenta) var(--curva-padrao); }
.progresso.fino { height: var(--esp-1); }
.progresso.curto { max-width: 180px; margin-top: var(--esp-1); }

/* --- filtros recolhíveis */
details.filtros { padding: 0; margin: 0 0 var(--esp-4); box-shadow: var(--sombra-0); }
details.filtros summary { cursor: pointer; font-weight: var(--peso-semi); padding: var(--esp-3) var(--esp-4); display: flex; align-items: center; gap: var(--esp-2); list-style: none; min-height: var(--alvo-toque); }
details.filtros summary::-webkit-details-marker { display: none; }
details.filtros summary .ico { width: var(--ico-sm); height: var(--ico-sm); color: var(--texto-3); }
details.filtros summary .contagem { margin-left: auto; }
details.filtros[open] summary { border-bottom: var(--borda-fina) solid var(--borda); }
details.filtros form { padding: var(--esp-1) var(--esp-4) var(--esp-4); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 var(--esp-35); }
.grade .acoes { grid-column: 1 / -1; display: flex; gap: var(--esp-25); align-items: center; padding-top: var(--esp-15); }

/* --- abas */
.abas { display: flex; gap: var(--esp-1); flex-wrap: wrap; border-bottom: var(--borda-fina) solid var(--borda); margin: 0 0 var(--esp-4); padding: 0; }
.abas a, .abas button { display: inline-flex; align-items: center; gap: var(--esp-15); padding: var(--esp-25) var(--esp-35); margin: 0 0 calc(-1 * var(--borda-fina)); border: 0;
  border-bottom: var(--borda-media) solid transparent; border-radius: 0; background: none; color: var(--texto-2); font-size: var(--t-15); font-weight: var(--peso-semi);
  text-decoration: none; min-height: var(--alvo-toque); }
.abas a:hover, .abas button:hover { color: var(--texto); background: none; }
.abas a.ativa, .abas button[aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); }
:root[data-tema="escuro"] .abas a.ativa, :root[data-tema="escuro"] .abas button[aria-selected="true"] { color: var(--destaque); border-bottom-color: var(--destaque); }
.abas.pilulas { border: 0; gap: var(--esp-15); }
.abas.pilulas a { border: var(--borda-fina) solid var(--borda-forte); border-radius: var(--raio-pill); padding: var(--esp-1) var(--esp-3); font-size: var(--t-13); margin: 0; min-height: var(--controle-sm); }
.abas.pilulas a.ativa { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }

/* --- toast */
.toasts { position: fixed; right: var(--esp-4); bottom: var(--esp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--esp-2); max-width: min(420px, calc(100vw - var(--esp-8))); }
.toast { display: flex; gap: var(--esp-25); align-items: flex-start; padding: var(--esp-35) var(--esp-4); border-radius: var(--raio-md); background: var(--superficie); color: var(--texto);
  border: var(--borda-fina) solid var(--borda); border-left: var(--borda-grossa) solid var(--sucesso); box-shadow: var(--sombra-3); animation: entra var(--dur-media) var(--curva-entrada); font-size: var(--t-15); }
.toast .ico { width: var(--ico-md); height: var(--ico-md); margin-top: var(--esp-05); color: var(--sucesso); }
.toast.erro { border-left-color: var(--erro); } .toast.erro .ico { color: var(--erro); }
.toast.alerta { border-left-color: var(--alerta); } .toast.alerta .ico { color: var(--alerta); }
.toast.info { border-left-color: var(--info); } .toast.info .ico { color: var(--info); }
.toast button { margin: calc(-1 * var(--esp-1)) calc(-1 * var(--esp-15)) 0 auto; min-height: 0; width: var(--controle-sm); height: var(--controle-sm); padding: 0; border: 0; background: none; flex: none; }
.toast.saindo { opacity: 0; transform: translateY(var(--esp-2)); transition: opacity var(--dur-media) var(--curva-saida), transform var(--dur-media) var(--curva-saida); }
.toasts.estatico { position: static; max-width: none; }
.toasts.estatico .toast { animation: none; }
@keyframes entra { from { opacity: 0; transform: translateY(var(--esp-2)); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .toasts { left: var(--esp-4); right: var(--esp-4); bottom: 88px; max-width: none; } }

/* --- skeleton */
.esqueleto { position: relative; overflow: hidden; background: var(--superficie-3); border-radius: var(--raio-sm); }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--brilho-esqueleto), transparent); animation: brilho 1.3s infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
.esqueleto.linha { height: var(--esp-3); margin: var(--esp-2) 0; } .esqueleto.bloco { height: 100%; min-height: 180px; }
.esqueleto.l70 { width: 70%; } .esqueleto.l85 { width: 85%; } .esqueleto.l50 { width: 50%; }
.esqueleto.circulo { width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--raio-circulo); }

/* --- estado vazio */
.vazio { text-align: center; padding: var(--esp-10) var(--esp-4); color: var(--texto-2); }
.vazio svg { width: 120px; height: auto; margin: 0 auto var(--esp-3); display: block; color: var(--texto-3); }
.vazio svg .realce { color: var(--destaque); }
.vazio strong { display: block; color: var(--texto); font-size: var(--t-16); margin-bottom: var(--esp-1); }

/* --- painel lateral (gaveta) */
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--gaveta-largura), 100vw); background: var(--fundo); z-index: var(--z-gaveta); box-shadow: var(--sombra-4);
  transform: translateX(105%); transition: transform var(--dur-media) var(--curva-padrao); display: flex; flex-direction: column; }
.gaveta.aberta { transform: none; }
.gaveta-topo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda-fina) solid var(--borda); background: var(--superficie); }
.gaveta-topo a { margin-left: auto; font-size: var(--t-13); font-weight: var(--peso-semi); }
.gaveta-corpo { overflow-y: auto; padding: var(--esp-4); flex: 1; }
.gaveta-veu { position: fixed; inset: 0; background: var(--veu); z-index: var(--z-veu-gaveta); opacity: 0; pointer-events: none; transition: opacity var(--dur-media) var(--curva-padrao); }
.gaveta-veu.aberto { opacity: 1; pointer-events: auto; }

/* --- modal (elemento <dialog>; foco preso e Esc nativos) */
dialog.modal { width: min(var(--modal-largura), calc(100vw - var(--esp-8))); padding: 0; border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-4); }
dialog.modal::backdrop { background: var(--veu); }
dialog.modal[open] { animation: entra var(--dur-media) var(--curva-entrada); }
.modal-topo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border-bottom: var(--borda-fina) solid var(--borda); }
.modal-topo h2 { margin: 0; flex: 1; font-size: var(--t-18); }
.modal-corpo { padding: var(--esp-5); }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-3) var(--esp-5) var(--esp-5); }
.modal-demo { position: static; display: block; margin: 0; }

/* ============================================================ 4. padrões de tela */
/* cabeçalho de página */
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-5); }
.pagina-topo h1 { margin: 0; }
.pagina-topo p { margin: var(--esp-1) 0 0; color: var(--texto-2); }
.pagina-topo .acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }

/* cartão de indicador (KPI) */
.numeros, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-35); margin: 0 0 var(--esp-5); }
.numeros > div, .kpi { background: var(--superficie); border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); padding: var(--esp-4) var(--esp-4); box-shadow: var(--sombra-1); }
.numeros strong { display: block; font-size: var(--t-28); font-weight: var(--peso-negrito); letter-spacing: var(--espaco-letra-titulo); color: var(--texto); }
.numeros span { color: var(--texto-2); font-size: var(--t-13); }
.numeros .alerta, .kpi.alerta { border-color: var(--erro); }
.numeros .alerta strong { color: var(--erro); }
.kpi-topo { display: flex; align-items: center; justify-content: space-between; color: var(--texto-2); font-size: var(--t-13); font-weight: var(--peso-semi); }
.kpi-icone { width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--raio-md); display: grid; place-items: center; background: var(--primaria); color: var(--sobre-primaria); }
.kpi-icone.destaque { background: var(--destaque-fundo); color: var(--realce-texto); }
.kpi-icone .ico { width: var(--ico-md); height: var(--ico-md); }
.kpi-valor { font-size: var(--t-32); font-weight: var(--peso-negrito); letter-spacing: var(--espaco-letra-titulo); margin: var(--esp-2) 0 var(--esp-05); line-height: var(--altura-justa); }
.kpi-valor small { font-size: var(--t-16); font-weight: var(--peso-semi); color: var(--texto-2); }
.kpi-rodape { font-size: var(--t-13); color: var(--texto-3); display: flex; align-items: center; gap: var(--esp-15); flex-wrap: wrap; }
.kpi .progresso { margin: var(--esp-2) 0 var(--esp-15); }
.variacao { font-weight: var(--peso-negrito); font-size: var(--t-12); padding: 0 var(--esp-15); border-radius: var(--raio-pill); }
.variacao.sobe { color: var(--sucesso); background: var(--sucesso-fundo); } .variacao.desce { color: var(--erro); background: var(--erro-fundo); }

.bloco { margin: 0 0 var(--esp-5); }
.grade-painel { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--esp-4); margin-bottom: var(--esp-4); }
.grade-painel > * { grid-column: span 12; margin: 0; min-width: 0; }
@media (min-width: 1000px) { .g-8 { grid-column: span 8 !important; } .g-4 { grid-column: span 4 !important; } .g-6 { grid-column: span 6 !important; } }
.grafico { position: relative; height: var(--grafico-altura); } .grafico.alto { height: var(--grafico-alto); }
.dados-grafico { margin-top: var(--esp-3); }
.dados-grafico summary { cursor: pointer; font-size: var(--t-13); color: var(--texto-2); font-weight: var(--peso-semi); }
.duas-colunas { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } @media (min-width: 760px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }

/* funil */
.funil { display: flex; flex-direction: column; gap: var(--esp-2); }
.funil-etapa { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "rotulo valor" "trilho trilho"; gap: var(--esp-1) var(--esp-3); align-items: baseline; }
.funil-etapa .rotulo { grid-area: rotulo; font-weight: var(--peso-semi); font-size: var(--t-13); }
.funil-etapa .valor { grid-area: valor; text-align: right; font-variant-numeric: var(--numeros); font-weight: var(--peso-semi); }
.funil-etapa .valor small { font-weight: var(--peso-medio); }
.funil-trilho { grid-area: trilho; height: 26px; display: flex; justify-content: center; background: var(--superficie-2); border-radius: var(--raio-sm); }
.funil-barra { height: 100%; width: var(--v, 0); border-radius: var(--raio-sm); background: var(--nivel-1); min-width: var(--esp-15); transition: width var(--dur-lenta) var(--curva-padrao); }
.funil-etapa:nth-child(2) .funil-barra { background: var(--nivel-2); } .funil-etapa:nth-child(3) .funil-barra { background: var(--nivel-3); }
.funil-etapa:nth-child(4) .funil-barra { background: var(--nivel-4); }
.funil-geral .etapa { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 6.5rem; align-items: center; gap: var(--esp-25); margin: var(--esp-15) 0; font-size: var(--t-13); }
.funil-geral .barra { height: var(--esp-3); }
.nota-funil { margin-top: var(--esp-35); }

/* ranking */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) 0; border-bottom: var(--borda-fina) solid var(--borda); }
.ranking li:last-child { border-bottom: 0; }
.ranking .pos { width: var(--esp-6); text-align: center; color: var(--texto-3); font-weight: var(--peso-negrito); font-variant-numeric: var(--numeros); }
.ranking .nome { flex: 1; min-width: 0; }
.ranking .nome .progresso { margin-top: var(--esp-1); height: var(--esp-1); }
.ranking .qtd { font-weight: var(--peso-negrito); font-variant-numeric: var(--numeros); }

/* mapa: tela cheia, painel flutuante, legenda, marcadores e popup */
.mapa-tela { position: relative; height: calc(100vh - var(--cabecalho-altura)); min-height: 480px; }
.mapa-tela #mapa { position: absolute; inset: 0; }
.painel-flutuante { position: absolute; top: var(--esp-4); left: var(--esp-4); z-index: var(--z-mapa-ui); width: var(--painel-mapa-largura); max-height: calc(100% - var(--esp-8)); overflow: auto;
  background: var(--superficie); border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3); }
.painel-flutuante > header { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda-fina) solid var(--borda);
  position: sticky; top: 0; background: var(--superficie); z-index: var(--z-base); }
.painel-flutuante > header h1 { font-size: var(--t-16); margin: 0; flex: 1; }
.painel-flutuante.recolhido .corpo { display: none; }
.painel-flutuante .corpo { padding: var(--esp-2) var(--esp-4) var(--esp-4); }
.painel-flutuante details.filtros { border: 0; border-radius: 0; margin: 0 calc(-1 * var(--esp-4)); }
.painel-flutuante .grade { grid-template-columns: 1fr; }
.rotulo-secao { margin: var(--esp-2) 0 var(--esp-1); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaco-letra-caixa-alta); color: var(--texto-3); font-weight: var(--peso-semi); }
.camadas-lista label { display: flex; align-items: center; gap: var(--esp-25); margin: var(--esp-1) 0; font-weight: var(--peso-medio); font-size: var(--t-15); cursor: pointer; min-height: var(--controle-sm); }
.legenda-flutuante { position: absolute; right: var(--esp-4); bottom: var(--esp-6); z-index: var(--z-mapa-ui); background: var(--superficie); border: var(--borda-fina) solid var(--borda);
  border-radius: var(--raio-md); box-shadow: var(--sombra-2); padding: var(--esp-3) var(--esp-35); font-size: var(--t-13); max-width: 300px; }
.legenda-flutuante:empty { display: none; }
.legenda-flutuante.estatica { position: static; }
.legenda-flutuante h4 { margin: var(--esp-05) 0 var(--esp-15); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaco-letra-caixa-alta); color: var(--texto-3); }
.legenda-flutuante .item { display: flex; align-items: center; gap: var(--esp-15); margin: var(--esp-05) 0; }
.legenda-flutuante i, .legenda i { display: inline-block; width: var(--esp-3); height: var(--esp-3); border-radius: var(--raio-circulo); flex: none; vertical-align: middle; background: var(--cor); }
.legenda-faixas { display: flex; gap: var(--esp-05); } .legenda-faixas span { flex: 1; text-align: center; font-size: var(--t-12); color: var(--texto-3); }
.legenda-faixas i { width: 100%; height: var(--esp-2); border-radius: var(--esp-05); display: block; margin-bottom: var(--esp-05); }
@media (max-width: 899px) {
  .mapa-tela { height: calc(100vh - var(--cabecalho-altura) - 64px); }
  .painel-flutuante { left: var(--esp-25); right: var(--esp-25); top: var(--esp-25); width: auto; max-height: 60%; }
  .legenda-flutuante { right: var(--esp-25); bottom: var(--esp-25); left: auto; max-width: 70%; }
}
.marcador { display: block; width: var(--marcador); height: var(--marcador); border-radius: var(--raio-circulo); border: var(--borda-media) solid var(--marcador-borda);
  box-shadow: var(--sombra-marcador); background: var(--cor); }
.marcador.n4 { width: var(--marcador-destaque); height: var(--marcador-destaque); }
.marcador.bloq { background-image: repeating-linear-gradient(45deg, var(--hachura) 0 2px, transparent 2px 5px); }
.marcadores-demo { display: flex; gap: var(--esp-4); align-items: center; }
.leaflet-container { font-family: var(--fonte); background: var(--superficie-3); }
.leaflet-tile-pane { filter: var(--filtro-mapa); }
.leaflet-popup-content-wrapper { border-radius: var(--raio-lg); box-shadow: var(--sombra-3); background: var(--superficie); color: var(--texto); }
.leaflet-popup-tip { background: var(--superficie); }
.leaflet-popup-content { margin: var(--esp-35) var(--esp-4); min-width: 220px; font-size: var(--t-15); line-height: var(--altura-texto); }
.popup-demo { max-width: 300px; padding: var(--esp-35) var(--esp-4); border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3); background: var(--superficie); }
.popup-cartao { display: flex; gap: var(--esp-3); align-items: center; }
.popup-cartao .avatar { width: var(--avatar-lg); height: var(--avatar-lg); border-radius: var(--raio-lg); font-size: var(--t-15); }
.popup-cartao strong { display: block; font-size: var(--t-16); }
.popup-chips { display: flex; gap: var(--esp-1); flex-wrap: wrap; margin: var(--esp-25) 0; }
.popup-acoes { display: flex; gap: var(--esp-15); margin-top: var(--esp-2); }
.popup-acoes a { flex: 1; text-align: center; padding: var(--esp-2); border-radius: var(--raio-sm); font-weight: var(--peso-semi); text-decoration: none; font-size: var(--t-13); }
.popup-acoes a.primario { background: var(--primaria); color: var(--sobre-primaria); }
.popup-acoes a.sec { background: var(--destaque-fundo); color: var(--realce-texto); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: var(--grafico-area) !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--primaria) !important; color: var(--sobre-primaria); font-family: var(--fonte); font-weight: var(--peso-negrito); }
.mapa-pequeno { height: 240px; border-radius: var(--raio-md); margin: var(--esp-25) 0; border: var(--borda-fina) solid var(--borda); }
.mapa-grande { height: 70vh; min-height: 420px; border-radius: var(--raio-md); }
.legenda { background: var(--superficie); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md); margin-top: var(--esp-2); font-size: var(--t-13); }

/* ficha do apoiador */
.ficha-topo { display: flex; gap: var(--esp-5); align-items: center; flex-wrap: wrap; margin-bottom: var(--esp-4); }
.ficha-topo .avatar.grande img { border-radius: var(--raio-xl); }
.ficha-topo h1 { margin: 0 0 var(--esp-15); font-size: var(--t-28); }
.ficha-topo .chips { display: flex; gap: var(--esp-15); flex-wrap: wrap; }
.ficha-topo .acoes-topo { margin-left: auto; display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.detalhe dl { display: grid; grid-template-columns: 1fr; margin: 0; }
.detalhe dt { font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaco-letra-caixa-alta); color: var(--texto-3); font-weight: var(--peso-semi); margin-top: var(--esp-35); }
.detalhe dd { margin: var(--esp-05) 0 0; }
@media (min-width: 720px) { .detalhe dl { grid-template-columns: 15rem 1fr; } .detalhe dt { margin: 0; padding: var(--esp-25) 0; border-bottom: var(--borda-fina) solid var(--borda); }
  .detalhe dd { padding: var(--esp-25) 0; margin: 0; border-bottom: var(--borda-fina) solid var(--borda); } }
.painel-aba[hidden] { display: none; }
.observacao-destaque { background: var(--superficie); border: var(--borda-fina) solid var(--borda); border-left: var(--borda-grossa) solid var(--destaque); border-radius: var(--raio-md); padding: var(--esp-3) var(--esp-4); margin: var(--esp-4) 0; }
.foto { max-width: 220px; border-radius: var(--raio-md); float: right; margin: 0 0 var(--esp-4) var(--esp-4); }
.zona-perigo { border-color: var(--erro); margin-top: var(--esp-4); }
.zona-perigo h2 { color: var(--erro); }
.acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.acoes.centro { justify-content: center; }
.acoes.entre { justify-content: space-between; }

/* formulário em passos */
.passos { position: sticky; top: var(--cabecalho-altura); z-index: var(--z-sticky); background: var(--fundo); padding: var(--esp-25) 0 var(--esp-3); margin-bottom: var(--esp-2); }
.passos.estatico { position: static; }
.passos-trilho { height: var(--esp-15); background: var(--superficie-3); border-radius: var(--raio-pill); overflow: hidden; }
.passos-trilho span { display: block; height: 100%; width: var(--v, 20%); background: var(--gradiente-progresso); border-radius: inherit; transition: width var(--dur-lenta) var(--curva-padrao); }
.passos ol { display: flex; justify-content: space-between; list-style: none; margin: var(--esp-2) 0 0; padding: 0; gap: var(--esp-1); }
.passos li { flex: 1; font-size: var(--t-12); color: var(--texto-3); font-weight: var(--peso-semi); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); }
.passos li b { width: 26px; height: 26px; border-radius: var(--raio-circulo); display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); font-size: var(--t-12); }
.passos li.feito b { background: var(--apoio); color: var(--sobre-apoio); }
.passos li.atual { color: var(--texto); } .passos li.atual b { background: var(--primaria); color: var(--sobre-primaria); }
@media (max-width: 480px) { .passos li span { display: none; } .passos li.atual span { display: block; } }
.com-passos fieldset.passo[hidden] { display: none; }
.com-passos fieldset.passo legend { font-size: var(--t-18); }
.rodape-passos { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; gap: var(--esp-25); padding: var(--esp-3) 0 calc(var(--esp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fundo) 75%, transparent); }
.rodape-passos button { flex: 1; min-height: var(--controle-lg); margin: 0; font-size: var(--t-16); }
.rodape-passos .voltar { flex: 0 0 auto; padding: 0 var(--esp-4); }
.espaco-passo { height: var(--esp-3); }
@media (max-width: 899px) { .com-passos ~ .barra-inferior, body.cadastrando .barra-inferior { display: none; } body.cadastrando .conteudo { padding-bottom: var(--esp-4); } }
.gps-botao { display: flex; align-items: center; gap: var(--esp-35); width: 100%; min-height: var(--controle-xl); padding: var(--esp-35) var(--esp-4); border-radius: var(--raio-lg);
  background: var(--primaria); border: 0; color: var(--sobre-primaria); font-size: var(--t-16); text-align: left; }
.gps-botao:hover { background: var(--primaria-hover); color: var(--sobre-primaria); }
.gps-botao .ico { width: var(--ico-xl); height: var(--ico-xl); }
.gps-botao small { display: block; color: inherit; opacity: .85; font-weight: var(--peso-medio); }
.gps-botao[data-estado="buscando"] .ico { animation: pulso 1s infinite; }
.gps-botao[data-estado="ok"] { background: var(--sucesso); color: var(--texto-inverso); }
.gps-botao[data-estado="erro"] { background: var(--erro); color: var(--texto-inverso); }
@keyframes pulso { 50% { opacity: .35; transform: scale(.85); } }
.foto-zona { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-4); border: var(--borda-media) dashed var(--borda-forte); border-radius: var(--raio-lg); cursor: pointer; font-weight: var(--peso-semi); position: relative; }
.foto-zona:hover { border-color: var(--destaque); }
.foto-zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foto-zona .previa { width: 84px; height: 84px; border-radius: var(--raio-lg); background: var(--superficie-3); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--texto-3); }
.foto-zona .previa img { width: 100%; height: 100%; object-fit: cover; }
.foto-zona .previa .ico { width: var(--ico-xl); height: var(--ico-xl); }
.revisao-lista { display: grid; gap: var(--esp-2); }
.revisao-lista div { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-2) 0; border-bottom: var(--borda-fina) solid var(--borda); }
.revisao-lista dt { color: var(--texto-3); font-size: var(--t-13); } .revisao-lista dd { margin: 0; font-weight: var(--peso-semi); text-align: right; }
.observacao textarea { min-height: 7rem; }
.acoes.fixas { position: sticky; bottom: 0; background: var(--fundo); padding: var(--esp-25) 0; z-index: var(--z-sticky); }
.sucesso-tela { text-align: center; padding: var(--esp-8) var(--esp-4); }
.sucesso-tela .selo { width: 84px; height: 84px; border-radius: var(--raio-circulo); margin: 0 auto var(--esp-4); display: grid; place-items: center; background: var(--sucesso-fundo); color: var(--sucesso);
  animation: entra var(--dur-lenta) var(--curva-entrada); }
.sucesso-tela .selo .ico { width: var(--ico-2xl); height: var(--ico-2xl); }

/* login e campo de 6 dígitos */
.tela-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--fundo); }
@media (min-width: 900px) { .tela-login { grid-template-columns: 1.05fr 1fr; } }
.login-marca { display: none; position: relative; overflow: hidden; color: var(--sobre-marca); padding: var(--esp-12); flex-direction: column; justify-content: space-between; background: var(--gradiente-marca); }
@media (min-width: 900px) { .login-marca { display: flex; } }
.login-marca h2 { font-size: var(--t-36); line-height: var(--altura-justa); letter-spacing: var(--espaco-letra-titulo); max-width: 22ch; font-weight: var(--peso-negrito); }
.login-marca p { color: var(--sobre-marca-2); max-width: 46ch; }
.login-marca .marca-texto small { color: var(--sobre-marca-2); }
.login-marca .nota-acesso { color: var(--sobre-marca-3); font-size: var(--t-13); }
.login-marca svg.mapa-deco { position: absolute; right: -60px; bottom: -40px; width: 520px; opacity: .16; color: var(--sobre-marca); }
.login-caixa { display: flex; align-items: center; justify-content: center; padding: var(--esp-8) var(--esp-5); }
.login-cartao { width: 100%; max-width: 400px; }
.login-cartao .marca { color: var(--texto); margin-bottom: var(--esp-8); }
.login-cartao .marca-texto small { color: var(--texto-3); }
.login-cartao h1 { font-size: var(--t-28); margin-bottom: var(--esp-15); }
.login-cartao > p { color: var(--texto-2); margin-bottom: var(--esp-6); }
.login-cartao button.primario { width: 100%; min-height: var(--alvo-toque); margin-top: var(--esp-3); }
.espaco-login { height: var(--esp-6); }
.codigo-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--esp-2); margin: var(--esp-2) 0; }
.codigo-6 input { text-align: center; font-size: var(--t-24); font-weight: var(--peso-semi); padding: var(--esp-25) 0; margin: 0; font-variant-numeric: var(--numeros); height: 56px; }
.codigo-6 .sep { display: none; }
.rodape-login { font-size: var(--t-12); color: var(--texto-3); margin-top: var(--esp-8); }

.qr-caixa { background: var(--qr-fundo); border-radius: var(--raio-md); padding: var(--esp-3); width: 196px; margin: var(--esp-3) 0; }
.qr-caixa .qr { display: block; width: 100%; height: auto; }
.qr-caixa .qr path { fill: var(--qr-modulo); }
details.recuperacao { margin-top: var(--esp-6); font-size: var(--t-13); }
details.recuperacao summary { cursor: pointer; color: var(--destaque); font-weight: var(--peso-semi); min-height: var(--alvo-toque); display: flex; align-items: center; }
.codigos-recuperacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2) var(--esp-6); padding-left: var(--esp-6); margin: 0 0 var(--esp-4); font-size: var(--t-16); }
.codigos-recuperacao code { font-size: var(--t-16); letter-spacing: var(--espaco-letra-caixa-alta); }

/* WhatsApp, pautas, rede, pedidos do titular */
.texto-msg { white-space: pre-wrap; font-size: var(--t-13); max-width: 32rem; }
.estado-wa { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--esp-25); margin: var(--esp-3) 0; }
.estado-wa div { border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-md); padding: var(--esp-25) var(--esp-3); background: var(--superficie); }
.estado-wa strong { display: block; font-size: var(--t-24); font-variant-numeric: var(--numeros); }
.arvore, .arvore ul { list-style: none; padding-left: var(--esp-5); border-left: var(--borda-fina) dashed var(--borda-forte); }
.busca { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--esp-4); }
.busca input, .busca select { flex: 1; min-width: 160px; margin: 0; }
.busca button { margin: 0; }
.botoes-gps { display: flex; flex-direction: column; gap: var(--esp-2); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); margin: var(--esp-4) 0; font-size: var(--t-13); color: var(--texto-2); }
.paginacao .acoes a { min-height: var(--controle-sm); }

/* vitrine do design system (/design) */
.ds-secao { margin: 0 0 var(--esp-10); }
.ds-secao > h2 { padding-bottom: var(--esp-2); border-bottom: var(--borda-fina) solid var(--borda); }
.ds-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-3); }
.ds-amostra { border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-md); overflow: hidden; background: var(--superficie); font-size: var(--t-12); }
.ds-amostra .cor { height: 56px; background: var(--cor); border-bottom: var(--borda-fina) solid var(--borda); }
.ds-amostra .info { padding: var(--esp-2); }
.ds-amostra code { display: block; background: none; padding: 0; color: var(--texto-2); }
.ds-linha { display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: center; margin: var(--esp-3) 0; }
.ds-rotulo { width: 100%; font-size: var(--t-12); color: var(--texto-3); text-transform: uppercase; letter-spacing: var(--espaco-letra-caixa-alta); font-weight: var(--peso-semi); margin: var(--esp-2) 0 0; }
.ds-tipo p { margin: var(--esp-1) 0; line-height: var(--altura-titulo); }
.ds-espaco { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--t-12); margin: var(--esp-1) 0; }
.ds-espaco span { display: block; height: var(--esp-3); width: var(--v); background: var(--apoio); border-radius: var(--esp-05); }
.ds-sombra { width: 120px; height: 72px; border-radius: var(--raio-md); background: var(--superficie); display: grid; place-items: center; font-size: var(--t-12); color: var(--texto-2); box-shadow: var(--v); }
.ds-raio { width: 72px; height: 72px; background: var(--destaque-fundo); border: var(--borda-fina) solid var(--destaque); display: grid; place-items: center; font-size: var(--t-12); border-radius: var(--v); }
.ds-palco { padding: var(--esp-5); border: var(--borda-fina) dashed var(--borda-forte); border-radius: var(--raio-lg); background: var(--fundo); }
.ds-proibido { display: flex; gap: var(--esp-3); flex-wrap: wrap; }
.ds-proibido div { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); font-weight: var(--peso-semi); position: relative; }
.ds-mini-app { display: grid; grid-template-columns: 200px 1fr; min-height: 220px; border: var(--borda-fina) solid var(--borda); border-radius: var(--raio-lg); overflow: hidden; }
.ds-mini-app .lateral { position: static; height: auto; }
.ds-barra-demo { position: static !important; display: grid !important; grid-template-columns: repeat(5, 1fr); background: var(--superficie); border: var(--borda-fina) solid var(--borda);
  border-radius: var(--raio-lg); padding: var(--esp-15) var(--esp-1); max-width: 400px; }
.ds-barra-demo a { display: flex; flex-direction: column; align-items: center; gap: var(--esp-05); min-height: var(--alvo-toque); justify-content: center; color: var(--texto-3);
  text-decoration: none; font-size: var(--t-12); font-weight: var(--peso-semi); }
.ds-barra-demo a.ativo, .ds-barra-demo a.central { color: var(--primaria); }
.ds-barra-demo .bola { width: 46px; height: 46px; border-radius: var(--raio-circulo); display: grid; place-items: center; background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--sombra-cta); }
@media (max-width: 640px) { .ds-mini-app { grid-template-columns: 1fr; } }

/* estados forçados: só a vitrine /design usa, para mostrar hover, ativo e foco sem o mouse */
button.e-hover, .botao.e-hover { background: var(--superficie-3); }
button.primario.e-hover, .botao.primario.e-hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
button.secundario.e-hover, .botao.secundario.e-hover { background: var(--destaque); color: var(--sobre-destaque); }
button.perigo.e-hover, .botao.perigo.e-hover { background: var(--erro-fundo); }
button.fantasma.e-hover, .botao.fantasma.e-hover { background: var(--superficie-3); }
button.e-ativo, .botao.e-ativo { transform: translateY(var(--esp-px)); }
button.primario.e-ativo, .botao.primario.e-ativo { background: var(--primaria-ativa); }
.e-foco { box-shadow: var(--foco) !important; }
input.e-foco { border-color: var(--destaque); }
.ds-tema { background: var(--fundo); color: var(--texto); padding: var(--esp-5); border-radius: var(--raio-lg); border: var(--borda-fina) solid var(--borda); }

/* ============================================================ 5. utilidades */
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: var(--esp-4); } .mt-2 { margin-top: var(--esp-2); }
.texto-2 { color: var(--texto-2); }
.linha-flex { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.linha-flex.entre { justify-content: space-between; }
.linha-flex.fim { justify-content: flex-end; }