/* Visão Comercial — mesma identidade do gestão/painel AFS:
   Montserrat, roxo açaí no topo, conteúdo em lavanda claro, cards brancos. */
:root {
  --roxo: #51275D;
  --roxo-2: #6f3c88;
  --roxo-3: #8a4fa6;
  --roxo-borda: #431f4d;
  --lavanda: #F5EFF7;
  --lavanda-2: #E9DEEE;
  --lavanda-3: #B99FC4;
  --borda: #DCCFE3;
  --borda-forte: #c7b6d1;
  --texto: #2A1626;
  --suave: #6B5873;
  --mudo: #8a7796;
  --branco: #ffffff;
  --verde: #1f6e43;
  --verde-bg: #e3f3e8;
  --vermelho: #a3261e;
  --vermelho-bg: #fbe3e1;
  --ambar: #8a5a00;
  --ambar-bg: #fcefd4;
  --barra: #51275D;
  --barra-fora: #cdbad8;
  --sombra: 0 1px 2px rgba(81, 39, 93, .06), 0 4px 14px rgba(81, 39, 93, .06);
  --serie: #51275D;                          /* barras de série única */
  --periodo-bg: rgba(185, 159, 196, .16);
  --periodo-hover: rgba(185, 159, 196, .3);
  --hover-linha: #faf6fb;
  --filtros-bg: rgba(245, 239, 247, .96);
  --brilho: #f3ebf6;
  --sombra-forte: rgba(39, 18, 48, .38);
  --destaque-topo: var(--lavanda-3);         /* subtítulo do login */
  --raio: 12px;
  --raio-sm: 8px;
}

/* Tema por marca: a página acompanha a informação em foco.
   Trendpel = verde, Saborazzi = dourado TFS. Só redefine tokens. */
body[data-tema="trendpel"] {
  --roxo: #2f5a0a; --roxo-2: #4f8a0c; --roxo-3: #427509; --roxo-borda: #24470a;
  --lavanda: #f2f6ec; --lavanda-2: #e1ebd2; --lavanda-3: #a8c77c;
  --borda: #d5e2c2; --borda-forte: #bccf9f; --texto: #1d2814; --suave: #536247; --mudo: #74826a;
  --serie: #4f8a0c; --periodo-bg: rgba(110, 160, 40, .12); --periodo-hover: rgba(110, 160, 40, .24);
  --hover-linha: #f5f9ef; --filtros-bg: rgba(242, 246, 236, .96); --brilho: #edf3e4;
  --sombra: 0 1px 2px rgba(47, 90, 10, .07), 0 4px 14px rgba(47, 90, 10, .07);
  --sombra-forte: rgba(24, 40, 8, .38); --destaque-topo: #cfe3ad;
}
body[data-tema="saborazzi"] {
  --roxo: #6b4f17; --roxo-2: #a8822f; --roxo-3: #876620; --roxo-borda: #54400f;
  --lavanda: #f8f4ea; --lavanda-2: #eee4cf; --lavanda-3: #d6bd85;
  --borda: #e6dbc2; --borda-forte: #d3c29b; --texto: #2a2010; --suave: #6a5c43; --mudo: #8a7c62;
  --serie: #c09840; --periodo-bg: rgba(192, 152, 64, .13); --periodo-hover: rgba(192, 152, 64, .26);
  --hover-linha: #fbf8f0; --filtros-bg: rgba(248, 244, 234, .96); --brilho: #f5eedf;
  --sombra: 0 1px 2px rgba(107, 79, 23, .07), 0 4px 14px rgba(107, 79, 23, .07);
  --sombra-forte: rgba(42, 30, 8, .38); --destaque-topo: #ead9ad;
}
body, .topo, .filtros, .kpi, .painel, .gaveta, .gaveta-cab, .abas button, .chip, .btn-usuario, .pilha i, .spark i, .bullet-trilho i, .rk-trilho i {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce) { body, .topo, .filtros, .kpi, .painel, .gaveta, .chip { transition: none; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--lavanda);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--roxo-2); outline-offset: 2px; }

/* ── botões ─────────────────────────────────────── */
.btn {
  border: 0; border-radius: var(--raio-sm); padding: 9px 16px; font-weight: 700;
  transition: background-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario:hover { background: var(--roxo-2); }
.btn-secundario { background: var(--branco); color: var(--roxo); border: 1px solid var(--borda-forte); }
.btn-secundario:hover { background: var(--lavanda-2); }
.btn-perigo { background: var(--branco); color: var(--vermelho); border: 1px solid #e6b7b2; }
.btn-perigo:hover { background: var(--vermelho-bg); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn-icone {
  border: 1px solid var(--borda-forte); background: var(--branco); color: var(--roxo);
  width: 34px; height: 34px; border-radius: var(--raio-sm); font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icone:hover { background: var(--lavanda-2); }
.link { background: none; border: 0; color: var(--roxo); font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

/* ── login ──────────────────────────────────────── */
.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(160deg, var(--roxo) 0%, var(--roxo) 36%, var(--lavanda) 36%);
}
.login-card { width: 100%; max-width: 380px; background: var(--branco); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 36px var(--sombra-forte); }
.login-topo { background: var(--roxo); color: #fff; display: flex; gap: 14px; align-items: center; padding: 22px 24px; }
.login-topo img { height: 46px; width: auto; }
.login-topo h1 { font-size: 20px; }
.login-topo p { margin: 2px 0 0; color: var(--destaque-topo); font-size: 13px; }
.login-corpo { padding: 22px 24px 24px; display: grid; gap: 6px; }
.login-corpo label { font-weight: 600; font-size: 13px; margin-top: 6px; }
.login-corpo input { border: 1px solid var(--borda); border-radius: 10px; padding: 11px 12px; background: var(--lavanda); font-size: 15px; }
.login-corpo input:focus { background: var(--branco); }
.login-corpo .btn { margin-top: 8px; padding: 12px; font-size: 15px; }
.erro { color: var(--vermelho); min-height: 18px; font-size: 13px; margin: 4px 0 0; }

/* ── topo ───────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 60px;
  background: var(--roxo); color: #fff; border-bottom: 1px solid var(--roxo-borda);
}
.topo-marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; white-space: nowrap; }
.topo-marca img { height: 30px; width: auto; }
.abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  background: none; border: 0; color: #e9dcee; padding: 8px 12px; border-radius: 8px;
  font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.abas button:hover { background: var(--roxo-3); color: #fff; }
.abas button.ativa { background: var(--lavanda); color: var(--roxo); }
.contador { background: #f0b03a; color: #3a2500; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
.topo-usuario { position: relative; }
.btn-usuario {
  background: var(--roxo-2); border: 0; color: #fff; border-radius: 999px; padding: 7px 14px;
  font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--branco); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-sm); box-shadow: var(--sombra);
  min-width: 170px; padding: 4px; display: grid; z-index: 40;
}
.menu button { background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 6px; }
.menu button:hover { background: var(--lavanda); }

/* ── filtros ────────────────────────────────────── */
.filtros {
  position: sticky; top: 60px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px;
  padding: 12px 20px; background: var(--filtros-bg); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borda);
}
.filtro-grupo { display: grid; gap: 5px; }
.filtro-rotulo { font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.periodo select, .periodo input, .filtro-tabela input, .filtro-tabela select, .inline-form input, .campo {
  border: 1px solid var(--borda-forte); background: var(--branco); border-radius: var(--raio-sm); padding: 7px 10px; height: 34px;
}
.ate { color: var(--suave); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--borda-forte); background: var(--branco); color: var(--suave);
  border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; height: 34px;
}
.chip[aria-pressed="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.filtro-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.status { font-size: 12px; color: var(--suave); }

/* ── avisos ─────────────────────────────────────── */
.aviso {
  margin: 16px 20px 0; padding: 12px 16px; border-radius: var(--raio-sm);
  background: var(--ambar-bg); color: var(--ambar); border: 1px solid #f0d49b;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.aviso-erro { background: var(--vermelho-bg); color: var(--vermelho); border-color: #f0bcb6; }
.aviso strong { font-weight: 700; }

/* ── dashboard ──────────────────────────────────── */
#secoes { padding: 14px 20px 40px; max-width: 1600px; margin: 0 auto; display: grid; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1360px) { .kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.kpi {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px 10px;
  text-align: left; display: flex; flex-direction: column; gap: 3px; min-height: 148px; box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s;
}
.kpi:hover { border-color: var(--lavanda-3); transform: translateY(-1px); }
.kpi:active { transform: translateY(0); }
.kpi-titulo { font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.kpi-valor { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.kpi-na { color: var(--mudo); }
.kpi-var { font-size: 12px; font-weight: 700; display: flex; gap: 5px; flex-wrap: wrap; }
.kpi-var .comp { color: var(--mudo); font-weight: 500; }
.kpi-meta { font-size: 11.5px; color: var(--suave); display: flex; justify-content: space-between; gap: 6px; }
.kpi-meta b { font-variant-numeric: tabular-nums; }
.spark { margin-top: auto; height: 28px; display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; align-items: end; padding-top: 4px; }
.spark i { display: block; background: var(--lavanda-2); border-radius: 2px 2px 0 0; }
.spark i.on { background: var(--roxo-2); }
.sobe { color: var(--verde); }
.desce { color: var(--vermelho); }
.neutro { color: var(--suave); }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.painel {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.span8 { grid-column: span 8; } .span7 { grid-column: span 7; } .span6 { grid-column: span 6; }
.span5 { grid-column: span 5; } .span4 { grid-column: span 4; }
.painel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.painel-cab h2 { font-size: 14.5px; font-weight: 800; color: var(--texto); }
.painel-cab p { margin: 2px 0 0; font-size: 12px; color: var(--suave); }
.link-detalhe { background: none; border: 0; color: var(--roxo); font-weight: 700; font-size: 12px; padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.link-detalhe:hover { background: var(--lavanda); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--suave); align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda-sm { font-size: 11.5px; gap: 4px 12px; }
.leg-periodo { margin-left: auto; font-size: 11px; color: var(--mudo); font-weight: 500; }
.leg-meta, .rk-trilho em, .bullet-trilho em { display: inline-block; width: 2px; height: 12px; background: var(--texto); border-radius: 1px; }
.mini-rot { font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }

/* colunas (13 meses) */
.colunas { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: var(--alt) auto; }
.col-eixo { position: relative; font-size: 10.5px; color: var(--mudo); font-variant-numeric: tabular-nums; }
.col-eixo span { position: absolute; right: 8px; transform: translateY(50%); white-space: nowrap; }
.col-area { position: relative; border-bottom: 1px solid var(--borda-forte); }
.col-grade { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lavanda-2); }
.col-barras { position: absolute; inset: 0; display: grid; gap: 2px; padding: 0 2px; }
.col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px 6px 0 0; }
.col.no-periodo { background: var(--periodo-bg); }
.col:hover, .col:focus-visible { background: var(--periodo-hover); outline: none; }
.pilha { width: min(70%, 36px); height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.pilha i { display: block; width: 100%; flex: none; }
.pilha i.seg-topo { border-radius: 4px 4px 0 0; }
.col:not(.no-periodo) .pilha { opacity: .62; }
.rot-valor { position: absolute; font-size: 10.5px; font-weight: 700; color: var(--texto); white-space: nowrap; transform: translateY(-5px); z-index: 1; }
.col-meses { display: grid; gap: 2px; padding: 4px 2px 0; font-size: 10.5px; color: var(--mudo); text-align: center; }
.col-meses span { overflow: hidden; white-space: nowrap; }
.col-meses b { font-weight: inherit; }
.lab-curta, .colunas.compacto .lab-full { display: none; }
.colunas.compacto .lab-curta { display: inline; }
@media (max-width: 760px) { .lab-full { display: none; } .lab-curta { display: inline; } }
.col-meses span.on { color: var(--roxo); font-weight: 700; }

/* bullets (meta × realizado) */
.bullets { display: grid; gap: 12px; }
.bullet { display: grid; gap: 5px; border-radius: 8px; }
.bullet.clicavel { cursor: pointer; margin: -4px -6px; padding: 4px 6px; }
.bullet.clicavel:hover, .sub-bloco.clicavel:hover { background: var(--hover-linha); }
.bullet-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; align-items: baseline; flex-wrap: wrap; }
.bullet-rot { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.bullet-rot i { width: 10px; height: 10px; border-radius: 3px; }
.bullet-val { font-size: 12px; color: var(--suave); white-space: nowrap; }
.bullet-val b { color: var(--texto); font-size: 13px; font-variant-numeric: tabular-nums; }
.bullet-trilho { position: relative; height: 10px; background: var(--lavanda-2); border-radius: 99px; }
.bullet-trilho i { display: block; height: 100%; border-radius: 99px; }
.bullet-trilho em { position: absolute; top: -3px; height: 16px; transform: translateX(-1px); }
.bullet-det { font-size: 11.5px; color: var(--suave); }
.participacao { display: grid; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--lavanda-2); }
.barra-100 { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--branco); }
.barra-100.alta { height: 20px; border-radius: 6px; margin-top: 4px; }
.barra-100 i { display: block; height: 100%; }
.sub-bloco { margin-top: 2px; padding: 10px 6px 0; border-top: 1px solid var(--lavanda-2); display: grid; gap: 8px; border-radius: 8px; }
.sub-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--suave); flex-wrap: wrap; }
.sub-cab b { color: var(--texto); }
.mini-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }
.mini-valor { font-size: 22px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* rankings */
.ranking { display: grid; gap: 7px; }
.rk-linha { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 92px; gap: 10px; align-items: center; font-size: 12.5px; border-radius: 6px; padding: 2px 4px; }
.rk-linha:hover, .rk-linha:focus-visible { background: var(--hover-linha); outline: none; }
.rk-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: grid; line-height: 1.2; }
.rk-nome small { font-weight: 500; color: var(--mudo); font-size: 10.5px; }
.rk-trilho { position: relative; height: 14px; display: flex; gap: 2px; }
.rk-trilho i { display: block; height: 100%; }
.rk-trilho i:first-child { border-radius: 4px 0 0 4px; }
.rk-trilho i:nth-child(2) { border-radius: 0 4px 4px 0; }
.rk-trilho em { position: absolute; top: -2px; height: 18px; }
.rk-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: grid; line-height: 1.2; }
.rk-val small { font-weight: 600; font-size: 10.5px; color: var(--suave); }
.tip-linha { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tip-linha i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tip-linha b { margin-left: auto; padding-left: 10px; }

@media (max-width: 1040px) {
  .span8, .span7, .span5 { grid-column: span 12; }
  .span6 { grid-column: span 6; }
  .span4 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .span8, .span7, .span6, .span5, .span4 { grid-column: span 12; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { min-height: 136px; padding: 10px 12px; }
  .kpi-valor { font-size: 18px; }
  .colunas { grid-template-columns: 40px minmax(0, 1fr); }
  .col-meses { font-size: 8.5px; }
  .rk-linha { grid-template-columns: 96px minmax(0, 1fr) 76px; }
}
/* recarga com dados na tela: os cards ficam, esmaecidos, até a resposta chegar */
#secoes { transition: opacity .2s ease; }
#secoes.carregando { opacity: .55; }
.esqueleto { background: linear-gradient(90deg, var(--lavanda-2) 25%, var(--brilho) 50%, var(--lavanda-2) 75%); background-size: 200% 100%; border-radius: 6px; animation: brilho 1.4s ease-in-out infinite; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } .card, .btn { transition: none; } }

/* ── gaveta de detalhe ──────────────────────────── */
.gaveta-fundo { position: fixed; inset: 0; background: var(--sombra-forte); z-index: 50; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(980px, 100vw); z-index: 60;
  background: var(--lavanda); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(39, 18, 48, .2);
}
.gaveta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px; background: var(--branco); border-bottom: 1px solid var(--borda); }
.gaveta-secao { margin: 0 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.gaveta-cab h2 { font-size: 20px; color: var(--roxo); }
.gaveta-corpo { overflow-y: auto; padding: 18px 22px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.gaveta-corpo > * { min-width: 0; }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.resumo div { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; }
.resumo span { display: block; font-size: 11px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.resumo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.nota { font-size: 12.5px; color: var(--suave); margin: 0; }
.painel-branco { min-width: 0; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.painel-branco h3 { font-size: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* distribuição horizontal */
.dist { display: grid; gap: 7px; }
.dist-linha { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.dist-linha .trilho { height: 10px; }
.dist-linha .trilho i { display: block; height: 100%; background: var(--barra); border-radius: 0 4px 4px 0; }
.dist-linha b { text-align: right; font-variant-numeric: tabular-nums; }

/* ── tabelas ────────────────────────────────────── */
.tabela-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave);
  font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--borda-forte); white-space: nowrap; background: var(--branco);
  position: sticky; top: 0;
}
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--roxo); }
td { padding: 8px 10px; border-bottom: 1px solid var(--lavanda-2); vertical-align: middle; }
tbody tr:hover td { background: var(--hover-linha); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 800; border-top: 1px solid var(--borda-forte); border-bottom: 0; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--lavanda-2); color: var(--roxo); white-space: nowrap; }
.tag-mudo { background: #efeaf1; color: var(--suave); }
.tag-verde { background: var(--verde-bg); color: var(--verde); }
.tag-ambar { background: var(--ambar-bg); color: var(--ambar); }

/* ── páginas de cadastro ────────────────────────── */
.pagina { max-width: 1180px; margin: 0 auto; padding: 22px 20px 48px; display: grid; gap: 16px; }
.pagina-cab h2 { font-size: 22px; color: var(--roxo); }
.pagina-cab p { margin: 6px 0 0; color: var(--suave); max-width: 75ch; }
.bloco { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; display: grid; gap: 12px; }
.bloco h3 { font-size: 15px; }
.bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { width: 170px; }
.filtro-tabela { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-tabela input { min-width: 240px; flex: 1; max-width: 360px; }
.campo { height: 32px; padding: 4px 8px; min-width: 0; }
select.campo { padding-right: 4px; }
input.campo.num { text-align: right; width: 140px; font-variant-numeric: tabular-nums; }
.vazio { color: var(--suave); padding: 6px 0; margin: 0; }
.legenda-classes { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.legenda-classes dt { font-weight: 700; }
.legenda-classes dd { margin: 0; color: var(--suave); }
.check { display: inline-flex; align-items: center; gap: 6px; }
.check input { width: 16px; height: 16px; accent-color: var(--roxo); }

/* ── modal / tooltip / toast ────────────────────── */
.modal {
  position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); background: var(--branco); border-radius: 14px; padding: 20px;
  box-shadow: 0 20px 50px rgba(39, 18, 48, .3); display: grid; gap: 12px;
}
.modal h2 { font-size: 18px; color: var(--roxo); }
.modal form { display: grid; gap: 10px; }
.modal label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.modal input, .modal select { border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); padding: 9px 10px; }
.modal .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tooltip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--texto); color: #fff;
  font-size: 12px; padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); max-width: 260px;
}
.tooltip b { font-variant-numeric: tabular-nums; }
.toast {
  position: fixed; z-index: 95; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.toast.erro { background: var(--vermelho); }

/* ── telas pequenas ─────────────────────────────── */
@media (max-width: 860px) {
  .topo { gap: 10px; padding: 0 12px; }
  .topo-marca span { display: none; }
  .filtros { position: static; padding: 12px 16px; }
  .filtro-acoes { margin-left: 0; width: 100%; justify-content: space-between; }
  #secoes { padding: 12px 16px 32px; }
  .aviso { margin: 12px 16px 0; }
  .gaveta-cab, .gaveta-corpo { padding-left: 16px; padding-right: 16px; }
  .pagina { padding: 16px 16px 40px; }
}
@media (max-width: 560px) {
  .periodo input { width: 140px; }
  .dist-linha { grid-template-columns: 110px 1fr 54px; }
  .btn-usuario { max-width: 110px; }
}

.leg-marca { background: none; border: 0; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12px; }
.leg-marca:hover { background: var(--hover-linha); color: var(--texto); }
.leg-marca i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.leg-marca b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ── configuração padrão (abas de cadastro) ─────── */
.barra-padrao:empty { display: none; }
.barra-padrao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--verde);
  border-radius: var(--raio); padding: 12px 16px;
}
.barra-padrao.alterada { border-left-color: #e0a526; }
.padrao-info { display: flex; align-items: center; gap: 12px; }
.padrao-info b { display: block; font-size: 14px; }
.padrao-info span { font-size: 12px; color: var(--suave); }
.padrao-icone {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--verde-bg); color: var(--verde);
}
.barra-padrao.alterada .padrao-icone { background: var(--ambar-bg); color: var(--ambar); }
.padrao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-dif { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }

/* ── movimento: entrada ao trocar de aba e revelação ao rolar ──
   Mesma linguagem do painel de entregas (sobe 12px + aparece, em sequência).
   Só vale com a classe .anima no <html>: sem JS, ou com "reduzir movimento"
   ligado no sistema, tudo aparece direto. */
@keyframes vc-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.anima .entra > * { animation: vc-entra .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }

.anima .revelar {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1),
              border-color .35s ease, background-color .35s ease;
  transition-delay: var(--atraso, 0ms);
}
.anima .revelar.visivel { opacity: 1; transform: none; }
.anima .revelar.visivel:hover { transform: translateY(-1px); transition-delay: 0ms; }
/* os gráficos "crescem" quando o bloco aparece */
.anima .revelar .pilha, .anima .revelar .spark {
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--atraso, 0ms) + 120ms + var(--c, 0) * 28ms);
}
.anima .revelar .rk-trilho, .anima .revelar .bullet-trilho, .anima .revelar .barra-100 {
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), background-color .35s ease;
  transition-delay: calc(var(--atraso, 0ms) + 160ms + var(--c, 0) * 40ms);
}
.anima .revelar.visivel .pilha, .anima .revelar.visivel .spark,
.anima .revelar.visivel .rk-trilho, .anima .revelar.visivel .bullet-trilho, .anima .revelar.visivel .barra-100 { transform: none; }
.anima .rot-valor { transition: opacity .3s ease .7s; }
.anima .revelar:not(.visivel) .rot-valor { opacity: 0; }