/* Controle SAC — Luminatti (mesma base visual do Controle de Brindes).
   Contraste por camadas: barra preta, fundo cinza, conteúdo em superfícies brancas bem delimitadas.
   Em cada página, um único ponto focal escuro com o valor em amarelo ("a luminária acesa").
   Amarelo #FCC972 só onde o olho deve ir: ação principal, item ativo do menu, valor em destaque. */
:root {
  --preto: #1D1D1B;
  --preto-2: #2C2C29;
  --preto-3: #45453F;
  --cinza: #585857;
  --cinza-2: #77776F;
  --fundo: #E7E7E2;
  --superficie: #FFFFFF;
  --zebra: #F5F5F1;
  --linha: #CFCFC8;
  --linha-forte: #A9A9A1;
  --amarelo: #FCC972;
  --amarelo-forte: #F0B04A;
  --amarelo-claro: #FFF1CF;
  --ok: #1F5A2B;
  --ok-fundo: #D6ECD9;
  --atencao: #6B4700;
  --atencao-fundo: #FFE2A1;
  --erro: #8A1F17;
  --erro-fundo: #F7D0CB;
  --raio: 8px;
  /* papéis: o que muda entre o tema claro e o escuro */
  color-scheme: light;
  --tinta: #1D1D1B;            /* texto */
  --sobre-amarelo: #1D1D1B;    /* texto em cima do amarelo (igual nos dois temas) */
  --chrome: #1D1D1B;           /* barra superior, menu do usuário, dica dos gráficos */
  --cabecalho: #1D1D1B;        /* cabeçalho das tabelas */
  --foco: #1D1D1B;             /* cartão de destaque, opção ativa */
  --foco-borda: #1D1D1B;
  --login-topo: #1D1D1B;
  --campo: #FFFFFF;
  --superficie-2: #EFEFE9;
  --linha-suave: #E3E3DD;
  --grade: #E9E9E4;
  --zero: #B4B4AC;
  --realce: rgba(29, 29, 27, .06);
  --sombra: rgba(29, 29, 27, .18);
  --ok-borda: #9CCBA4;
  --atencao-borda: #E8C06A;
  --erro-borda: #DFA39B;
  --repor: #6B2E00;
  --repor-fundo: #FFD3B0;
  --repor-borda: #E8A26A;
  --neutro: #3E3E3A;
  --neutro-fundo: #E4E4DE;
  --neutro-borda: #C9C9C1;
  --info: #1F3B5C;
  --info-fundo: #E3ECF6;
  --info-borda: #AFC3DA;
  /* séries dos gráficos (par validado para daltonismo sobre a superfície de cada tema) */
  --serie-entradas: #2A78D6;
  --serie-saidas: #EB6834;
}

/* Tema escuro: as mesmas camadas, invertidas. O amarelo continua sendo o ponto de luz. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --tinta: #ECECE6;
  --cinza: #B0B0A8;
  --cinza-2: #8C8C84;
  --fundo: #141413;
  --superficie: #1E1E1C;
  --superficie-2: #2A2A27;
  --zebra: #232321;
  --campo: #262624;
  --linha: #3A3A36;
  --linha-forte: #5A5A54;
  --linha-suave: #2E2E2B;
  --grade: #30302D;
  --zero: #5F5F59;
  --amarelo-claro: #3D3320;
  --chrome: #0C0C0B;
  --cabecalho: #30302D;
  --foco: #0C0C0B;
  --foco-borda: #5C4A26;
  --login-topo: #FCC972;
  --ok: #9BD3A6;
  --ok-fundo: #1E3324;
  --ok-borda: #2F5A3A;
  --atencao: #F2CF82;
  --atencao-fundo: #3D3116;
  --atencao-borda: #6B5320;
  --erro: #F1A9A1;
  --erro-fundo: #3F1F1C;
  --erro-borda: #6E332D;
  --repor: #F3B98A;
  --repor-fundo: #3F2A18;
  --repor-borda: #6E4A2A;
  --neutro: #D0D0C8;
  --neutro-fundo: #33332F;
  --neutro-borda: #4A4A45;
  --info: #A9C6EA;
  --info-fundo: #1F2C3D;
  --info-borda: #35506F;
  --realce: rgba(255, 255, 255, .07);
  --sombra: rgba(0, 0, 0, .5);
  --serie-entradas: #3987E5;
  --serie-saidas: #D95926;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
}
a { color: var(--tinta); text-decoration-color: var(--amarelo-forte); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--tinta); background: var(--amarelo-claro); }
h1 { font-size: 26px; line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 30px 0 12px; font-weight: 700; }
h3 { font-size: 15px; margin: 18px 0 8px; font-weight: 700; }
.sub { color: var(--cinza); margin: 6px 0 0; max-width: 90ch; }
.sub.nota { margin: -6px 0 12px; max-width: none; }
.muted { color: var(--cinza); }
.pequeno { font-size: 12px; }
.forte { font-weight: 700; }
.zero { color: var(--zero); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.contagem { margin: 0 0 8px; }
/* só para leitores de tela */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- barra superior ---------- */
.topo { background: var(--chrome); position: sticky; top: 0; z-index: 20; border-bottom: 3px solid var(--amarelo); }
.topo-in { display: flex; align-items: center; gap: 20px; padding: 0 24px; max-width: 1600px; margin: 0 auto; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px 0; }
.logo:hover { background: none; }
.logo img { height: 44px; width: auto; display: block; }
.logo span { color: #BDBDB5; font-size: 12px; border-left: 1px solid var(--preto-3); padding-left: 12px; white-space: nowrap; }
nav.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; align-self: stretch; }
nav.menu a {
  display: flex; align-items: center; text-decoration: none; padding: 0 14px; color: #D9D9D2; font-size: 14px;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
nav.menu a:hover { color: #fff; background: var(--preto-2); }
nav.menu a.ativo { color: #fff; font-weight: 700; border-bottom-color: var(--amarelo); background: var(--preto-2); }
.quem { display: flex; align-items: center; gap: 12px; color: #BDBDB5; font-size: 13px; white-space: nowrap; }
.quem a { color: #D9D9D2; }
.quem a.btn, .quem a.btn:hover { color: var(--sobre-amarelo); }
/* menu do usuário: ícone com a inicial; dentro, conta, senha, administração (Trade) e sair */
.usuario-menu { position: relative; }
.usuario-menu > summary { list-style: none; margin: 0; display: flex; align-items: center; gap: 4px; }
.usuario-menu > summary::-webkit-details-marker { display: none; }
.usuario-menu > summary::after { content: "▾"; font-size: 10px; color: #BDBDB5; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  color: #F2F2EC; background: var(--preto-2); border: 1px solid #8C8C84;
}
.usuario-menu > summary:hover .avatar, .usuario-menu[open] .avatar, .usuario-menu.ativo .avatar { border-color: var(--amarelo); color: #fff; }
.usuario-menu > summary:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; border-radius: 20px; }
.usuario-lista {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: var(--chrome); border: 1px solid var(--preto-3);
  border-top: 3px solid var(--amarelo); display: grid; padding: 6px 0; z-index: 30; white-space: nowrap;
}
.usuario-quem { display: grid; gap: 2px; padding: 8px 16px 10px; border-bottom: 1px solid var(--preto-3); margin-bottom: 4px; }
.usuario-quem b { color: #fff; font-size: 14px; }
.usuario-quem span { color: #BDBDB5; font-size: 12px; }
.usuario-secao { padding: 10px 16px 4px; color: #8C8C84; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quem .usuario-lista a, .usuario-lista button {
  display: block; padding: 8px 16px; color: #D9D9D2; font-size: 14px; text-decoration: none; text-align: left;
  background: none; border: 0; width: 100%; cursor: pointer; font: inherit;
}
.quem .usuario-lista a:hover, .usuario-lista button:hover { background: var(--preto-2); color: #fff; }
.quem .usuario-lista a.ativo { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--amarelo); }
.usuario-lista form { margin: 4px 0 0; border-top: 1px solid var(--preto-3); padding-top: 4px; }
.quem a:hover { background: none; color: #fff; }
.quem form { margin: 0; }
/* exportar em Excel: contorno claro sobre o preto (o amarelo cheio fica só para "+ Envio") */
.topo .btn.exportar { background: transparent; color: #F2F2EC; border-color: #8C8C84; }
.topo .btn.exportar:hover { background: var(--preto-2); color: #fff; border-color: var(--amarelo); }
/* botão claro/escuro: mostra o ícone do tema para o qual ele muda (lua no claro, sol no escuro) */
.tema-botao {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: #F2F2EC; background: var(--preto-2); border: 1px solid #8C8C84;
}
.tema-botao:hover { border-color: var(--amarelo); color: var(--amarelo); }
.tema-botao svg { width: 18px; height: 18px; display: block; }
.tema-botao .sol, :root[data-tema="escuro"] .tema-botao .lua { display: none; }
:root[data-tema="escuro"] .tema-botao .sol { display: block; }
.tema-botao.solto { position: fixed; top: 16px; right: 16px; }
:root:not([data-tema="escuro"]) .so-escuro, :root[data-tema="escuro"] .so-claro { display: none !important; }

main { max-width: 1600px; margin: 0 auto; padding: 26px 24px 40px; }
.titulo-pagina {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.paginacao { margin-top: 10px; }
.filtro-ativo { margin: -8px 0 18px; padding: 8px 12px; background: var(--amarelo-claro); border: 1px solid var(--amarelo-forte); border-radius: 6px; display: inline-block; }

/* ---------- botões ---------- */
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--amarelo-forte); background: var(--amarelo); color: var(--sobre-amarelo);
}
.btn:hover { background: var(--amarelo-forte); color: var(--sobre-amarelo); }
.btn.sec { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); }
.btn.sec:hover { border-color: var(--tinta); background: var(--superficie); color: var(--tinta); }
.btn.perigo { background: var(--superficie); color: var(--erro); border-color: var(--erro-borda); }
.btn.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.btn.peq { padding: 4px 10px; font-size: 12px; }
.perigo-txt { color: var(--erro) !important; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amarelo-forte); outline-offset: 2px;
}
/* alternância itens / R$ */
.alternar { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 6px; overflow: hidden; background: var(--superficie); }
.alternar a { padding: 8px 14px; text-decoration: none; font-weight: 700; color: var(--cinza); }
.alternar a + a { border-left: 1px solid var(--linha-forte); }
.alternar.peq a { padding: 5px 12px; font-size: 13px; }
.alternar a.ativo { background: var(--foco); color: var(--amarelo); }
.alternar a:hover:not(.ativo) { background: var(--amarelo-claro); color: var(--tinta); }

/* ---------- formulários ---------- */
form.pilha { display: grid; gap: 16px; max-width: 760px; }
form.pilha.largo { max-width: 1180px; }
.campo { display: grid; gap: 5px; align-content: start; }
.campo label, .rotulo { font-weight: 700; font-size: 13px; }
.campo .ajuda, .ajuda { color: var(--cinza); font-size: 12px; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  font: inherit; color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linha-forte); border-radius: 6px; padding: 8px 10px; width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--cinza); }
textarea { min-height: 70px; resize: vertical; }
input[type=file] { font: inherit; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.opcoes-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes-radio label {
  display: flex; gap: 8px; align-items: center; border: 1px solid var(--linha-forte); border-radius: 6px;
  padding: 8px 12px; background: var(--superficie); cursor: pointer; font-weight: 400; font-size: 14px;
}
.opcoes-radio label:has(input:checked) { border: 2px solid var(--tinta); padding: 7px 11px; background: var(--amarelo-claro); font-weight: 700; }
/* bloco do formulário: cartão com o título dentro, no topo (não em cima da borda) */
.bloco { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 16px 18px 18px; display: grid; gap: 12px; min-width: 0; }
.bloco > h3 { margin: 0; font-size: 14px; }
.bloco > .ajuda { margin: -6px 0 0; }
/* a tabela de clientes do representante só aparece quando há pelo menos um cliente */
.bloco .tabela-wrap:has(> table.vias):not(:has([data-via])) { display: none; }
.grade-brindes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.painel.destino { display: grid; gap: 14px; margin: 0; }
.resumo-dest { margin: 0; }
.resumo-dest:empty { display: none; }

.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px;
}
.filtros .campo { min-width: 150px; }
.filtros select { max-width: 280px; }
.filtros input[type=search] { min-width: 240px; }
.painel .filtros { background: none; border: 0; padding: 8px 0 0; }
.filtros.novo { margin-top: 12px; }
.linha-form { display: flex; gap: 8px; align-items: center; }

/* busca de cliente (lista do SAP) */
.busca-cliente { position: relative; }
.busca-cliente .escolhido {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--amarelo-claro);
  border: 1px solid var(--amarelo-forte); border-radius: 6px; padding: 7px 10px;
}
.busca-cliente .resultados {
  list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 10; top: 100%; left: 0; right: 0; min-width: 320px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 6px; max-height: 320px; overflow: auto;
  box-shadow: 0 8px 24px var(--sombra);
}
.busca-cliente .resultados button {
  display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 4px;
  padding: 7px 9px; cursor: pointer; color: var(--tinta);
}
.busca-cliente .resultados button span { color: var(--cinza); font-size: 12px; }
.busca-cliente .resultados button:hover, .busca-cliente .resultados button:focus-visible { background: var(--amarelo-claro); }
.busca-cliente .resultados .vazio { padding: 10px; text-align: left; }
/* sem corte: a lista de resultados da busca abre por cima da tabela */
.tabela-wrap.sem-corte { overflow: visible; }
table.vias td { vertical-align: top; }
table.vias .via-cliente { min-width: 300px; }
table.vias input[type=number] { min-width: 74px; }
table.cadastro input { min-width: 120px; }
table.cadastro input.curto { min-width: 84px; width: 100px; }
table.cadastro td { vertical-align: middle; }

/* ---------- mensagens ---------- */
.flash { padding: 12px 16px; border-radius: var(--raio); margin-bottom: 18px; border: 1px solid; font-weight: 700; }
.flash.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.flash.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.flash.aviso { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao); }
.erro-txt { color: var(--erro); }
.aviso-linha { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px;
  background: var(--atencao-fundo); color: var(--atencao); }
.aviso { background: var(--amarelo-claro); border: 1px solid var(--amarelo-forte); border-left-width: 5px; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.erros { background: var(--erro-fundo); border: 1px solid var(--erro-borda); border-left-width: 5px; color: var(--erro); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; }
.erros ul { margin: 0; padding-left: 18px; }

/* ---------- superfícies ---------- */
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px; }
.painel h2:first-child, .painel h3:first-child { margin-top: 0; }
.painel.destaque-borda { border-left: 4px solid var(--amarelo); }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 22px; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.cartao .rot { color: var(--cinza); font-size: 13px; font-weight: 700; }
.cartao .val { font-size: 24px; font-weight: 700; margin-top: 4px; }
.cartao .val.menor { font-size: 18px; }
.cartao.alerta { border-left: 5px solid var(--amarelo-forte); }
/* ponto focal da página: escuro com o valor aceso */
.cartao.destaque { background: var(--foco); border-color: var(--foco-borda); color: #E6E6E0; }
.cartao.destaque .rot { color: #BDBDB5; }
.cartao.destaque .val { color: var(--amarelo); font-size: 30px; }
.cartao.destaque .muted { color: #D9D9D2; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 6px 0 0; }
.dl dt { color: var(--cinza); }
.dl dd { margin: 0; }
.lista-opcoes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.lista-opcoes li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--linha-suave); }
.lista-opcoes li.inativa > span { color: var(--cinza-2); }
.lista-opcoes form { margin: 0; }
.lista-opcoes.colunas { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 4px 28px; margin-top: 12px; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); max-height: 72vh; }
.tabela-wrap.livre { max-height: none; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 8px 11px; border-bottom: 1px solid var(--linha-suave); vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--cabecalho); color: #F2F2EC; text-align: left;
  font-size: 12px; font-weight: 700; white-space: nowrap; border-bottom: 0;
}
thead th.num { text-align: right; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--amarelo-claro); }
tfoot td { font-weight: 700; border-top: 2px solid var(--tinta); background: var(--superficie-2); }
tr.fora td { color: var(--cinza-2); }
/* mês escolhido no filtro do painel */
tbody tr.sel td { background: var(--amarelo-claro); font-weight: 700; box-shadow: inset 0 1px 0 var(--amarelo-forte), inset 0 -1px 0 var(--amarelo-forte); }
/* nome do brinde no cabeçalho pode quebrar linha, para a tabela de lançamentos caber na tela */
thead th.brinde { white-space: normal; min-width: 62px; max-width: 96px; vertical-align: bottom; }
table.compacta th, table.compacta td { padding: 8px 9px; }
table.compacta thead th { vertical-align: bottom; }
/* ações sempre à vista, mesmo quando a tabela rola para o lado */
td.fixa-dir, th.fixa-dir { position: sticky; right: 0; }
tbody td.fixa-dir { background: var(--superficie); box-shadow: -1px 0 0 var(--linha-suave); }
tbody tr:nth-child(even) td.fixa-dir { background: var(--zebra); }
tbody tr:hover td.fixa-dir { background: var(--amarelo-claro); }
thead th.fixa-dir { z-index: 3; }
/* cliente atendido via representante: informa o destino do kit, não baixa estoque */
tr.via td { color: var(--cinza); font-size: 13px; }
.tabela-wrap.livre table thead th, .painel table thead th { position: static; }
table.simples thead th { background: var(--superficie-2); color: var(--tinta); border-bottom: 2px solid var(--tinta); }
table.simples tbody tr:nth-child(even) td, table.simples tbody tr:hover td { background: none; }
.acoes-linha { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.acoes-linha form, details.vincular form { margin: 6px 0 0; min-width: 220px; }
details.excluir > summary, details.vincular > summary { list-style: none; margin: 0; }
details.excluir > summary::-webkit-details-marker, details.vincular > summary::-webkit-details-marker { display: none; }
details.excluir[open] { flex-basis: 100%; }
details.vincular { margin-top: 6px; }
details.vincular form { min-width: 340px; }
details summary { cursor: pointer; font-weight: 700; }
details.mudancas .de { color: var(--cinza); text-decoration: line-through; text-decoration-color: var(--zero); }
details.mudancas .para { font-weight: 700; }
.vazio { padding: 26px; text-align: center; color: var(--cinza); }

/* número clicável: parece texto, é botão. Abre o popup com a conta e os lançamentos de origem. */
button.aud {
  font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; margin: 0; cursor: pointer;
  border-bottom: 1px dotted currentColor; font-variant-numeric: tabular-nums; text-align: inherit;
}
button.aud:hover { border-bottom: 2px solid var(--amarelo-forte); background: var(--amarelo-claro); color: var(--tinta); }
.cartao.destaque button.aud:hover { background: var(--preto-2); color: var(--amarelo); }
button.aud.selo { padding: 2px 9px; border-radius: 999px; border-bottom-width: 1px; border-bottom-style: solid; }
button.aud.selo:hover { border-bottom-width: 1px; filter: brightness(.96); }

/* ---------- popup "de onde vem este número" ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(12, 12, 11, .6); z-index: 50; display: none; }
.modal-fundo.aberto { display: block; }
.modal {
  position: fixed; z-index: 51; top: 4vh; left: 50%; transform: translateX(-50%); width: min(1040px, 94vw);
  max-height: 92vh; background: var(--fundo); display: none; flex-direction: column; border-radius: 10px;
  border-top: 4px solid var(--amarelo); box-shadow: 0 24px 60px var(--sombra); overflow: hidden;
}
.modal.aberto { display: flex; }
.modal-topo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--chrome); color: #fff; }
.modal-topo .espaco { flex: 1; }
.modal-topo .btn.sec { background: transparent; color: #E6E6E0; border-color: var(--preto-3); }
.modal-topo .btn.sec:hover { border-color: #BDBDB5; color: #fff; background: transparent; }
.modal-corpo { overflow: auto; padding: 20px; flex: 1; }
.modal-corpo:focus { outline: none; }
.conta-titulo { margin: 0; font-size: 17px; }
.conta-resultado { margin: 4px 0 16px; font-size: 34px; font-weight: 700; line-height: 1.1; }
.camada { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin: 0 0 14px; }
.camada > .rotulo-camada { font-size: 13px; font-weight: 700; color: var(--cinza); margin-bottom: 8px; }
.camada .tabela-wrap { border: 0; border-radius: 0; }
.formula { color: var(--cinza); margin: 0 0 8px; }
.calculo {
  font-size: 16px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; background: var(--amarelo-claro);
  border-left: 4px solid var(--amarelo-forte); padding: 8px 12px; border-radius: 4px;
}
.obs-lista { margin: 10px 0 0; padding-left: 18px; color: var(--cinza); font-size: 13px; }
.conta-links { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 0; }
.carregando { color: var(--cinza); padding: 30px; text-align: center; }

/* ---------- selos de status (sempre com o texto, nunca só a cor) ---------- */
.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.selo.OK, .selo.acao-criou, .selo.acao-restaurou { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.selo.ATENCAO, .selo.acao-vinculou { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.selo.REPOR { background: var(--repor-fundo); color: var(--repor); border-color: var(--repor-borda); }
.selo.SEM_ESTOQUE, .selo.acao-excluiu { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.selo.acao-editou { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--neutro-borda); }
.selo.acao-importou { background: var(--info-fundo); color: var(--info); border-color: var(--info-borda); }

/* ---------- raio-X: tabela + gráficos ---------- */
.raio-x { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .raio-x { grid-template-columns: 1fr; } }
.graficos { display: grid; gap: 16px; }
.grafico { margin: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px 8px; }
.grafico figcaption { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.grafico svg { display: block; width: 100%; height: auto; max-height: 300px; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .grade.zero { stroke: var(--linha-forte); }
.grafico .tick { font-size: 11px; fill: var(--cinza); font-variant-numeric: tabular-nums; }
.grafico .serie-entradas { fill: var(--serie-entradas); }
.grafico .serie-saidas { fill: var(--serie-saidas); }
.grafico .apagada { fill: var(--linha-forte); }
/* contorno na cor da superfície: o valor continua legível quando passa por cima da coluna vizinha */
.grafico .rotulo-coluna { font-size: 12px; font-weight: 700; fill: var(--tinta); paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.grafico .saldo-area { fill: var(--amarelo); opacity: .28; }
.grafico .saldo-linha { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .saldo-futuro { fill: none; stroke: var(--linha-forte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .saldo-ponto { fill: var(--tinta); stroke: var(--superficie); stroke-width: 2; }
.grafico .rotulo-ponto { font-size: 12px; font-weight: 700; fill: var(--tinta); }
.grafico .alvo { fill: transparent; }
.grafico .alvo:hover { fill: var(--realce); }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--cinza); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.chave { width: 12px; height: 12px; border-radius: 3px 3px 0 0; display: inline-block; }
.chave.entradas { background: var(--serie-entradas); }
.chave.saidas { background: var(--serie-saidas); }
.dica {
  position: absolute; z-index: 60; pointer-events: none; background: var(--chrome); color: #F2F2EC; border-radius: 6px;
  border: 1px solid var(--preto-3); padding: 8px 10px; font-size: 12px; display: grid; gap: 2px;
  box-shadow: 0 6px 18px var(--sombra);
}
.dica span { color: #BDBDB5; }
.dica b { font-size: 13px; }

/* ---------- login ---------- */
.login-caixa { max-width: 400px; margin: 10vh auto; background: var(--superficie); border: 1px solid var(--linha); border-top: 5px solid var(--login-topo); border-radius: var(--raio); padding: 30px; }
.login-caixa img { height: 34px; display: block; margin-bottom: 20px; }
.login-caixa h1 { font-size: 20px; margin-bottom: 20px; }

@media (max-width: 1320px) { .logo span { display: none; } }
@media (max-width: 1100px) {
  .topo-in { gap: 12px; padding: 0 16px; }
  nav.menu a { padding: 0 9px; font-size: 13px; }
  .quem { gap: 10px; }
  .quem .rotulo-longo { display: none; }   /* "Exportar Excel" vira "Excel" para o menu caber numa linha */
  .logo img { height: 36px; }
}
@media (max-width: 760px) {
  .topo-in { flex-wrap: wrap; padding: 8px 16px; }
  nav.menu a { padding: 8px 9px; }
  main { padding: 18px 16px 30px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* âncoras (#brindes, #raio-x) não ficam escondidas atrás do topo fixo */
h2[id], .painel[id], .titulo-secao[id] { scroll-margin-top: 88px; }
/* envios de cada mês: uma faixa por mês, que abre a lista de quem recebeu */
details.mes { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); margin-top: 10px; }
details.mes > summary { padding: 12px 16px; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; font-weight: 400; }
details.mes > summary::-webkit-details-marker { display: none; }
details.mes > summary::before { content: "▸"; color: var(--cinza); width: 12px; }
details.mes[open] > summary::before { content: "▾"; }
details.mes > summary b { font-size: 15px; min-width: 110px; }
details.mes[open] > summary { border-bottom: 1px solid var(--linha); }
details.mes .tabela-wrap { border: 0; border-radius: 0 0 var(--raio) var(--raio); }
/* separa o que a diretoria pergunta (gasto, destinatários) do controle de estoque */
.divisor { margin: 44px 0 -8px; padding-top: 18px; border-top: 2px solid var(--linha-forte); color: var(--cinza); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* título de quadro com um controle ao lado (Itens / R$) */
.titulo-secao { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 30px 0 12px; }
.titulo-secao h2 { margin: 0; }
.unidade { display: inline-flex; align-items: center; gap: 8px; }

/* ================= Controle SAC ================= */
/* selos por significado (sempre com o texto, nunca só a cor) */
.selo.ok { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.selo.neutro { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--neutro-borda); }
.selo.info { background: var(--info-fundo); color: var(--info); border-color: var(--info-borda); }

/* abas (fila / resolvidos) reaproveitam .alternar; contagem ao lado do nome */
.alternar a .conta { font-weight: 400; opacity: .8; margin-left: 4px; }

/* número que leva à lista de casos */
td a.n, .cartao a.n { text-decoration: none; border-bottom: 1px dotted currentColor; font-variant-numeric: tabular-nums; }
td a.n:hover { border-bottom: 2px solid var(--amarelo-forte); }
.cartao.destaque a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cartao.destaque a:hover { background: var(--preto-2); color: var(--amarelo); }
.cartao .sub-val { margin-top: 6px; font-size: 13px; }

/* barra de proporção dentro da tabela (o número está na coluna ao lado) */
td.barra-celula { width: 22%; min-width: 90px; vertical-align: middle; }
.barra { display: block; height: 8px; border-radius: 0 4px 4px 0; background: var(--amarelo-forte); min-width: 2px; }

/* painel: duas tabelas lado a lado */
.lado-a-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.lado-a-lado > div > h2:first-child, .lado-a-lado > section > h2:first-child { margin-top: 0; }
.bloco-painel { margin-top: 30px; }
.bloco-painel > h2 { margin-top: 0; }

/* ficha do caso */
.ficha { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .ficha { grid-template-columns: 1fr; } }
.ficha .painel { margin-bottom: 0; }
.ficha .coluna { display: grid; gap: 18px; min-width: 0; }
.situacao-caso { display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: baseline; }
.situacao-caso .onde { font-size: 20px; font-weight: 700; }
.trilha { list-style: none; margin: 0; padding: 0; }
.trilha li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha-suave); align-items: start; }
.trilha li:last-child { border-bottom: 0; }
.trilha .marca { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; }
.trilha li.feito .marca { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.trilha li.nao .marca { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.trilha li.pendente .nome { color: var(--cinza); }
.trilha .detalhe { display: block; color: var(--cinza); font-size: 12px; }
.andamentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.andamentos li { border-left: 3px solid var(--linha-forte); padding: 1px 0 1px 12px; }
.andamentos li.envio { border-left-color: var(--info-borda); }
.andamentos li.retorno { border-left-color: var(--ok-borda); }
.andamentos li.cobranca { border-left-color: var(--amarelo-forte); }
.andamentos .quando { display: block; font-size: 12px; color: var(--cinza); }
.acoes-caso { display: grid; gap: 12px; }
.acoes-caso details { border: 1px solid var(--linha); border-radius: 6px; padding: 10px 12px; }
.acoes-caso details[open] { border-color: var(--linha-forte); }
.acoes-caso details form { margin-top: 12px; max-width: none; }
.original { columns: 2 280px; column-gap: 28px; margin: 10px 0 0; }
.original div { break-inside: avoid; padding: 3px 0; border-bottom: 1px solid var(--linha-suave); display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 10px; }
.original dt { color: var(--cinza); font-size: 12px; }
.original dd { margin: 0; overflow-wrap: anywhere; }
.avisos-caso { margin: 0; padding-left: 18px; }

/* fila do financeiro: barra de ação em lote, sempre à vista */
.lote {
  position: sticky; bottom: 0; z-index: 5; margin-top: 12px; padding: 12px 14px; display: flex; gap: 10px 12px;
  flex-wrap: wrap; align-items: end; background: var(--superficie); border: 1px solid var(--linha-forte);
  border-top: 3px solid var(--amarelo); border-radius: var(--raio); box-shadow: 0 -6px 18px var(--sombra);
}
.lote .campo { min-width: 150px; }
.lote .campo.largo { flex: 1; min-width: 220px; }
.lote-resumo { flex-basis: 100%; font-weight: 700; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
td.marcar, th.marcar { width: 34px; text-align: center; }
td .obs-fin { display: block; max-width: 46ch; overflow-wrap: anywhere; }

/* gráficos do painel */
.grafico .serie { fill: var(--serie-entradas); }
.grafico .serie.parcial { opacity: .45; }
.grafico .referencia { stroke: var(--erro); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico .rotulo-ref { font-size: 11px; fill: var(--erro); font-weight: 700; paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.graficos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grafico h3 { margin: 0; }

/* importação */
.passo-importar { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--linha-suave); }
.passo-importar:last-child { border-bottom: 0; }
.passo-importar .numero { width: 26px; height: 26px; border-radius: 50%; background: var(--foco); color: var(--amarelo); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.passo-importar.feito .numero { background: var(--ok-fundo); color: var(--ok); }

/* painel: seis cartões em duas linhas de três (o valor em reais precisa de largura) */
.cartoes.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cartoes.tres { grid-template-columns: 1fr; } }
.cartao .val { white-space: nowrap; }

/* o valor em destaque encolhe em tela estreita, em vez de vazar do cartão */
.cartao.destaque .val { font-size: clamp(21px, 2.1vw, 30px); }