:root {
  color-scheme: light;
  --pagina: #f4f3f0; --superficie: #fcfcfb; --borda: #e2e0da;
  --texto: #0b0b0b; --texto-2: #52514e; --texto-3: #8a8983; --grade: #e8e6e0;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s7: #4a3aa7; --s8: #e34948;
  --neutro: #b9b7af; --bom: #0ca30c; --critico: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pagina: #111110; --superficie: #1a1a19; --borda: #33332f;
    --texto: #ffffff; --texto-2: #c3c2b7; --texto-3: #8a8983; --grade: #2c2c29;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s7: #9085e9; --s8: #e66767;
    --neutro: #6b6a64;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 system-ui, "Segoe UI", Arial, sans-serif; background: var(--pagina); color: var(--texto); }
#grupos { display: flex; gap: 6px; padding: 14px 24px 0; flex-wrap: wrap; }
#grupos button { font: inherit; font-weight: 600; padding: 7px 16px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); cursor: pointer; }
#grupos button.ativa { background: var(--s1); border-color: var(--s1); color: #fff; }
header .barra { margin-bottom: 0; }
header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 20px 24px 12px; }
h1 { margin: 0; font-size: 22px; }
h2 { margin: 0; font-size: 15px; }
.sub, .nota { margin: 2px 0 0; color: var(--texto-2); font-size: 12.5px; }
.filtro { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; }
select, input[type=search] { font: inherit; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); }
nav { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
nav button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--texto-2); cursor: pointer; white-space: nowrap; }
nav button.ativa { color: var(--texto); border-bottom-color: var(--s1); font-weight: 600; }
main { padding: 20px 24px; }
.aba { display: none; }
.aba.ativa { display: block; }
.barra { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.kpi .rotulo { color: var(--texto-2); font-size: 12.5px; }
.kpi .valor { font-size: 24px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .apoio { color: var(--texto-3); font-size: 12px; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; min-width: 0; }
.card.larga { grid-column: 1 / -1; }
.graf { position: relative; height: 300px; margin-top: 12px; }
.graf.alta { height: 420px; }
.rolagem { overflow: auto; margin-top: 12px; }
.rolagem.alta { max-height: 70vh; margin-top: 0; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--grade); white-space: nowrap; }
th { color: var(--texto-2); font-weight: 600; position: sticky; top: 0; background: var(--superficie); }
th.e, td.e { text-align: left; }
tr.total td { font-weight: 650; border-top: 1px solid var(--borda); }
td.neg { color: var(--critico); }
table.heat td { text-align: center; border: 2px solid var(--superficie); }
table.heat td.e, table.heat td.n { background: none; }
.selo { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--borda); color: var(--texto-2); }
.selo.saiu { border-color: var(--critico); color: var(--critico); }
.selo.ativo { border-color: var(--bom); color: var(--bom); }
td a { color: inherit; text-decoration: underline dotted; }
td a:hover { color: var(--s1); }
@media (max-width: 900px) { .grade { grid-template-columns: 1fr; } main, header { padding-left: 16px; padding-right: 16px; } nav, #grupos, .selecoes { padding-left: 16px; padding-right: 16px; } }
#exportar { font: inherit; padding: 6px 14px; border: 1px solid var(--s1); border-radius: 6px; background: var(--s1); color: #fff; cursor: pointer; }
#exportar:hover { filter: brightness(1.1); }
.usuario { margin-left: auto; align-self: center; color: var(--texto-2); font-size: 13px; }
.usuario a, .login a { color: var(--s1); }
.erro { color: var(--critico); }
button.acao, .login button { font: inherit; padding: 6px 14px; border: 1px solid var(--s1); border-radius: 6px; background: var(--s1); color: #fff; cursor: pointer; }
button.acao:hover, .login button:hover { filter: brightness(1.1); }
/* filtros de seleção múltipla e seleções atuais */
.chips { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--neutro); color: var(--texto); }
.chip.ativo { background: var(--s1); border-color: var(--s1); color: #fff; font-weight: 600; }
.botao { font: inherit; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto-2); cursor: pointer; white-space: nowrap; }
.botao:hover { background: var(--grade); }
.botao-link { font: inherit; font-size: 13px; border: 0; background: none; padding: 0; color: var(--s1); cursor: pointer; }
.multi { position: relative; }
.multi-botao { font: inherit; display: flex; align-items: center; gap: 8px; min-width: 170px; max-width: 260px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left; }
.multi-botao span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-botao::after { content: "▾"; color: var(--texto-3); }
.multi-botao.tem-selecao { border-color: var(--s1); }
.multi-painel { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 320px; max-width: calc(100vw - 32px); padding: 8px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.multi.aberto .multi-painel { display: block; }
.multi-painel input[type=search] { width: 100%; margin-bottom: 6px; }
.multi-acoes { display: flex; justify-content: space-between; padding: 0 4px 6px; }
.multi-lista { max-height: 300px; overflow-y: auto; }
.multi-lista label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--texto); cursor: pointer; }
.multi-lista label:hover { background: var(--grade); }
.multi-lista input { accent-color: var(--s1); }
.selecoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 24px 12px; font-size: 12.5px; }
.selecoes:empty { display: none; }
.selecoes .rotulo { color: var(--texto-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.selecao { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); }
.selecao b { color: var(--texto); font-weight: 600; }
.selecao button { font: inherit; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto-3); line-height: 1; cursor: pointer; }
.selecao button:hover { background: var(--grade); color: var(--texto); }
button.mini {font: inherit; font-size: 12px; padding: 2px 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); cursor: pointer; }
body.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 340px; display: grid; gap: 14px; padding: 24px; }
.login label { display: grid; gap: 4px; color: var(--texto-2); font-size: 13px; }
.login input { font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); }
.login button { padding: 9px 14px; font-weight: 600; }
table.perm td, table.perm th { text-align: center; }
table.perm th.e, table.perm td.e { text-align: left; }
table.perm th.g, table.perm th.d, table.perm td.d, table.perm td:nth-child(3) { border-left: 1px solid var(--borda); }
table.perm thead tr:nth-child(2) th { top: 31px; font-weight: 400; white-space: normal; min-width: 76px; }
table.perm input { width: 16px; height: 16px; accent-color: var(--s1); cursor: pointer; }
.acima { color: var(--bom); }
.abaixo { color: var(--critico); }
/* inadimplência */
.marca { font-weight: 650; color: var(--texto); align-self: center; }
.selo.vencido { border-color: var(--critico); color: var(--critico); }
.selo.avencer { border-color: var(--s1); color: var(--s1); }
.selo.pago { border-color: var(--bom); color: var(--bom); }
.resultados { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.resultados button { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left; }
.resultados button:hover { border-color: var(--s1); }
.resultados button small { color: var(--texto-3); }
.dados-cliente { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; color: var(--texto-2); font-size: 13px; }
.dados-cliente b { color: var(--texto); font-weight: 600; }
.vazio { padding: 28px 16px; text-align: center; color: var(--texto-3); }
.perfil .graf { height: 240px; }
.dica { margin: 0; padding: 0 24px 10px; color: var(--texto-3); font-size: 12px; }
@media (max-width: 900px) { .dica { padding-left: 16px; padding-right: 16px; } }
.selo.alerta { border-color: var(--s4); color: var(--s4); }
/* matriz de inadimplência: colunas = mês de vencimento, linhas = mês do recebimento */
table.matriz th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--superficie); text-align: left; }
table.matriz thead th.e { left: 0; z-index: 2; }
table.matriz td.diag { background: var(--grade); font-weight: 600; }
table.matriz td.antes { color: var(--texto-2); }
table.matriz td.tot, table.matriz thead th:last-child { border-left: 1px solid var(--borda); font-weight: 600; }
table.matriz tr.resumo th, table.matriz tr.resumo td { font-weight: 650; }
table.matriz tr.resumo:first-child th, table.matriz tr.resumo:first-child td { border-bottom: 1px solid var(--borda); }
table.matriz tr.pct td { color: var(--critico); }
table.matriz tr.vao td { height: 14px; border: 0; }
/* gestão de cobrança: gaveta com a ficha de cobrança do cliente */
dialog.gaveta { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(860px, 100vw); max-width: 100vw; padding: 20px 24px; border: 0; border-left: 1px solid var(--borda); background: var(--pagina); color: var(--texto); overflow-y: auto; }
dialog.gaveta::backdrop { background: rgba(0, 0, 0, 0.35); }
.gaveta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.gaveta-topo h2 { font-size: 18px; margin-bottom: 6px; }
.gaveta h2.secao { margin: 20px 0 8px; }
.gaveta .kpi .valor { font-size: 20px; }
.form-contato .campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-top: 12px; }
.form-contato label { display: grid; gap: 4px; color: var(--texto-2); font-size: 12.5px; }
.form-contato label.largo { grid-column: 1 / -1; }
.form-contato input, .form-contato select, .form-contato textarea { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); }
.form-contato textarea { resize: vertical; }
.contato { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.contato-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contato-topo .botao-link { margin-left: auto; color: var(--critico); }
.contato .obs { margin: 6px 0 0; white-space: pre-wrap; }
@media (max-width: 900px) { dialog.gaveta { padding: 16px; } }