/* Zypi Afiliados · design system da versão.
   [Sessão 1c] Tokens da rodada 2 do mockup (handoff/tokens.css), com as
   correções da rodada 2.1: uma escala tipográfica só, nenhuma cor fora de
   token, nenhum estilo inline. A cor da empresa entra em --marca, pela
   moldura (<style nonce>, só #RRGGBB). Tema claro por padrão; escuro pelo
   sistema do aparelho ou por data-tema na raiz. */

:root {
  --marca: oklch(0.5 0.16 30);
  --marca-texto: var(--marca);
  --sobre-marca: #fff;

  --fonte: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px;
  --t-17: 17px; --t-19: 19px; --t-22: 22px; --t-26: 26px; --t-32: 32px; --t-46: 46px;

  --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-20: 20px;
  --e-24: 24px; --e-32: 32px; --e-48: 48px; --e-64: 64px;

  --r-controle: 8px;
  --r-cartao: 12px;
  --r-pilula: 99px;

  --mov-controle: 150ms;
  --mov-painel: 200ms;
  --mov-mapa: 250ms;
  --mov-curva: cubic-bezier(.2, .7, .2, 1);

  --lateral: 248px;
  --conteudo: 1180px;

  --tinta: oklch(0.22 0.015 60);
  --tinta-2: oklch(0.42 0.015 60);
  --tinta-3: oklch(0.52 0.02 60);
  --tinta-4: oklch(0.72 0.01 70);
  --linha: oklch(0.9 0.008 78);
  --superficie: #fff;
  --papel: oklch(0.955 0.008 80);
  --papel-2: oklch(0.93 0.01 75);
  --seg1: oklch(0.87 0.018 70);
  --seg1-h: oklch(0.8 0.026 70);
  --seg2: oklch(0.93 0.01 75);
  --seg2-h: oklch(0.86 0.02 72);
  --seg3: oklch(0.95 0.008 78);
  --seg3-h: oklch(0.88 0.018 74);
  --pago: oklch(0.52 0.12 150);
  --pago-fundo: oklch(0.95 0.04 150);
  --alerta: oklch(0.55 0.13 75);
  --alerta-fundo: oklch(0.96 0.05 85);
  --erro: oklch(0.52 0.18 25);
  --erro-fundo: oklch(0.96 0.03 25);
  --cartao-tinta: oklch(0.22 0.015 60);
  --cartao-texto: oklch(0.97 0.006 80);
  --sombra: oklch(0.22 0.015 60 / 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca-texto: color-mix(in oklch, var(--marca) 42%, oklch(0.97 0.006 80));
    --tinta: oklch(0.96 0.006 80);
    --tinta-2: oklch(0.78 0.015 70);
    --tinta-3: oklch(0.66 0.015 65);
    --tinta-4: oklch(0.5 0.015 60);
    --linha: oklch(0.31 0.012 60);
    --superficie: oklch(0.21 0.012 60);
    --papel: oklch(0.165 0.012 60);
    --papel-2: oklch(0.25 0.014 60);
    --seg1: oklch(0.42 0.022 66);
    --seg1-h: oklch(0.52 0.028 68);
    --seg2: oklch(0.32 0.016 62);
    --seg2-h: oklch(0.42 0.022 66);
    --seg3: oklch(0.27 0.014 60);
    --seg3-h: oklch(0.46 0.026 66);
    --pago: oklch(0.74 0.13 150);
    --pago-fundo: oklch(0.3 0.05 150);
    --alerta: oklch(0.8 0.12 80);
    --alerta-fundo: oklch(0.32 0.05 80);
    --erro: oklch(0.7 0.16 25);
    --erro-fundo: oklch(0.3 0.06 25);
    --cartao-tinta: oklch(0.27 0.014 60);
    --cartao-texto: oklch(0.97 0.006 80);
    --sombra: oklch(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --marca-texto: color-mix(in oklch, var(--marca) 42%, oklch(0.97 0.006 80));
  --tinta: oklch(0.96 0.006 80);
  --tinta-2: oklch(0.78 0.015 70);
  --tinta-3: oklch(0.66 0.015 65);
  --tinta-4: oklch(0.5 0.015 60);
  --linha: oklch(0.31 0.012 60);
  --superficie: oklch(0.21 0.012 60);
  --papel: oklch(0.165 0.012 60);
  --papel-2: oklch(0.25 0.014 60);
  --seg1: oklch(0.42 0.022 66);
  --seg1-h: oklch(0.52 0.028 68);
  --seg2: oklch(0.32 0.016 62);
  --seg2-h: oklch(0.42 0.022 66);
  --seg3: oklch(0.27 0.014 60);
  --seg3-h: oklch(0.46 0.026 66);
  --pago: oklch(0.74 0.13 150);
  --pago-fundo: oklch(0.3 0.05 150);
  --alerta: oklch(0.8 0.12 80);
  --alerta-fundo: oklch(0.32 0.05 80);
  --erro: oklch(0.7 0.16 25);
  --erro-fundo: oklch(0.3 0.06 25);
  --cartao-tinta: oklch(0.27 0.014 60);
  --cartao-texto: oklch(0.97 0.006 80);
  --sombra: oklch(0 0 0 / 0.45);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-15);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca-texto); text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--fonte-mono); font-size: 0.93em; }
hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-24) 0; }
table { font-variant-numeric: tabular-nums; }
.icone { flex: none; width: 20px; height: 20px; vertical-align: middle; }
.icone-pequeno { width: 16px; height: 16px; }
.icone-grande { width: 28px; height: 28px; }
.visivel-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- tipografia */

.titulo-1 { font-size: var(--t-32); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.titulo-2 { font-size: var(--t-22); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
.titulo-3 { font-size: var(--t-17); line-height: 1.3; font-weight: 600; }
.texto { color: var(--tinta-2); }
.texto-pequeno { font-size: var(--t-13); color: var(--tinta-3); }
.texto-mini { font-size: var(--t-12); color: var(--tinta-3); }
.rotulo-caixa {
  font-size: var(--t-11); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-3);
}
.numero-grande { font-size: var(--t-32); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.numero-medio { font-size: var(--t-22); line-height: 1.15; font-weight: 650; }
.forte { font-weight: 600; color: var(--tinta); }
.positivo { color: var(--pago); }
.negativo { color: var(--erro); }
.apagado { color: var(--tinta-3); }
.quebra { overflow-wrap: anywhere; }
.centro { text-align: center; }
.direita { text-align: right; }

/* ---------------------------------------------------------------- composição */

.pilha { display: flex; flex-direction: column; gap: var(--e-16); }
.pilha-pequena { display: flex; flex-direction: column; gap: var(--e-8); }
.pilha-grande { display: flex; flex-direction: column; gap: var(--e-24); }
.linha { display: flex; align-items: center; gap: var(--e-12); flex-wrap: wrap; }
.linha-justa { display: flex; align-items: center; justify-content: space-between; gap: var(--e-12); flex-wrap: wrap; }
.grade-2, .grade-3, .grade-4 { display: grid; gap: var(--e-16); }
@media (min-width: 720px) {
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grade-principal { display: grid; gap: var(--e-16); }
.grade-principal > *, .grade-2 > *, .grade-3 > *, .grade-4 > * { min-width: 0; }
@media (min-width: 1100px) {
  .grade-principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

/* ---------------------------------------------------------------- marca */

.marca { display: inline-flex; align-items: center; gap: var(--e-12); color: var(--tinta); text-decoration: none; font-weight: 650; font-size: var(--t-17); }
.marca:hover { color: var(--tinta); }
.marca-logo {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-controle);
  background: var(--marca); color: var(--sobre-marca);
  font-size: var(--t-13); font-weight: 700; letter-spacing: 0.02em;
}
.marca-logo img { width: 30px; height: 30px; border-radius: var(--r-controle); object-fit: cover; }
.marca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- moldura do painel */

.app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
@media (min-width: 960px) {
  .app { grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-rows: none; }
}
.lateral {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: var(--e-12) var(--e-16);
  display: flex; flex-direction: column; gap: var(--e-16);
}
@media (min-width: 960px) {
  .lateral {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    border-bottom: 0; border-right: 1px solid var(--linha);
    padding: var(--e-20) var(--e-12);
  }
}
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); padding: 0 var(--e-8); }
.lateral-alternar {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: var(--r-controle);
  border: 1px solid var(--linha); background: var(--papel); cursor: pointer;
}
@media (min-width: 960px) { .lateral-alternar { display: none; } }
.lateral-nav { display: flex; flex-direction: column; gap: var(--e-16); }
@media (min-width: 960px) { .lateral-nav { flex: 1; } }
@media (max-width: 959px) {
  .com-js .lateral-nav:not(.aberta) { display: none; }
}
.lateral-grupo { display: flex; flex-direction: column; gap: 2px; }
.lateral-grupo-titulo { padding: var(--e-8) var(--e-8) var(--e-4); }
.lateral-item {
  display: flex; align-items: center; gap: var(--e-12);
  min-height: 40px; padding: 0 var(--e-8);
  border-radius: var(--r-controle);
  color: var(--tinta-2); text-decoration: none;
  transition: background var(--mov-controle), color var(--mov-controle);
}
.lateral-item:hover { background: var(--papel); color: var(--tinta); }
.lateral-item[aria-current="page"] { background: var(--papel-2); color: var(--tinta); font-weight: 600; }
.lateral-item .icone { color: var(--tinta-3); }
.lateral-item[aria-current="page"] .icone { color: var(--tinta); }
.lateral-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-contador {
  min-width: 22px; padding: 1px 7px; border-radius: var(--r-pilula);
  background: var(--marca); color: var(--sobre-marca);
  font-size: var(--t-12); font-weight: 650; text-align: center;
}
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-8); padding-top: var(--e-12); border-top: 1px solid var(--linha); }
.lateral-usuario { display: flex; align-items: center; gap: var(--e-12); padding: 0 var(--e-8); min-width: 0; }
.lateral-usuario-nome { font-weight: 600; font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-sair { margin: 0; }
.lateral-sair .lateral-item { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-16); flex-wrap: wrap;
  padding: var(--e-20) var(--e-24);
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo-titulo { font-size: var(--t-22); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
.topo-subtitulo { font-size: var(--t-13); color: var(--tinta-3); margin-top: 2px; }
.topo-acoes { display: flex; align-items: center; gap: var(--e-8); flex-wrap: wrap; }
.conteudo { width: 100%; max-width: var(--conteudo); padding: var(--e-24); display: flex; flex-direction: column; gap: var(--e-24); }
@media (max-width: 719px) {
  .topo { padding: var(--e-16); }
  .conteudo { padding: var(--e-16); gap: var(--e-16); }
}
.migalha { display: flex; gap: var(--e-8); align-items: center; font-size: var(--t-13); color: var(--tinta-3); }
.migalha a { color: var(--tinta-3); text-decoration: none; }
.migalha a:hover { color: var(--tinta); }

/* ---------------------------------------------------------------- moldura de folha (entrada, senha, instalação) */

.folha-fundo {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e-24) var(--e-16);
}
.folha {
  width: 100%; max-width: 460px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: var(--e-32);
  display: flex; flex-direction: column; gap: var(--e-20);
}
.folha--larga { max-width: 720px; }
@media (max-width: 480px) { .folha { padding: var(--e-24) var(--e-20); } }
.folha-titulo { font-size: var(--t-26); line-height: 1.15; font-weight: 650; letter-spacing: -0.015em; }
.folha-rodape { display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-16); justify-content: center; font-size: var(--t-14); }

/* ---------------------------------------------------------------- cartão */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: var(--e-20);
  display: flex; flex-direction: column; gap: var(--e-16);
  min-width: 0;
}
.cartao--tinta { background: var(--cartao-tinta); color: var(--cartao-texto); border: 0; box-shadow: 0 1px 2px var(--sombra); }
.cartao--tinta .rotulo-caixa, .cartao--tinta .texto, .cartao--tinta .texto-pequeno { color: color-mix(in oklch, var(--cartao-texto) 72%, transparent); }
.cartao--plano { background: var(--papel); }
.cartao-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-12); flex-wrap: wrap; }
.cartao-titulo { font-size: var(--t-17); line-height: 1.3; font-weight: 650; }
.cartao-subtitulo { font-size: var(--t-13); color: var(--tinta-3); }
.kpi { display: flex; flex-direction: column; gap: var(--e-8); }
.kpi-nota { font-size: var(--t-13); color: var(--tinta-3); }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-controle); border: 1px solid transparent;
  background: var(--marca); color: var(--sobre-marca);
  font-size: var(--t-15); font-weight: 550; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: filter var(--mov-controle), background var(--mov-controle);
}
.botao:hover { filter: brightness(0.93); color: var(--sobre-marca); }
.botao--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.botao--secundario:hover { background: var(--papel); color: var(--tinta); filter: none; }
.botao--perigo { background: var(--erro); color: #fff; }
.botao--perigo:hover { color: #fff; }
.botao--texto { background: none; color: var(--marca-texto); padding: 0 var(--e-8); min-height: 36px; }
.botao--texto:hover { color: var(--tinta); filter: none; }
.botao--pequeno { min-height: 36px; padding: 0 12px; font-size: var(--t-14); }
.botao--largo { width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] { background: var(--seg2); color: var(--tinta-3); border-color: transparent; cursor: not-allowed; filter: none; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: center; }
form.inline { display: inline; margin: 0; }

/* ---------------------------------------------------------------- formulários */

.formulario { display: flex; flex-direction: column; gap: var(--e-16); }
.formulario-grade { display: grid; gap: var(--e-16); }
@media (min-width: 720px) { .formulario-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formulario-grade .inteiro { grid-column: 1 / -1; }
.campo-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-rotulo { font-size: var(--t-14); font-weight: 550; color: var(--tinta); display: flex; justify-content: space-between; gap: var(--e-8); }
.campo-rotulo a { font-weight: 400; font-size: var(--t-13); text-decoration: none; }
.campo-rotulo a:hover { text-decoration: underline; }
.campo-ajuda { font-size: var(--t-13); color: var(--tinta-3); }
.campo-erro { font-size: var(--t-13); color: var(--erro); }
.campo {
  width: 100%; min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-controle);
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta);
  font-size: var(--t-15);
  transition: border-color var(--mov-controle), background var(--mov-controle);
}
.campo:hover { border-color: var(--seg1-h); }
.campo:focus { outline: 2px solid var(--marca); outline-offset: 0; border-color: transparent; background: var(--superficie); }
.campo[aria-invalid="true"] { border-color: var(--erro); }
.campo[readonly], .campo:disabled { color: var(--tinta-3); background: var(--papel-2); }
textarea.campo { min-height: 110px; resize: vertical; }
select.campo { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo--codigo { font-family: var(--fonte-mono); letter-spacing: 0.12em; font-size: var(--t-19); text-align: center; }
.campo-com-prefixo { display: flex; align-items: stretch; border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel); overflow: hidden; }
.campo-com-prefixo:focus-within { outline: 2px solid var(--marca); }
.campo-com-prefixo .prefixo { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--tinta-3); white-space: nowrap; }
.campo-com-prefixo .campo { border: 0; background: none; outline: 0; padding-left: 2px; }
.campo-com-prefixo .prefixo--fim { padding: 0 12px 0 0; }
.campo-taxa { display: inline-flex; width: 7.5em; }
.campo-taxa .campo { text-align: right; min-width: 0; }
.escolha { display: flex; align-items: flex-start; gap: var(--e-8); font-size: var(--t-14); color: var(--tinta-2); cursor: pointer; }
.escolha input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }
.opcoes { display: grid; gap: var(--e-8); }
.opcao {
  display: flex; gap: var(--e-12); align-items: flex-start;
  padding: var(--e-12) var(--e-16);
  border: 1px solid var(--linha); border-radius: var(--r-controle);
  background: var(--superficie); cursor: pointer;
}
.opcao:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.opcao input { accent-color: var(--marca); margin-top: 3px; flex: none; }
.opcao-titulo { font-weight: 600; }
.opcao-texto { display: block; font-size: var(--t-13); color: var(--tinta-3); }
.senha-campo { position: relative; }
.senha-campo .campo { padding-right: 84px; }
.senha-mostrar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px;
  background: none; color: var(--tinta-3); font-size: var(--t-13); cursor: pointer;
}
.senha-mostrar:hover { color: var(--tinta); background: var(--papel-2); }
.sem-js .senha-mostrar { display: none; }
.cores { display: flex; flex-wrap: wrap; gap: var(--e-8); }
.cor-amostra { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--t-13); }
.cor-amostra input { accent-color: var(--marca); }
.cor-bola { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linha); display: inline-block; }
/* Cores de marca prontas do primeiro acesso e de Configurações (a mesma lista de PrimeiroAcesso::CORES). */
:root { --predef-1: #b0412e; --predef-2: #2f5bb7; --predef-3: #2e7d4f; --predef-4: #6a3fb5; --predef-5: #c2570c; --predef-6: #3d3a36; }
.cor-1 { background: var(--predef-1); } .cor-2 { background: var(--predef-2); } .cor-3 { background: var(--predef-3); }
.cor-4 { background: var(--predef-4); } .cor-5 { background: var(--predef-5); } .cor-6 { background: var(--predef-6); }
.cores .campo { width: 120px; min-height: 36px; padding: 6px 10px; font-family: var(--fonte-mono); }
fieldset.campo-grupo { border: 0; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- avisos e selos */

.aviso, .acesso-aviso, .acesso-erro {
  display: flex; gap: var(--e-12); align-items: flex-start;
  padding: var(--e-12) var(--e-16);
  border-radius: var(--r-controle);
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta-2); font-size: var(--t-14);
}
.aviso--ok, .acesso-aviso { border-color: color-mix(in oklch, var(--pago) 35%, var(--linha)); background: var(--pago-fundo); color: var(--tinta); }
.aviso--erro, .acesso-erro { border-color: color-mix(in oklch, var(--erro) 40%, var(--linha)); background: var(--erro-fundo); color: var(--tinta); }
.aviso--alerta { border-color: color-mix(in oklch, var(--alerta) 40%, var(--linha)); background: var(--alerta-fundo); color: var(--tinta); }
.aviso .icone { margin-top: 1px; }
.nota-lateral { border-left: 3px solid var(--marca); padding: 2px 0 2px var(--e-16); color: var(--tinta-2); font-size: var(--t-14); }
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--r-pilula);
  font-size: var(--t-12); font-weight: 600; white-space: nowrap;
  background: var(--papel-2); color: var(--tinta-2);
}
.selo--ok { background: var(--pago-fundo); color: var(--pago); }
.selo--alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo--erro { background: var(--erro-fundo); color: var(--erro); }
.selo--marca { background: color-mix(in oklch, var(--marca) 14%, var(--superficie)); color: var(--marca-texto); }
.selo--tinta { background: var(--tinta); color: var(--superficie); }

/* ---------------------------------------------------------------- tabelas e listas */

.tabela-rolagem { overflow-x: auto; margin: 0 calc(-1 * var(--e-20)); padding: 0 var(--e-20); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-14); line-height: 1.4; }
.tabela th {
  text-align: left; font-size: var(--t-11); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--papel); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .valor, .tabela th.valor { text-align: right; white-space: nowrap; }
.tabela .acao { text-align: right; white-space: nowrap; }
.tabela a.linha-link { color: var(--tinta); text-decoration: none; font-weight: 550; }
.tabela a.linha-link:hover { color: var(--marca-texto); }
.valor { font-weight: 600; }
.valor--negativo { color: var(--erro); }
.valor--estornado { font-weight: 400; color: var(--tinta-2); text-decoration: line-through; }
.lista { display: flex; flex-direction: column; }
.lista-item { display: flex; align-items: center; gap: var(--e-12); padding: var(--e-12) 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.lista-item:last-child { border-bottom: 0; }
.lista-corpo { flex: 1; min-width: 0; }
.lista-titulo { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-sub { display: block; font-size: var(--t-13); color: var(--tinta-3); }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--papel-2); color: var(--tinta-2);
  font-size: var(--t-12); font-weight: 650;
}
.dados { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--e-8) var(--e-24); font-size: var(--t-14); }
.dados dt { color: var(--tinta-3); }
.dados dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.vazio { text-align: center; padding: var(--e-32) var(--e-16); color: var(--tinta-3); display: flex; flex-direction: column; align-items: center; gap: var(--e-8); }
.vazio .icone { width: 28px; height: 28px; color: var(--tinta-4); }
.paginacao { display: flex; gap: var(--e-8); align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: var(--t-14); color: var(--tinta-3); }

/* ---------------------------------------------------------------- navegação interna */

.abas { display: flex; gap: var(--e-4); border-bottom: 1px solid var(--linha); overflow-x: auto; }
.abas a { padding: var(--e-12) var(--e-12); color: var(--tinta-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--marca); }
.segmentado { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--papel-2); border: 1px solid var(--linha); flex-wrap: wrap; }
.segmentado a { padding: 6px 14px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font-size: var(--t-14); min-height: 32px; display: inline-flex; align-items: center; }
.segmentado a[aria-current="true"], .segmentado a[aria-current="page"] { background: var(--superficie); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px var(--sombra); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: flex-end; }
.filtros .campo-grupo { min-width: 160px; }

/* ---------------------------------------------------------------- medidores e códigos */

progress.barra, meter.barra { width: 100%; height: 8px; border: 0; border-radius: var(--r-pilula); background: var(--papel-2); overflow: hidden; appearance: none; }
progress.barra::-webkit-progress-bar, meter.barra::-webkit-meter-bar { background: var(--papel-2); border-radius: var(--r-pilula); border: 0; }
progress.barra::-webkit-progress-value { background: var(--marca); border-radius: var(--r-pilula); }
progress.barra::-moz-progress-bar { background: var(--marca); border-radius: var(--r-pilula); }
meter.barra::-webkit-meter-optimum-value { background: var(--pago); border-radius: var(--r-pilula); }
meter.barra::-moz-meter-bar { background: var(--pago); border-radius: var(--r-pilula); }
.codigo-bloco {
  display: block; padding: var(--e-12) var(--e-16);
  border-radius: var(--r-controle); border: 1px dashed var(--seg1-h);
  background: var(--papel); font-family: var(--fonte-mono); font-size: var(--t-15);
  letter-spacing: 0.06em; overflow-wrap: anywhere;
}
.copiavel { display: flex; gap: var(--e-8); align-items: stretch; }
.copiavel .campo { font-family: var(--fonte-mono); }
@media (max-width: 480px) { .copiavel { flex-direction: column; } }
.sem-js [data-copiar] { display: none; }

/* ---------------------------------------------------------------- telas do acesso (nomes da 1b mantidos) */

.acesso-form { display: flex; flex-direction: column; gap: var(--e-16); }
.acesso-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  width: 100%; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-controle); border: 1px solid transparent;
  background: var(--marca); color: var(--sobre-marca);
  font-size: var(--t-15); font-weight: 550; cursor: pointer;
  transition: filter var(--mov-controle);
}
.acesso-botao:hover { filter: brightness(0.93); }
.acesso-botao-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.acesso-botao-secundario:hover { background: var(--papel); filter: none; }
.acesso-sair { margin-top: calc(-1 * var(--e-8)); }
.acesso-campo { display: flex; flex-direction: column; gap: 6px; }
.acesso-rotulo { font-size: var(--t-14); font-weight: 550; }
.acesso-entrada { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-controle); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); font-size: var(--t-15); }
.acesso-entrada:focus { outline: 2px solid var(--marca); outline-offset: 0; border-color: transparent; background: var(--superficie); }
.acesso-entrada[aria-invalid="true"] { border-color: var(--erro); }
.acesso-dica { font-size: var(--t-13); color: var(--tinta-3); }
.acesso-rodape { display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-16); font-size: var(--t-14); }
.acesso-link { color: var(--marca-texto); }
.acesso-secao { display: flex; flex-direction: column; gap: var(--e-12); padding-top: var(--e-20); border-top: 1px solid var(--linha); }
.acesso-subtitulo { font-size: var(--t-17); font-weight: 650; }
.acesso-dados { display: flex; justify-content: center; }
.acesso-dados img { width: 220px; height: 220px; border-radius: var(--r-controle); border: 1px solid var(--linha); background: #fff; }
.acesso-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8) var(--e-16); padding: var(--e-16) var(--e-16) var(--e-16) var(--e-32); margin: 0; border-radius: var(--r-controle); background: var(--papel); border: 1px dashed var(--seg1-h); font-family: var(--fonte-mono); }
.acesso-codigos code { font-size: var(--t-15); letter-spacing: 0.04em; }
.acesso-chave { font-family: var(--fonte-mono); font-size: var(--t-15); letter-spacing: 0.06em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- páginas do núcleo (1a) */

.nucleo-titulo { font-size: var(--t-22); line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.nucleo-texto { color: var(--tinta-2); }
.nucleo-codigo { padding-top: var(--e-16); border-top: 1px solid var(--linha); font-size: var(--t-14); color: var(--tinta-2); }
.nucleo-codigo-valor { font-family: var(--fonte-mono); font-weight: 650; letter-spacing: 0.04em; color: var(--tinta); }
.conferencia { list-style: none; padding: 0; display: flex; flex-direction: column; }
.conferencia li { display: flex; gap: var(--e-12); align-items: flex-start; padding: var(--e-8) 0; border-bottom: 1px solid var(--linha); font-size: var(--t-14); }
.conferencia li:last-child { border-bottom: 0; }
.conferencia .ok { color: var(--pago); }
.conferencia .falha { color: var(--erro); }

/* ---------------------------------------------------------------- afiliado e equipe (3a, 3b) */

.folha--dupla { max-width: 1040px; }
.cadastro-grade { display: grid; gap: var(--e-16); grid-template-areas: "quem" "form" "ganhos"; }
.cadastro-form { grid-area: form; }
.cadastro-quem { grid-area: quem; }
.cadastro-ganhos { grid-area: ganhos; }
@media (min-width: 900px) {
  .cadastro-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "form quem" "form ganhos"; align-items: start; column-gap: var(--e-24); }
}
.texto-longo { max-width: 68ch; display: flex; flex-direction: column; gap: var(--e-12); color: var(--tinta-2); font-size: var(--t-15); line-height: 1.6; }
.texto-longo h2 { margin-top: var(--e-12); font-size: var(--t-17); line-height: 1.3; font-weight: 650; color: var(--tinta); }
.texto-longo p { white-space: pre-line; overflow-wrap: anywhere; }
.campo--texto-longo { min-height: 420px; font-family: var(--fonte-mono); font-size: var(--t-13); line-height: 1.55; }
.em-linha { display: inline; }
.link-divulgacao { font-family: var(--fonte-mono); font-size: var(--t-14); overflow-wrap: anywhere; }
.copiavel code { flex: 1; min-width: 0; display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel); word-break: break-all; }

/* ---------------------------------------------------------------- catálogo, loja e pedidos (6 a 9) */

.cresce { flex: 1; min-width: 0; }
.mono { font-family: var(--fonte-mono); }
.sem-js .so-com-js { display: none; }
.com-js .so-sem-js { display: none; }
.campo--compacto { min-height: 36px; padding: 6px 10px; }
.campo-curto { max-width: 160px; }
.campo-quantidade { width: 72px; }
.botao--desligado { opacity: .5; pointer-events: none; }
.avatar--pequeno { width: 28px; height: 28px; font-size: var(--t-12); }
.produto-linha { display: inline-flex; align-items: center; gap: var(--e-12); }
.produto-mini { width: 48px; height: 48px; border-radius: var(--r-controle); object-fit: cover; flex: none; background: var(--papel-2); }
.produto-mini--vazia { display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e-12); }
.foto-item { margin: 0; display: flex; flex-direction: column; gap: var(--e-8); }
.foto-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-controle); border: 1px solid var(--linha); background: var(--papel-2); }
.dados--valores { grid-template-columns: minmax(0, 1fr) max-content; margin-top: var(--e-12); }
.dados--valores dd.valor { text-align: right; }

.loja-corpo { background: var(--papel); min-height: 100vh; display: flex; flex-direction: column; }
.loja-largura { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--e-20); }
.loja-topo { background: var(--superficie); border-bottom: 1px solid var(--linha); }
.loja-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-16); min-height: 64px; }
.loja-marca { min-width: 0; }
.loja-marca .marca { max-width: 100%; }
.loja-marca .marca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loja-nav { flex: none; }
@media (max-width: 480px) { .loja-nav .loja-nav-produtos { display: none; } .loja-nav { gap: var(--e-12); } }
.loja-nav { display: flex; align-items: center; gap: var(--e-20); }
.loja-nav a { color: var(--tinta-2); text-decoration: none; font-weight: 550; display: inline-flex; align-items: center; gap: var(--e-8); min-height: 44px; }
.loja-nav a:hover { color: var(--tinta); }
.loja-carrinho-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pilula); background: var(--marca); color: var(--sobre-marca); font-size: var(--t-12); display: inline-flex; align-items: center; justify-content: center; }
.loja-indicacao { background: var(--papel-2); border-bottom: 1px solid var(--linha); font-size: var(--t-14); color: var(--tinta-2); padding: var(--e-8) 0; }
.loja-fechada { background: var(--alerta-fundo); color: var(--tinta); font-size: var(--t-14); padding: var(--e-8) 0; }
.loja-conteudo { flex: 1; padding-top: var(--e-24); padding-bottom: var(--e-48); display: flex; flex-direction: column; gap: var(--e-20); }
.loja-rodape { border-top: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-3); font-size: var(--t-13); padding: var(--e-16) 0; }
.loja-rodape a { color: var(--tinta-2); }
.produtos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-16); }
@media (max-width: 480px) { .produtos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-12); } }
.produto-cartao { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-cartao); overflow: hidden; color: var(--tinta); text-decoration: none; transition: box-shadow var(--mov-controle); }
.produto-cartao:hover { box-shadow: 0 6px 18px var(--sombra); }
.produto-cartao-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--papel-2); display: block; }
.produto-cartao-foto--vazia, .produto-foto-principal.produto-cartao-foto--vazia { display: flex; align-items: center; justify-content: center; color: var(--tinta-4); }
.produto-cartao-corpo { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-12) var(--e-16) var(--e-16); }
.produto-cartao-corpo .selo { align-self: flex-start; }
.produto-cartao-nome { font-weight: 600; line-height: 1.3; }
.produto-cartao-preco { font-weight: 650; font-size: var(--t-17); font-variant-numeric: tabular-nums; }
.produto-pagina { display: grid; gap: var(--e-24); }
@media (min-width: 900px) { .produto-pagina { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.produto-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-8); }
.produto-foto-principal { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-cartao); background: var(--papel-2); }
.produto-foto-extra { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-controle); background: var(--papel-2); }
.carrinho-item { flex-wrap: wrap; }
.carrinho-item .valor { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.formas { display: flex; flex-direction: column; gap: var(--e-4); padding-top: var(--e-12); border-top: 1px solid var(--linha); margin-top: var(--e-12); }
.forma-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-12); }
.pix-qr { display: flex; justify-content: center; }
.pix-qr img { width: 220px; height: 220px; border-radius: var(--r-controle); border: 1px solid var(--linha); background: #fff; }
.pix-codigo { font-size: var(--t-12); overflow-wrap: anywhere; }
.etapas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-8); }
.etapas li { position: relative; padding-left: 26px; color: var(--tinta-3); }
.etapas li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--linha); background: var(--superficie); }
.etapas li.feita { color: var(--tinta); font-weight: 550; }
.etapas li.feita::before { background: var(--pago); border-color: var(--pago); }
.texto-longo ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--e-4); }

/* ---------------------------------------------------------------- gráficos [Sessão 11] */

.grafico { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; font-family: var(--fonte); }
.g-eixo { stroke: var(--linha); stroke-width: 1; }
.g-eixo--tracejado { stroke-dasharray: 2 4; }
.g-texto { font-size: 12px; fill: var(--tinta-3); font-variant-numeric: tabular-nums; }
.g-texto--forte { fill: var(--tinta); font-weight: 650; }
.g-texto--grande { font-size: 18px; fill: var(--tinta); font-weight: 650; }
.g-texto--marca { fill: var(--marca-texto); font-weight: 600; }
.g-texto--tinta { fill: var(--tinta); font-weight: 600; }
.g-texto--faixa { font-size: 11px; font-weight: 650; fill: var(--tinta); }
.g-texto--claro { fill: var(--sobre-marca); }
.g-barra { fill: var(--seg1); }
.g-barra--marca { fill: var(--marca); }
.g-barra--tinta { fill: var(--tinta-2); }
.g-vazio { fill: var(--papel-2); }
.g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-linha--tinta { stroke: var(--tinta); }
.g-linha--marca { stroke: var(--marca); }
.g-linha--claro { stroke: var(--cartao-texto); }
.g-ponto--tinta { fill: var(--tinta); }
.g-ponto--marca { fill: var(--marca); }
.g-ponto--claro { fill: var(--cartao-texto); }
.g-area { stroke: none; opacity: 0.08; }
.g-area--tinta { fill: var(--tinta); }
.g-area--marca { fill: var(--marca); }
.g-faixa--marca { fill: var(--marca); }
.g-faixa--1 { fill: var(--seg1); }
.g-faixa--2 { fill: var(--seg2); }
.g-faixa--3 { fill: var(--seg3); }
.g-faixa--4 { fill: var(--papel-2); }
.kpi-linha { display: flex; align-items: flex-end; gap: var(--e-12); flex-wrap: wrap; }
.kpi-linha .grafico { width: 96px; flex: none; }
.legenda-niveis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e-12); }
.legenda-niveis > div { border-left: 3px solid var(--seg2); padding-left: var(--e-8); }
.legenda-niveis > div:first-child { border-left-color: var(--marca); }

/* ---------------------------------------------------------------- mapa da equipe [Sessão 12] */

.mapa-rolagem { overflow-x: auto; }
.mapa-rolagem .mapa { min-width: 640px; }
.mapa a { cursor: pointer; }
.mapa-no { fill: var(--seg1); stroke: var(--superficie); stroke-width: 1; }
.mapa-no--1 { fill: var(--seg1); }
.mapa-no--2 { fill: var(--seg2); }
.mapa-no--3 { fill: var(--seg3); }
.mapa-no--foco { fill: var(--cartao-tinta); }
.mapa a:hover .mapa-no, .mapa a:focus .mapa-no { fill: var(--seg1-h); }
.mapa a:hover .mapa-no--foco { fill: var(--cartao-tinta); }
.mapa-texto { font-size: 13px; font-weight: 550; fill: var(--tinta); pointer-events: none; }
.mapa-texto--foco { fill: var(--cartao-texto); font-weight: 650; }
.mapa-sub { font-size: 11px; }
.lista-item--link { color: var(--tinta); text-decoration: none; border-radius: var(--r-controle); }
.lista-item--link:hover { background: var(--papel); }

/* ---------------------------------------------------------------- painel do dono [Sessão 13a] */

.mini-largo .grafico { max-width: 260px; }
.topo-foco { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-20); }
.bloco { display: block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.botao--quebra { white-space: normal; text-align: left; height: auto; padding-top: 8px; padding-bottom: 8px; }
.passos { display: grid; gap: var(--e-8); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.passo { display: flex; align-items: center; gap: var(--e-8); padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--superficie); color: var(--tinta); text-decoration: none; font-size: var(--t-14); }
.passo:hover { border-color: var(--tinta-3); }
.passo--feito { color: var(--tinta-3); text-decoration: line-through; }
.passo--feito .icone { color: var(--pago); }
.ajuda-item { display: block; }
.requisito { display: flex; flex-direction: column; gap: 6px; padding: var(--e-8) 0; }
.requisito--gargalo { padding: var(--e-12); border-radius: var(--r-controle); background: var(--papel); }
.requisito .selo { align-self: flex-start; }
.linha-destaque td { background: var(--papel); }
.carreira-cartao { flex-direction: row; align-items: center; color: var(--tinta); text-decoration: none; }
.carreira-cartao:hover { border-color: var(--tinta-3); }
.ajuda-item summary { cursor: pointer; }
.ajuda-item p { margin-top: var(--e-8); }
.titulo-3 { margin: 0; }
.grade-destaque { display: grid; gap: var(--e-16); }
.grade-destaque > * { min-width: 0; }
@media (min-width: 720px) { .grade-destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .grade-destaque { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
  .grade-destaque--3 { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- impressão */

/* ---------------------------------------------------------------- painel central [Sessão 18a] */

.cartao--link { color: var(--tinta); text-decoration: none; }
.cartao--link:hover { border-color: var(--tinta-3); }
.cartao--link .numero-grande { color: var(--tinta); }

@media print {
  @page { margin: 0; }
  body { background: #fff; }
  .nao-imprime, .lateral, .topo-acoes { display: none !important; }
  .app { display: block; }
  .tabela thead { display: table-header-group; }
  .tabela tr { break-inside: avoid; }
}