/* BS Digital — tokens da paleta de referência (validada); claro/escuro selecionados, não invertidos */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --base: #c3c2b7; --border: rgba(11,11,11,.10); --wash: rgba(11,11,11,.045);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s1-soft: rgba(42,120,214,.10);
  --good: #0ca30c; --good-ink: #006300; --warn: #fab219; --warn-ink: #7a5300; --crit: #d03b3b; --crit-ink: #a11f1f;
  --accent: #2a78d6; --on-accent: #fff;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #8a5cf6; --c5: #e0a800; --c6: #d6409f; --c7: #12a3b4; --c8: #7a8699;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --base: #383835; --border: rgba(255,255,255,.10); --wash: rgba(255,255,255,.06);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s1-soft: rgba(57,135,229,.16);
    --good-ink: #0ca30c; --warn-ink: #fab219; --crit-ink: #ec7b7b; --accent: #3987e5;
    --c1: #3987e5; --c2: #f08150; --c3: #2bc08a; --c4: #a07cf8; --c5: #f0bd2a; --c6: #e56bb8; --c7: #35bccb; --c8: #98a3b3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --base: #383835; --border: rgba(255,255,255,.10); --wash: rgba(255,255,255,.06);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s1-soft: rgba(57,135,229,.16);
  --good-ink: #0ca30c; --warn-ink: #fab219; --crit-ink: #ec7b7b; --accent: #3987e5;
  --c1: #3987e5; --c2: #f08150; --c3: #2bc08a; --c4: #a07cf8; --c5: #f0bd2a; --c6: #e56bb8; --c7: #35bccb; --c8: #98a3b3;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }          /* viewport-fit=cover: iPhone em paisagem (> 760 px) não esconde o conteúdo sob o notch */
header.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
header.top .wrap { display: flex; align-items: center; gap: 16px; padding-bottom: 0; height: 52px; }
.brand { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
nav.menu { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
nav.menu a { padding: 8px 12px; border-radius: 8px; color: var(--ink2); white-space: nowrap; font-size: 14px; }
nav.menu a:hover { background: var(--wash); text-decoration: none; }
nav.menu a[aria-current="page"] { color: var(--ink); background: var(--wash); font-weight: 600; }
.top-actions { display: flex; gap: 8px; align-items: center; }
h1 { font-size: 22px; margin: 22px 0 4px; letter-spacing: -.01em; } h2 { font-size: 16px; margin: 0 0 10px; }
.sub { color: var(--ink2); margin: 0 0 16px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.grid { display: grid; gap: 12px; } .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0,1fr); } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=search], input[type=tel], select, textarea {
  background: var(--surface); border: 1px solid var(--base); border-radius: 8px; padding: 7px 10px; min-height: 36px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--base); border-radius: 8px;
  padding: 7px 12px; min-height: 36px; cursor: pointer; }
.btn:hover { background: var(--wash); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--crit-ink); } .btn.sm { min-height: 30px; padding: 3px 9px; font-size: 13px; }
.preset { border: 1px solid var(--base); border-radius: 8px; padding: 6px 11px; color: var(--ink2); background: var(--surface); }
.preset[aria-current="true"] { border-color: var(--accent); color: var(--ink); font-weight: 600; background: var(--s1-soft); }
/* KPIs */
.kpi .label { color: var(--ink2); font-size: 13px; }
.kpi .value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.kpi .note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.hero .value { font-size: 52px; line-height: 1.05; }
/* tabelas */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--ink2); font-weight: 600; font-size: 13px; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(min(470px, 100%), 1fr)); }
.grid.auto-wide { grid-template-columns: repeat(auto-fit, minmax(min(660px, 100%), 1fr)); }
.card table { font-size: 14px; } .card th, .card td { padding: 7px 8px; }
tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.ag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ag-head .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.lines { list-style: none; margin: 0; padding: 0; } .lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.lines li:last-child { border-bottom: 0; } .via { color: var(--muted); font-size: 12.5px; }
.falta { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--wash); color: var(--ink2); font-size: 13.5px; }
.ok-line { margin-top: 8px; color: var(--good-ink); font-size: 13.5px; }
/* selos (ícone + texto; nunca só cor) */
.tag { display: inline-flex; gap: 4px; align-items: center; border-radius: 999px; padding: 1px 8px; font-size: 12px; border: 1px solid var(--base); color: var(--ink2); }
.tag.good { color: var(--good-ink); border-color: currentColor; } .tag.warn { color: var(--warn-ink); border-color: currentColor; }
.tag.crit { color: var(--crit-ink); border-color: currentColor; } .tag.info { color: var(--accent); border-color: currentColor; }
.alert { border: 1px solid var(--crit); border-radius: 10px; padding: 10px 14px; margin: 12px 0; background: var(--wash); }
.alert.warn { border-color: var(--warn); } .alert strong { display: inline-flex; gap: 6px; }
/* gráficos */
.chart { position: relative; width: 100%; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { fill: var(--muted); font-size: 11px; } .chart .grid-l { stroke: var(--grid); stroke-width: 1; } .chart .base-l { stroke: var(--base); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.ln { height: 3px; width: 16px; border-radius: 2px; vertical-align: 3px; }
.tip { position: absolute; pointer-events: none; z-index: 5; min-width: 150px; background: var(--surface); border: 1px solid var(--base);
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14); font-size: 13px; display: none; }
.tip b { font-size: 14px; } .tip .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tip .k { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.viewtoggle { margin: 6px 0 0; } details.tbl summary { cursor: pointer; color: var(--ink2); font-size: 13px; margin-top: 8px; }
.bar-h { height: 8px; background: var(--wash); border-radius: 4px; overflow: hidden; } .bar-h > span { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
/* login */
.login { max-width: 360px; margin: 12vh auto 0; } .login .card { display: grid; gap: 12px; }
.err { color: var(--crit-ink); font-size: 14px; }
form.inline { display: inline; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nowrap { white-space: nowrap; } textarea.mono, pre.mono { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre.texto { white-space: pre-wrap; background: var(--wash); border-radius: 8px; padding: 12px; max-height: 420px; overflow: auto; margin: 0; }
/* entradas pendentes (conferência): caixinhas, barra fixa, linhas por agência */
.btn.good { color: var(--good-ink); border-color: currentColor; }
.alert.good { border-color: var(--good); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.selbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; top: 58px; z-index: 10; margin: 0 0 10px; padding: 10px 14px; }
table.entradas th.sel, table.entradas td.sel { width: 36px; padding-right: 0; }
table.entradas input[type=checkbox], .selbar input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
table.entradas tr[data-row] { cursor: pointer; } table.entradas tr[data-row]:hover { background: var(--wash); }
table.entradas tr.marcada { background: var(--s1-soft); }
table.entradas tr.grupo th { background: var(--wash); color: var(--ink); font-size: 13.5px; padding: 6px 10px; }
.pix { font-size: 12.5px; color: var(--ink2); line-height: 1.35; }
table.entradas .tag { white-space: nowrap; }
@media (max-width: 560px) {                       /* celular: resumo em 2 colunas p/ a lista aparecer sem rolar tanto */
  .grid.kpis2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .grid.kpis2 .card { padding: 10px 12px; }
  .grid.kpis2 .kpi .value { font-size: 19px; } .grid.kpis2 .kpi .note { display: none; }
  .selbar { top: 54px; padding: 8px 10px; } .selbar input[name=obs] { min-width: 0; flex: 1 1 100%; }
}
@media print, (forced-colors: active) { .bar-h > span, .legend i { border: 1px solid CanvasText; } }
.atribuir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.atribuir select { max-width: 190px; min-height: 30px; padding: 3px 8px; font-size: 13px; }
.qr { width: 200px; max-width: 100%; background: #fff; padding: 6px; border-radius: 8px; } .qr svg { display: block; width: 100%; height: auto; }
#dois-fatores { scroll-margin-top: 68px; }  /* o cabeçalho fixo (52px) não cobre o título ao abrir por âncora */
/* Investimento "igual à planilha" (aba Financeiro Geral): cabeçalho azul-marinho ou verde, valor em caixa branca com borda preta.
   As cores vêm do print da planilha; em modo escuro a caixa do valor vira a superfície escura e as cores fortes ficam como estão.
   Celular primeiro: 2 colunas; a partir de 560/720/900/1180 px vai abrindo até ficar como a planilha. */
.pl { --pl-ouro: #b58900; --pl-azul: #0a3763; --pl-verde: #43fd03; --pl-ciano: #e1f7fb; --pl-ciano-ink: #0b0b0b; --pl-cel: #fff; --pl-cel-ink: #0b0b0b; --pl-linha: #0b0b0b; margin-bottom: 8px; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .pl { --pl-ciano: #12313a; --pl-ciano-ink: #e6f4f7; --pl-cel: var(--surface); --pl-cel-ink: var(--ink); --pl-linha: #6b6a64; }
}
:root[data-theme="dark"] .pl { --pl-ciano: #12313a; --pl-ciano-ink: #e6f4f7; --pl-cel: var(--surface); --pl-cel-ink: var(--ink); --pl-linha: #6b6a64; }
.pl-grid { display: grid; gap: 10px 10px; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-grid.c3 > :first-child { grid-column: 1 / -1; }
.pl-t { display: flex; flex-direction: column; min-width: 0; border: 2px solid var(--pl-linha); }
.pl-h { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 36px; padding: 5px 6px; text-align: center; text-transform: uppercase;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; background: var(--pl-azul); color: #fff; }
.pl-h.verde { background: var(--pl-verde); color: #000; border-bottom: 2px solid var(--pl-linha); }
.pl-v { padding: 6px 6px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--pl-cel); color: var(--pl-cel-ink); }
.pl-v .pl-n { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.pl-v .tag { font-size: 12px; vertical-align: 2px; }
.pl-v.ouro, td.ouro { background: var(--pl-ouro); color: #fff; }
.pl-v.ouro .pl-n { color: rgba(255,255,255,.85); }
.pl-vazio { display: none; }
.pl-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; margin-top: 10px; align-items: start; }
.pl-topo > .pl-esq > .pl-grid:first-child { margin-top: 0; }
.pl-grid.estreito { max-width: 440px; }
table.pl-entradas { width: 100%; max-width: 460px; border: 2px solid var(--pl-linha); border-collapse: collapse; }
table.pl-entradas th { background: var(--pl-azul); color: #fff; text-align: center; font-size: 12px; text-transform: uppercase; padding: 8px 6px; border: 1px solid var(--pl-linha); }
table.pl-entradas td { background: var(--pl-ciano); color: var(--pl-ciano-ink); border: 1px solid var(--pl-linha); font-weight: 700; font-size: 13px; padding: 5px 8px; }
table.pl-entradas td.ref { font-weight: 400; font-size: 12px; }
table.pl-entradas tr:last-child td { border-bottom: 1px solid var(--pl-linha); }
.pl-banda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: center; margin: 18px 0 0; padding: 8px 14px; min-height: 34px;
  background: var(--pl-azul); color: #fff; font-weight: 700; }
.pl-banda small { font-weight: 400; opacity: .85; }
@media (min-width: 560px) {
  .pl-grid.c3 { grid-template-columns: 2fr 1fr 1fr; } .pl-grid.c3 > :first-child { grid-column: auto; }
  .pl-grid.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-v { font-size: 19px; } .pl-h { font-size: 12px; padding: 6px 8px; }
}
@media (min-width: 720px) { .pl-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pl-vazio { display: block; } }
@media (min-width: 900px) {
  .pl-grid.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; } .pl-grid.c6 .pl-v { font-size: 17px; }
}
@media (min-width: 1180px) { .pl-topo { grid-template-columns: minmax(0, 1fr) 340px; } }
@media print, (forced-colors: active) { .pl-t, table.pl-entradas, table.pl-entradas td, table.pl-entradas th { border-color: CanvasText; } .pl-h, .pl-banda { forced-color-adjust: none; } }
.pl-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pl-titulo h1 { margin-right: 0; }
.mes-nav { display: inline-flex; align-items: center; gap: 2px; } .mes-nav a { padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 18px; line-height: 26px; }
.mes-nav a:hover { background: var(--wash); color: var(--ink); text-decoration: none; } .mes-nav a.atual { font-size: 12.5px; }
nav.menu a.critico { color: var(--crit-ink); font-weight: 600; margin-left: auto; }
.alerta-ingestao { display: none; }
table.pl-custos { width: 100%; max-width: 380px; border: 2px solid var(--pl-linha); border-collapse: collapse; }
table.pl-custos th, table.pl-custos td { border: 1px solid var(--pl-linha); padding: 3px 8px; background: var(--pl-cel); color: var(--pl-cel-ink); font-size: 13px; vertical-align: middle; }
table.pl-custos tr:first-child th { background: var(--pl-azul); color: #fff; text-transform: uppercase; font-size: 12px; padding: 8px 6px; text-align: center; }
table.pl-custos tr.grupo th { background: var(--wash); color: var(--ink2); font-size: 11.5px; text-transform: uppercase; text-align: left; padding: 2px 8px; }
table.pl-custos th[scope=row] { text-align: left; font-weight: 600; } table.pl-custos td.num { font-weight: 700; text-align: right; }
table.pl-custos tr.total th, table.pl-custos tr.total td { background: var(--wash); font-weight: 700; }
table.pl-custos td input[type=number] { width: 100%; min-height: 28px; padding: 2px 6px; text-align: right; font-size: 13.5px; font-weight: 700; border-color: transparent; background: transparent; }
table.pl-custos td input[type=number]:hover, table.pl-custos td input[type=number]:focus { border-color: var(--base); background: var(--surface); }
.pl-custos-form { margin-top: 18px; display: grid; gap: 8px; justify-items: start; }
.ag-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.pl-ag-tabelas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; align-items: start; }
@media (min-width: 760px) { .pl-ag-tabelas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
table.pl-lista { width: 100%; border: 2px solid var(--pl-linha); border-collapse: collapse; }
table.pl-lista th { background: var(--pl-azul); color: #fff; text-transform: uppercase; font-size: 12px; padding: 8px 6px; text-align: center; border: 1px solid var(--pl-linha); }
table.pl-lista td { background: var(--pl-ciano); color: var(--pl-ciano-ink); border: 1px solid var(--pl-linha); font-size: 13px; padding: 4px 8px; }
table.pl-lista td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } table.pl-lista td.ref { font-size: 12px; }
table.pl-lista tr.total th { text-align: left; } table.pl-lista tr.total th.num { text-align: right; font-variant-numeric: tabular-nums; }
h1 + .ag-abas + .pl, .pl[data-pl="ag"] { margin-bottom: 18px; }
form.entrada { display: inline-flex; gap: 4px; align-items: center; } form.entrada input[type=date] { min-height: 28px; padding: 1px 6px; font-size: 13px; width: 132px; } form.entrada .btn { min-height: 28px; }

/* ===== Polimento (29–30/09): mais suave e limpo — cantos arredondados, bordas finas, sombras leves, transições curtas ===== */
:root { --radius: 14px; --radius-sm: 10px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .05); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --shadow: none; } }
:root[data-theme="dark"] { --shadow: none; }
body { font-family: ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin-top: 26px; } h2 { font-weight: 650; letter-spacing: -.01em; }
header.top { background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
nav.menu a { border-radius: var(--radius-sm); transition: background .18s var(--ease), color .18s var(--ease); }
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { border-radius: var(--radius-sm); border-color: var(--border); transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), transform .06s; }
.btn:hover { border-color: var(--base); } .btn:active { transform: translateY(1px); }
.btn.primary { border-color: transparent; box-shadow: 0 1px 2px rgba(42, 120, 214, .35); }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=search], input[type=tel], select, textarea { border-radius: var(--radius-sm); border-color: var(--border); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
input:hover, select:hover, textarea:hover { border-color: var(--base); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--s1-soft); border-color: var(--accent); }
/* foco do teclado VISÍVEL em links, botões e resumos (antes: outline:none + sombra de 10–16% de opacidade, praticamente invisível) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preset { border-radius: 999px; border-color: var(--border); transition: background .16s var(--ease), border-color .16s var(--ease); } .preset:hover { text-decoration: none; border-color: var(--base); }
.tag { padding: 2px 9px; font-weight: 500; } .alert { border-radius: var(--radius-sm); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.card th, .card td { padding: 9px 10px; } .card table tr:hover td { background: var(--wash); }
.card table tr:last-child:hover td { background: var(--wash); }
tr:last-child td { border-bottom: 0; }
.kpi .value { letter-spacing: -.02em; font-weight: 650; }

/* blocos no formato da planilha, agora enquadrados: mesmo tamanho, valor sempre na mesma altura, nota embaixo em uma linha */
.pl { --pl-linha: rgba(10, 55, 99, .42); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .pl { --pl-linha: rgba(255, 255, 255, .16); } }
:root[data-theme="dark"] .pl { --pl-linha: rgba(255, 255, 255, .16); }
.pl .pl-grid { gap: 12px; }
.pl .pl-t { border: 1px solid var(--pl-linha); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); container-type: inline-size; transition: box-shadow .18s var(--ease); }
.pl .pl-h { flex: none; min-height: 42px; font-size: 11.5px; letter-spacing: .05em; font-weight: 650; padding: 6px 10px; }
.pl .pl-h.verde { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.pl .pl-t .pl-v { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 72px; padding: 8px 8px 22px;
  white-space: nowrap; font-size: 17px; font-size: clamp(14px, 12cqw, 20px); font-weight: 650; }
.pl .pl-t .pl-v .pl-n { position: absolute; left: 8px; right: 8px; bottom: 5px; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; text-align: center; }
.pl .pl-banda { border-radius: 12px; padding: 10px 16px; letter-spacing: .01em; }
table.pl-lista, table.pl-entradas, table.pl-custos { border-collapse: separate; border-spacing: 0; border: 1px solid var(--pl-linha); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
table.pl-lista th, table.pl-lista td, table.pl-entradas th, table.pl-entradas td, table.pl-custos th, table.pl-custos td { border: 0; border-right: 1px solid var(--pl-linha); border-bottom: 1px solid var(--pl-linha); }
table.pl-lista tr > :last-child, table.pl-entradas tr > :last-child, table.pl-custos tr > :last-child { border-right: 0; }
table.pl-lista tr:last-child > *, table.pl-entradas tr:last-child > *, table.pl-custos tr:last-child > * { border-bottom: 0; }
table.pl-lista th, table.pl-entradas th, table.pl-custos tr:first-child th { letter-spacing: .05em; font-weight: 650; }
table.pl-lista td, table.pl-entradas td { padding: 6px 10px; }
.pl-meio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
@media (min-width: 820px) { .pl-meio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pl .pl-grid.pl-coluna { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.pl-custos-form { margin-top: 0; }
table.pl-custos { max-width: 420px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 560px) {
  .pl-titulo { flex-wrap: nowrap; gap: 4px; } .pl-titulo h1 { font-size: 19px; white-space: nowrap; margin-right: 0; } .pl-titulo h1 .small { font-size: 12px; }
  .mes-nav a { padding: 0 6px; }
}
.card.ampla { grid-column: 1 / -1; } table.novos td .tag { white-space: nowrap; }
/* aba Manual (igual ao bloco A–C da planilha, digitável) */
.pl-man-corpo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 12px; }
@media (min-width: 900px) { .pl-man-corpo { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.pl-man-lado { display: grid; gap: 12px; justify-items: start; } .pl-man-lado .pl-grid { width: 100%; margin-top: 0; }
table.manual td input[type=number], table.manual td input[type=text] { width: 100%; min-height: 28px; padding: 2px 6px; font-size: 13.5px; background: transparent; border-color: transparent; color: inherit; }
table.manual td.num input[type=number] { text-align: right; font-weight: 700; }
table.manual td input:hover, table.manual td input:focus { border-color: var(--base); background: var(--surface); }
table.manual td input[readonly] { cursor: default; } table.manual td input[readonly]:hover { border-color: transparent; background: transparent; }
table.manual .nm-par { white-space: nowrap; margin-left: 4px; color: var(--muted); } table.manual input.nm { width: 44px; padding: 2px 4px; text-align: center; }
table.manual tr.digitado td.num:first-child { box-shadow: inset 3px 0 0 var(--s2); }
table.manual .auto { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--ink2); font-weight: 400; margin-top: 1px; }
table.manual .auto .btn { min-height: 20px; padding: 0 6px; font-size: 12px; }
table.manual tr.so-leitura td { opacity: .8; } table.manual tr.livre td.num { color: var(--muted); } table.manual tr[data-inativo] td.ref { opacity: .75; }
table.manual td input.nm[type=number] { width: 46px; min-width: 0; padding: 2px 4px; text-align: center; font-weight: 600; }
table.manual .nm-par { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
table.manual td.ref { white-space: nowrap; } table.manual td.ref input[type=text] { min-width: 180px; }
table.manual .moeda { position: relative; display: flex; align-items: center; gap: 4px; }
table.manual .moeda::before { content: "R$"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 600; color: var(--muted); pointer-events: none; }
table.manual .moeda input { padding-left: 28px; }
@media (min-width: 900px) { .pl-man-corpo { grid-template-columns: minmax(0, 700px) minmax(0, 1fr); } }
table.manual { table-layout: fixed; } table.manual th:nth-child(1) { width: 160px; } table.manual th:nth-child(3) { width: 112px; } table.manual th:nth-child(4) { width: 132px; }
table.manual td.ref { overflow: hidden; text-overflow: ellipsis; }
table.manual td input.nm[type=number] { width: 54px; font-size: 13px; padding: 2px 2px; } table.manual input.nm::-webkit-inner-spin-button { display: none; }
/* Manual × Automático: a trilha automática (PIX) ao lado da digitada, com a diferença à vista */
table.manual td.auto-col { text-align: right; white-space: nowrap; font-size: 12.5px; } table.manual .auto-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; margin-left: 6px; min-width: 20px; text-align: center; padding: 0 5px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid currentColor; vertical-align: 1px; }
.adiantou { font-weight: 800; color: var(--accent); margin-left: 3px; cursor: help; }
.chip.bate { color: var(--good-ink); } .chip.dif, .chip.sem { color: var(--crit-ink); }
table.manual tr.dif td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
table.manual .moeda input { min-width: 0; flex: 1 1 auto; } table.manual .btn.lim { flex: none; min-height: 22px; padding: 0 6px; font-size: 12px; }
.fonte-box { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
/* Manual no celular: cada linha vira um cartão (nome e N/M em cima; valor digitado e total embaixo) — sem colunas fixas que cortavam o nome e o N/M */
@media (max-width: 600px) {
  table.manual, table.manual tbody { display: block; table-layout: auto; } table.manual tr:first-child { display: none; }
  table.manual tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 9px 12px; background: var(--pl-ciano); border-bottom: 1px solid var(--pl-linha); }
  table.manual td, table.manual th { display: block; width: auto; border: 0; padding: 0; background: transparent; }
  table.manual td.ref { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: normal; overflow: visible; font-size: 13px; }
  table.manual td.ref .nm-par { margin-left: 0; flex: none; } table.manual td.ref input[type=text] { min-width: 0; }
  table.manual td:first-child { grid-column: 1; grid-row: 2; } table.manual td:nth-child(3) { grid-column: 2; grid-row: 2; align-self: center; }
  table.manual td.auto-col { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 12px; color: var(--pl-ciano-ink); } table.manual td.auto-col:empty { display: none; }
  table.manual td.auto-col::before { content: "Automático"; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  table.manual tr.total { background: var(--pl-azul); grid-template-columns: minmax(0, 1fr) auto auto; } table.manual tr.total th { color: #fff; text-align: left; } table.manual tr.total th:nth-child(2) { display: none; } table.manual tr.total th.num { text-align: right; }
  table.manual tr.so-leitura td:first-child, table.manual tr.so-leitura td:nth-child(3) { display: none; } table.manual tr.so-leitura td.ref { grid-column: 1; } table.manual tr.so-leitura td.auto-col { grid-column: 2; grid-row: 1; }
  table.manual tr.digitado td.num:first-child { box-shadow: none; } table.manual tr.digitado { box-shadow: inset 3px 0 0 var(--s2); }
}
.mes-nav .off { padding: 0 8px; color: var(--grid); font-size: 18px; line-height: 26px; cursor: default; }
.legend-pie { justify-content: center; margin-top: 10px; } .legend-pie span { white-space: nowrap; }
.chart svg path { transition: opacity .15s var(--ease); }
/* Inadimplentes: tabela larga que vira cartões no celular */
.ctt { padding: 3px 0 5px; } .ctt + .ctt { border-top: 1px dashed var(--grid); padding-top: 6px; } .ctt-nome { font-size: 13.5px; font-weight: 600; }
.ctt-acoes { display: flex; align-items: center; gap: 5px; margin-top: 2px; } .ctt .btn { min-height: 26px; padding: 0 8px; }
.crit-ink { color: var(--crit-ink); }
@media (max-width: 760px) {
  table.cards, table.cards tbody { display: block; } table.cards tr:first-child { display: none; }
  table.cards tr { display: block; padding: 12px 6px; border-bottom: 1px solid var(--grid); } table.cards tr:last-child { border-bottom: 0; }
  table.cards td { display: block; border: 0; padding: 4px 8px; text-align: left; } table.cards td.num { text-align: left; }
  table.cards td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 1px; }
}
.ctt-acoes span { white-space: nowrap; }
/* Inadimplentes: lista limpa (uma linha por cliente; emergência e endereço abrem ao clicar) */
.inad-barra { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.inad-filtro { display: flex; gap: 8px; flex-wrap: wrap; } .inad-filtro input[type=text], .inad-filtro input[type=search] { width: 150px; }
.inad-resumo { margin: 0 2px 8px; color: var(--ink2); } .inad-resumo b { color: var(--ink); }
.inad-lista { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.inad-item + .inad-item { border-top: 1px solid var(--grid); }
.inad-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px auto; gap: 14px; align-items: center; padding: 11px 16px; cursor: pointer; list-style: none; }
.inad-item > summary::-webkit-details-marker { display: none; } .inad-item > summary:hover, .inad-item[open] > summary { background: var(--wash); }
.inad-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inad-nome .tag { font-weight: 500; margin-left: 4px; }
.inad-dias b { display: block; line-height: 1.2; } .inad-dias small { color: var(--muted); font-size: 12px; }
.inad-saldo { text-align: right; font-variant-numeric: tabular-nums; } .inad-acoes { display: flex; gap: 5px; justify-content: flex-end; min-width: 76px; }
.inad-det { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 4px 16px 16px; background: var(--wash); }
.inad-det h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.inad-meta { grid-column: 1 / -1; } .inad-links { float: right; } .inad-vazio { margin: 0; padding: 22px 16px; color: var(--muted); }
@media (max-width: 640px) {
  .inad-item > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; } .inad-saldo { text-align: left; order: 4; grid-column: 1; } .inad-acoes { order: 3; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .inad-dias { order: 2; } .inad-det { grid-template-columns: minmax(0, 1fr); }
}
/* Novos clientes */
.novo-form > summary { cursor: pointer; font-weight: 650; font-size: 16px; list-style: none; } .novo-form > summary::-webkit-details-marker { display: none; }
.novo-form > summary::before { content: "▸ "; color: var(--muted); } .novo-form[open] > summary::before { content: "▾ "; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
details.upl > summary { list-style: none; cursor: pointer; display: inline-flex; } details.upl > summary::-webkit-details-marker { display: none; }
details.upl form { display: grid; gap: 6px; margin-top: 8px; max-width: 280px; } details.upl select, details.upl input[type=file] { max-width: 100%; font-size: 13px; }
table.novos tr.destaque td { background: var(--s1-soft); } table.novos .bar-h { max-width: 160px; }
/* menu: nomes curtos quando falta espaço */
.n-curto { display: none; }
@media (max-width: 1260px) { .n-longo { display: none; } .n-curto { display: inline; } nav.menu a { padding: 7px 9px; font-size: 13.5px; } }
@media (max-width: 1060px) { .brand span { display: none; } header.top .wrap { gap: 10px; } }
/* Conferência */
.chks { display: flex; flex-wrap: wrap; gap: 4px; } .chk { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--base); color: var(--ink2); white-space: nowrap; }
.chk.ok { color: var(--good-ink); border-color: currentColor; } .chk.falta { color: var(--crit-ink); border-color: currentColor; opacity: .9; }
.acoes-conf { white-space: normal; } .acoes-conf form { margin: 0 4px 4px 0; } form.reprovar { display: inline-flex; gap: 4px; align-items: center; }
form.reprovar input[type=text] { min-height: 28px; width: 130px; padding: 2px 8px; font-size: 13px; }
details.card > summary.h2s { cursor: pointer; font-weight: 650; font-size: 16px; list-style: none; } details.card > summary.h2s::-webkit-details-marker { display: none; }
details.card > summary.h2s::before { content: "▸ "; color: var(--muted); } details.card[open] > summary.h2s::before { content: "▾ "; }

/* ============================================================ CELULAR ============================================================
   Barra de baixo (polegar), alvos de toque ≥ 44 px, 16 px nos campos (o iPhone dá zoom abaixo disso), áreas seguras (notch/barra do iOS),
   cartões "Salvar" fixos e o card da Hoje que ficava preso numa coluna de 0 px. */
:root { --tabbar-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, select, label, input[type=checkbox], input[type=radio] { touch-action: manipulation; }
.tabbar, .mais, .salvar-barra { display: none; }
.grid > * { min-width: 0; }
@media (max-width: 860px) { .grid > [style*="span 4"] { grid-column: 1 / -1 !important; } }                 /* cartão "span 4" numa grade de 2 colunas criava colunas de 0 px */
@media (max-width: 560px) { .grid > [style*="span "] { grid-column: auto !important; } }                    /* e numa grade de 1 coluna o "span 2" espremia o 1º cartão (34 px) por baixo do 2º */
@media (max-width: 760px) {
  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
  header.top { padding-top: var(--safe-t); } header.top nav.menu, header.top .top-actions { display: none; }
  header.top .wrap { height: 46px; }
  .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  h1 { font-size: 22px; margin-top: 18px; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--border); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px; font: inherit; font-size: 11px;
    color: var(--ink2); background: none; border: 0; text-decoration: none; cursor: pointer; }
  .tabbar a[aria-current="page"] { color: var(--accent); }          /* sem negrito: "Inadimplentes" ativo ficava mais largo que a aba e era cortado */
  .tabbar .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mais:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; }
  .mais-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
  .mais-painel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto; background: var(--surface); border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
  .mais-lista a { display: flex; align-items: center; min-height: 52px; padding: 0 6px; border-bottom: 1px solid var(--grid); color: var(--ink); font-size: 17px; text-decoration: none; }
  .mais-lista a[aria-current="page"] { color: var(--accent); font-weight: 650; } .mais-lista a.critico { color: var(--crit-ink); }
  .tabbar button[data-ativo] { color: var(--accent); }
  .mais-topo { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 8px; } .mais-topo strong { font-size: 15px; } .mais-topo .btn { min-width: 44px; justify-content: center; }
  .tabbar button.critico { position: relative; } .tabbar button.critico::after { content: ""; position: absolute; top: 6px; left: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--crit); border: 2px solid var(--surface); }
  .alerta-ingestao { display: block; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--crit); border-radius: 10px; background: var(--wash); color: var(--crit-ink); text-decoration: none; font-size: 14px; overflow-wrap: anywhere; }
  .mais-acoes { display: flex; gap: 10px; margin-top: 14px; position: sticky; bottom: calc(-16px - var(--safe-b)); padding: 10px 0 calc(16px + var(--safe-b)); background: var(--surface); }          /* com a ingestão em alerta a lista passa de 80vh: Tema/Sair não somem abaixo da dobra */ .mais-acoes .btn, .mais-acoes form { flex: 1; } .mais-acoes form .btn { width: 100%; }
  body.mais-aberto { overflow: hidden; }
  /* alvos de toque e campos */
  .btn { min-height: 44px; padding: 8px 14px; font-size: 15px; } .btn.sm { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .preset { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; }
  input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], input[type=email], input[type=tel], input[type=url], select, textarea {
    min-height: 44px; font-size: 16px; }
  textarea { min-height: 96px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .pl-titulo { flex-wrap: wrap; row-gap: 0; }                                                                  /* 320 px: título + mês não cabem numa linha só */
  .mes-nav a, .mes-nav .off { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; padding: 0; }
  .tabbar a, .tabbar button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a span, .tabbar button span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }          /* 320 px: 'Inadimplentes' termina em reticências em vez de cortado */
  table.cards td a, table.cards td .btn { min-height: 40px; }
  .ctt .btn, .inad-acoes .btn { min-height: 40px; min-width: 44px; justify-content: center; }
  table.manual td input[type=number], table.manual td input[type=text] { min-height: 44px; font-size: 16px; } table.manual td input.nm[type=number] { width: 58px; min-height: 40px; font-size: 16px; }
  table.manual .btn.lim { min-height: 40px; min-width: 40px; }
  .pl-h { font-size: 12px; } .pl-n { font-size: 12px; } th { font-size: 12px; }
  .selbar { top: calc(46px + var(--safe-t) + 8px); }          /* o cabeçalho do celular tem 46 px + área segura: a barra de seleção não fica por baixo dele */
  table.pl-lista td, table.pl-lista th, table.pl-entradas td, table.pl-entradas th { padding-left: 6px; padding-right: 6px; } table.pl-lista td.ref, table.pl-entradas td.ref { overflow-wrap: anywhere; min-width: 0; }   /* 320 px: Valor + Referente + Total estouravam 6 px */
  /* Salvar fixo (acima da barra): formulários longos não obrigam a rolar até o fim */
  .salvar-barra { display: block; position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 30; margin-top: 14px; padding: 10px 0 2px; }
  .salvar-barra .btn { width: 100%; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
  .pl-man-lado > .btn.primary { display: none; }
  .salvar-fixo { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 30; padding: 8px 0 2px; }
  .salvar-fixo .btn { width: 100%; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
  /* lista de pagamentos: cartão compacto (pagador + valor em cima; conta + hora; classificação + situação; ajustes) em vez de um rótulo por linha */
  table.cards.compacta tr { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 3px 12px; padding: 12px 10px; }
  table.cards.compacta tr:first-child { display: none; }                                                         /* cabeçalho da tabela: some (os dados já vêm em cartões) */
  table.cards.compacta td { padding: 0; } table.cards.compacta td[data-rotulo]::before { display: none; }
  table.cards.compacta td[data-rotulo="Pagador"] { grid-column: 1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; }
  table.cards.compacta td[data-rotulo="Valor"] { grid-column: 2; grid-row: 1; font-weight: 700; text-align: right; }
  table.cards.compacta td[data-rotulo="Conta"] { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muted); }
  table.cards.compacta td[data-rotulo="Hora"] { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--muted); text-align: right; }
  table.cards.compacta td[data-rotulo="Classificação"] { grid-column: 1; grid-row: 3; margin-top: 4px; }
  table.cards.compacta td[data-rotulo="Situação"] { grid-column: 2; grid-row: 3; margin-top: 4px; text-align: right; overflow-wrap: anywhere; min-width: 0; }          /* motivo longo (estorno da API) não engole o Pagador */
  table.cards.compacta td[data-rotulo="Ajustar"] { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
  .filters label, form.inline label { display: inline-flex; align-items: center; gap: 8px; }
  .alert { position: relative; }
  /* os que têm regra própria mais específica (custos, data de ingresso, arquivos, motivo) */
  table.pl-custos td input[type=number], form.entrada input[type=date], form.reprovar input[type=text] { min-height: 44px; font-size: 16px; }
  form.entrada .btn { min-height: 44px; } form.entrada input[type=date] { width: 150px; }
  input[type=file] { min-height: 44px; font-size: 15px; max-width: 100%; padding: 10px 8px; }
  details.upl select, details.upl input[type=file] { font-size: 16px; }
  .small, .muted.small { font-size: 13.5px; }
}
@media (max-width: 340px) { table.pl-entradas td, table.pl-lista td { font-size: 12px; } table.pl-entradas th, table.pl-lista th { letter-spacing: 0; } }          /* 320 px: valores de 6 dígitos (R$ 123.456,78) cabem */
@media (max-width: 400px) { .tabbar a, .tabbar button { padding-left: 0; padding-right: 0; } .tabbar a span, .tabbar button span { font-size: 10.5px; } }          /* 'Inadimplentes' cabe inteiro em 375 px */
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .tabbar { background: color-mix(in srgb, var(--surface) 92%, transparent); } }

/* Barra da meta de caixa — canto superior direito do cabeçalho (só admin): caixa de agora × a maior meta de caixa do mês */
.meta-caixa { display: flex; flex-direction: column; gap: 3px; width: clamp(112px, 9vw, 200px); flex: none; color: var(--ink2); text-decoration: none; }
.meta-caixa:hover { text-decoration: none; }
.meta-caixa .mc-linha { display: flex; justify-content: space-between; padding: 0 1px; font-size: 11px; font-weight: 650; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.meta-caixa .mc-barra { display: flex; align-items: center; gap: 6px; }
.meta-caixa .mc-trilho { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.meta-caixa .mc-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--s1), var(--s3)); min-width: 6px; transition: width .6s var(--ease, ease); }
.meta-caixa .mc-moeda { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--warn); color: #3a2a00; font: 800 8px/1 system-ui, sans-serif; font-style: normal; box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }
.meta-caixa .mc-alvo { font-size: 10px; }
.meta-caixa.batida .mc-alvo { background: var(--good); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 35%, transparent); }
.meta-caixa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 760px) { .meta-caixa { width: 164px; margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .meta-caixa .mc-fill { transition: none; } }
nav.menu a.critico { order: -1; }                      /* o aviso crítico de ingestão fica sempre à vista, mesmo com o menu rolando (a barra da meta de caixa ocupa espaço no cabeçalho) */

/* ===== Hoje (07/10): cartões das agências, setinhas e indicadores recolhidos (modelo 3A escolhido pelo Leonardo) ===== */
.hj-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.hj-menu { position: relative; } .hj-menu > summary { list-style: none; cursor: pointer; } .hj-menu > summary::-webkit-details-marker { display: none; }
.hj-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: grid; }
.hj-menu-lista button { text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 38px; }
.hj-menu-lista button:hover { background: var(--wash); }
.hj-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .hj-kpis .hj-k-hero { grid-column: span 2; }
.hj-kpis2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.hj-seta { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; margin: 0 0 0 -5px; padding: 3px 8px 3px 5px; color: var(--ink2); font-size: 13px; cursor: pointer; border-radius: 8px; min-height: 28px; text-align: left; }
.hj-seta:hover { background: var(--wash); } .hj-seta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hj-chev { flex: none; width: 7px; height: 7px; margin: 0 2px 2px 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s var(--ease); }
[aria-expanded="true"] > .hj-chev, [aria-expanded="true"] .hj-chev { transform: rotate(45deg); margin-bottom: 4px; }
.hj-painel { margin-top: 8px; padding: 10px 12px; background: var(--wash); border-radius: var(--radius-sm); }
.hj-painel.solto { background: none; padding: 0; }
.hj-sub { margin: 12px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .hj-sub b { color: var(--ink2); } .hj-sub:first-child { margin-top: 0; }
.hj-falta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 0 22px; }
.hj-falta li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.hj-falta .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hj-falta .fp { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hj-falta .tag { white-space: nowrap; font-size: 11.5px; padding: 0 7px; }
.hj-vazio { margin: 0; color: var(--good-ink); font-size: 13.5px; }
.hj-prog { display: flex; align-items: center; gap: 8px; min-width: 0; } .hj-prog .bar-h { flex: 1; min-width: 40px; height: 6px; }
.hj-prog .n { font-size: 12.5px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hj-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; align-items: start; }
.hj-tiles.um { grid-template-columns: minmax(0, 440px); }
.hj-tile { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; } .hj-tile h2 { margin: 0; font-size: 14.5px; white-space: nowrap; }
.hj-tile .valor { font-size: 28px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hj-tile .lines li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hj-tile-rodape { display: flex; flex-wrap: wrap; gap: 0 4px; }
.hj-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 8px; }
.hj-mini { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; min-height: 44px; }
.hj-mini:hover { border-color: var(--base); } .hj-mini[aria-expanded="true"] { border-color: var(--accent); background: var(--s1-soft); }
.hj-mini .t { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .hj-mini .t .hj-chev { margin-left: auto; }
.hj-mini .v { font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-estados { max-width: 560px; }
@media (max-width: 1000px) { .hj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hj-tile:has(.hj-seta[aria-expanded="true"]) { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .hj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hj-kpis .hj-k-hero { grid-column: 1 / -1; }
  .hj-kpis2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hj-kpis .hj-k { padding: 14px; } .hj-kpis .hj-k .value { font-size: 21px; } .hj-kpis .hj-k-hero .value { font-size: 44px; }
  .hj-seta { min-height: 40px; } .hj-menu-lista button { min-height: 44px; }
}
@media (max-width: 560px) {
  .hj-lbl { display: none; }
  .hj-acoes { margin-left: 0; width: 100%; } .hj-acoes .btn.primary { flex: 1 1 auto; justify-content: center; }
  .hj-tiles { gap: 8px; } .hj-tile { padding: 12px 10px 8px; } .hj-tile .valor { font-size: 23px; } .hj-tiles.um { grid-template-columns: minmax(0, 1fr); } .hj-tiles.um .hj-tile .valor { font-size: 28px; }
  .hj-minis { grid-template-columns: minmax(0, 1fr); }
  .hj-tile .hj-seta .hj-p { display: block; line-height: 1.3; } .hj-tile .hj-seta .hj-sep { display: none; }          /* celular: "Pagaram N" e "Faltam N" em duas linhas, sem quebrar no meio */
}

/* Pareamento do Mercado Pago (07/10): palpite sinalizado, "lembrar" que não vale para palpite/PIX sem nome, e a caixa "repete todo mês" dos Custos do mês */
.tag.palpite { color: var(--warn-ink); border-style: dashed; border-color: currentColor; font-size: 11.5px; padding: 0 7px; vertical-align: 1px; cursor: help; }
.lembrar-off { color: var(--muted); cursor: not-allowed; } .lembrar-off input[type=checkbox] { cursor: not-allowed; }
table.pl-custos td .rep { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 2px 2px 3px 0; font-size: 11.5px; color: var(--muted); cursor: pointer; line-height: 1.2; }
table.pl-custos td .rep input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
table.pl-custos td .rep:has(input[type=checkbox]:checked) { color: var(--ink2); }
@media (max-width: 760px) { table.pl-custos td .rep { min-height: 36px; font-size: 12.5px; } table.pl-custos td .rep input[type=checkbox] { width: 22px; height: 22px; } }


/* ============================================================ BS Digital: logo, plano de fundo e as abas novas ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); } .brand:hover { text-decoration: none; }
.brand img { display: block; width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px var(--border); }
nav.menu .sep { align-self: center; width: 1px; height: 18px; background: var(--base); margin: 0 6px; flex: none; }
.login-logo { display: block; margin: 0 auto 12px; width: 112px; height: 112px; border-radius: 20px; box-shadow: 0 8px 28px rgba(0, 0, 0, .38); }
.login h1, .login .sub { text-align: center; }

/* Plano de fundo: a mesma foto do quadro do Trello. Camadas FIXAS (e não background-attachment: fixed, que o iPhone não respeita); o véu garante a leitura do texto fora dos cartões. */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url(/static/fundo.jpg?v=1) center / cover no-repeat; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(249, 249, 247, .66); }
@media (max-width: 760px) { body::before { background-image: url(/static/fundo-m.jpg?v=1); } }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) body::after { background: rgba(10, 10, 10, .72); } }
:root[data-theme="dark"] body::after { background: rgba(10, 10, 10, .72); }
header.top { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }

/* Dash */
.dash-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: 14px; align-items: start; }
.fonte { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grid); } .fonte:last-child { border-bottom: 0; }
.fonte .nm { display: grid; gap: 1px; min-width: 0; } .fonte .nm small { color: var(--muted); font-size: 12px; }
.lista-of { display: grid; gap: 0; } .lista-of a.of { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); color: var(--ink); }
.lista-of a.of:last-child { border-bottom: 0; } .lista-of a.of:hover { text-decoration: none; background: var(--wash); } .lista-of .sub2 { color: var(--muted); font-size: 12.5px; grid-column: 1 / -1; }
.barra-fase { height: 6px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; margin-top: 4px; grid-column: 1 / -1; } .barra-fase i { display: block; height: 100%; background: linear-gradient(90deg, var(--s1), var(--s3)); }
.vazio { color: var(--muted); padding: 6px 0; }

/* Métricas */
.met-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-top: 12px; align-items: start; }
.met-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); } .met-linha:last-child { border-bottom: 0; }
.met-linha b { font-weight: 600; } .met-linha .como { color: var(--muted); font-size: 12.5px; grid-column: 1 / -1; } .met-linha .valor { font-variant-numeric: tabular-nums; color: var(--muted); }

/* Financeiro */
.lanc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .lanc-form input[type=text] { min-width: 220px; flex: 1; }
.lanc-form .rep, td .rep2 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.pl-custos.largo { max-width: 560px; } table.pl-custos td.num { padding-right: 10px; }
table.pl-custos tr.tot-tipo th, table.pl-custos tr.tot-tipo td { background: var(--wash); font-weight: 700; }

/* Demandas */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 12px; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kanban { grid-template-columns: minmax(0, 1fr); } }
.kol { background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: grid; gap: 8px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kol > h2 { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin: 2px 2px 0; }
.dem { background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 10px 11px; display: grid; gap: 6px; box-shadow: var(--shadow); }
.dem.pri-alta { border-left-color: var(--crit); } .dem.pri-media { border-left-color: var(--warn); } .dem.pri-baixa { border-left-color: var(--s3); }
.dem.atrasada { outline: 1px solid var(--crit); } .dem .titulo { font-weight: 600; overflow-wrap: anywhere; }
.dem .meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--muted); } .dem .desc { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; white-space: pre-line; }
.dem .acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dem .acoes form { margin: 0; } .dem details > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.dem .links a { font-size: 12.5px; }
.filtro-of { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }

/* ============================================================ Dash principal no formato da UTMify ============================================================
   Escopo .utm: paleta azul-marinho própria (igual nos dois temas do site), cartões pequenos com rótulo cinza e valor em branco, lucro/margem em verde. */
.wrap.wide { max-width: none; }
.utm { --u-bg: #151c31; --u-card: #212a44; --u-card2: #28335a; --u-linha: rgba(255, 255, 255, .07); --u-txt: #f4f6fb; --u-sub: #9ba7c2; --u-azul: #1d5fe0; --u-verde: #22c55e; --u-verm: #f07070;
  background: var(--u-bg); color: var(--u-txt); border-radius: 12px; padding: 8px; margin-top: 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.utm *, .utm *::before, .utm *::after { box-sizing: border-box; } .utm a { color: #6aa8ff; }
.u-barra { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--u-card); border-radius: 8px; margin-bottom: 8px; }
.u-titulo { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; letter-spacing: 0; color: var(--u-txt); }
.u-titulo select { background: transparent; border: 0; color: inherit; font: inherit; padding: 2px 4px; min-height: 0; border-radius: 6px; cursor: pointer; max-width: min(52vw, 440px); text-overflow: ellipsis; }
.u-titulo select:hover { background: rgba(255, 255, 255, .07); } .utm select option { background: #1b2339; color: #f4f6fb; }
.u-icos { display: flex; gap: 6px; } .u-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; background: transparent; border: 0; color: var(--u-sub); border-radius: 6px; cursor: pointer; padding: 0; }
.u-ico:hover, .u-ico[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.u-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-resumo { background: var(--u-card); border-radius: 8px; padding: 12px 14px 10px; margin-bottom: 8px; }
.u-resumo-topo { display: flex; align-items: center; gap: 12px; } .u-resumo-topo h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; color: var(--u-txt); }
.u-status { color: var(--u-sub); font-size: 12.5px; text-align: right; } .u-aviso { color: #f5b301; }
.u-btn { background: var(--u-azul); color: #fff; border: 0; border-radius: 6px; padding: 8px 22px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; } .u-btn:hover { filter: brightness(1.15); }
.u-filtros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 22px; margin-top: 12px; align-items: end; }
.u-filtros label { display: grid; gap: 6px; color: var(--u-sub); font-size: 12px; min-width: 0; }
.u-filtros select, .u-filtros input { background: #1a2238; border: 1px solid rgba(255, 255, 255, .09); color: var(--u-txt); border-radius: 6px; padding: 7px 10px; min-height: 38px; font-size: 14px; width: 100%; }
.u-filtros select:focus, .u-filtros input:focus, .utm button:focus-visible, .utm a:focus-visible { outline: 2px solid #4b8dff; outline-offset: 1px; }
.u-custom { grid-column: 1 / -1; display: flex; gap: 14px; } .u-custom[hidden] { display: none; } .u-custom label { max-width: 190px; }
.u-mais { grid-column: 1 / -1; justify-self: end; width: 100%; } .u-mais > summary { cursor: pointer; color: var(--u-sub); font-size: 12.5px; list-style: none; text-align: right; } .u-mais > summary::-webkit-details-marker { display: none; }
.u-mais > summary::after { content: " ⌄"; } .u-mais[open] > summary::after { content: " ⌃"; }
.u-mais-corpo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 22px; margin-top: 10px; }

.u-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1.36fr .66fr 1fr; align-items: stretch;
  grid-template-areas: "liq gas roas luc" "apr prod roi pen" "apr prod mar arpu" "fb iv rb cpa" "pag pais pais im" "pag pais pais vre" "pag pais pais vch" "pag pais pais vdev"; }
.a-liq { grid-area: liq; } .a-gas { grid-area: gas; } .a-roas { grid-area: roas; } .a-luc { grid-area: luc; } .a-apr { grid-area: apr; } .a-prod { grid-area: prod; } .a-roi { grid-area: roi; }
.a-mar { grid-area: mar; } .a-pen { grid-area: pen; } .a-arpu { grid-area: arpu; } .a-fb { grid-area: fb; } .a-iv { grid-area: iv; } .a-rb { grid-area: rb; } .a-cpa { grid-area: cpa; }
.a-pag { grid-area: pag; } .a-pais { grid-area: pais; } .a-im { grid-area: im; } .a-vre { grid-area: vre; } .a-vch { grid-area: vch; } .a-vdev { grid-area: vdev; }
.u-card { background: var(--u-card); border-radius: 8px; padding: 13px 16px; min-width: 0; }
.u-l { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--u-sub); font-size: 12.5px; }
.u-kpi { display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; } .u-v { margin-top: 8px; font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.u-verde .u-l, .u-verde .u-v { color: var(--u-verde); }
.u-alto > .u-l .u-tit, .u-cab .u-tit, .u-grafico > .u-l .u-tit { color: var(--u-txt); font-size: 15px; font-weight: 500; }
.u-i { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--u-sub); border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 600; color: var(--u-sub); cursor: help; flex: none; opacity: .85; }
.u-i:hover, .u-i:focus-visible { color: #fff; border-color: #fff; }
.u-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .u-split .u-card { padding-left: 13px; padding-right: 10px; }          /* o espacinho do Chargeback: colado no Reembolso */
.u-chargeback .u-l { color: #c3a0a0; } .u-alerta .u-v { color: var(--u-verm); }
.u-linhas { margin-top: 8px; display: grid; } .u-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; color: var(--u-sub); font-size: 13.5px; min-height: 38px; }
.u-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-fim { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.u-q { color: var(--u-txt); font-variant-numeric: tabular-nums; } .u-p { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; } .u-vazio { color: var(--u-sub); padding: 10px 0; font-size: 13.5px; }
.u-svg.u-anel { width: 26px; height: 26px; display: block; flex: none; }
.u-svg.u-rosca { display: block; width: min(100%, 200px); height: auto; margin: 10px auto 4px; }
.u-t-grande { fill: #fff; font: 700 26px system-ui, sans-serif; } .u-t-sub { fill: #9ba7c2; font: 400 12px system-ui, sans-serif; }
.u-t-eixo { fill: #a3aec8; font: 400 11px system-ui, sans-serif; } .u-t-mini { fill: #a3aec8; font: 400 9.6px system-ui, sans-serif; }
.u-svg { display: block; width: 100%; height: auto; }
.u-leg2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: var(--u-sub); font-size: 13px; margin-top: 6px; } .u-leg2 i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.u-leg-topo { margin: 2px 0 6px; }
.u-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-tabs { display: inline-flex; gap: 14px; font-size: 13px; } .u-tabs label { color: var(--u-sub); cursor: pointer; } .u-r { position: absolute; opacity: 0; pointer-events: none; }
.u-mapa:has(#vp-mapa:checked) label[for="vp-mapa"], .u-mapa:has(#vp-rank:checked) label[for="vp-rank"] { color: #fff; font-weight: 700; }
.u-mapa:has(#vp-rank:checked) .u-vista-mapa, .u-mapa:has(#vp-mapa:checked) .u-vista-rank { display: none; } .u-mapa { position: relative; }
.u-mapa-box { position: relative; margin-top: 8px; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 1; min-height: 190px; } .u-svg.u-mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-marca circle { transition: r .15s; } .u-marca:hover circle:last-child { stroke-width: 1.6; }
.u-dica { position: absolute; left: 8px; bottom: 8px; background: rgba(13, 18, 33, .9); border: 1px solid rgba(255, 255, 255, .12); color: var(--u-sub); border-radius: 8px; padding: 8px 12px; font-size: 11.5px; }
.u-sempais { position: absolute; right: 8px; bottom: 8px; background: rgba(13, 18, 33, .94); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 8px 12px; text-align: right; line-height: 1.25; }
.u-sempais span { display: block; color: var(--u-sub); font-size: 11px; } .u-sempais b { font-size: 18px; color: #fff; } .u-sempais small { color: var(--u-ciano, #38bdf8); font-size: 11px; }
.u-grafico { margin-top: 8px; } .u-grafico .u-l { margin-bottom: 4px; } .u-sel { background: #1a2238; border: 1px solid rgba(255, 255, 255, .09); color: var(--u-txt); border-radius: 6px; padding: 5px 10px; min-height: 34px; font-size: 13px; }
.u-mob { display: none; } .u-desk { display: block; }
.utm.u-oculto .u-v, .utm.u-oculto .u-p, .utm.u-oculto .u-q, .utm.u-oculto .u-sempais b, .utm.u-oculto .u-t-grande, .utm.u-oculto .u-svg text { filter: blur(6px); }      /* "ocultar valores" (o olho): para mostrar a tela sem expor os números */
.u-sec { margin: 26px 2px 10px; font-size: 18px; color: var(--u-txt); }
@media (max-width: 1100px) {
  .u-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "liq gas" "roas luc" "roi mar" "pen arpu" "fb iv" "rb cpa" "apr apr" "prod prod" "pag pag" "pais pais" "im vre" "vch vdev"; }
  .u-filtros, .u-mais-corpo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .utm { padding: 6px; border-radius: 10px; } .u-barra { padding: 8px 10px; } .u-filtros, .u-mais-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .u-mapa-box { aspect-ratio: 1.7 / 1; min-height: 0; }
  .u-desk { display: none; } .u-mob { display: block; } .u-mob .u-t-eixo { font-size: 13px; } .u-mob .u-t-mini { font-size: 11px; } .u-v { font-size: 20px; } .u-kpi { min-height: 74px; }
  .u-resumo-topo { flex-wrap: wrap; gap: 6px 10px; } .u-status { text-align: left; order: 3; width: 100%; } .u-sempais { padding: 6px 8px; } .u-dica { display: none; }
}

/* linhas de grupo/total das tabelas de custos: opacas (com o plano de fundo em foto, o --wash translúcido deixava a imagem aparecer através da tabela) */
table.pl-custos tr.grupo th, table.pl-custos tr.total th, table.pl-custos tr.total td, table.pl-custos tr.tot-tipo th, table.pl-custos tr.tot-tipo td { background: color-mix(in srgb, var(--pl-cel) 92%, var(--ink) 8%); }


/* ---- Dash: a PÁGINA inteira no PRETO do painel (sem a foto), nos dois temas do site; os cartões seguem a cor da UTMify. Cabeçalho, barra do celular e cartões da Operação herdam estas cores ---- */
body.pagina-utm { color-scheme: dark; background: #0d0d0d; --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --base: #383835;
  --border: rgba(255, 255, 255, .1); --wash: rgba(255, 255, 255, .06); --accent: #6aa8ff; --on-accent: #fff; --good-ink: #4ade80; --warn-ink: #fbbf24; --crit-ink: #f87171; --shadow: none; }
body.pagina-utm::before { display: none; } body.pagina-utm::after { background: #0d0d0d; }
body.pagina-utm header.top { background: #141414; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.pagina-utm .utm { background: transparent; box-shadow: none; border-radius: 0; padding: 4px 0 12px; margin-top: 8px; }
body.pagina-utm .utm .card { background: var(--u-card); border: 0; border-radius: 8px; color: var(--u-txt); padding: 13px 16px; }
body.pagina-utm .utm .card h2 { font-size: 16px; color: var(--u-txt); } body.pagina-utm .utm .muted, body.pagina-utm .utm .small.muted { color: var(--u-sub); }
body.pagina-utm .utm .fonte { border-bottom-color: var(--u-linha); } body.pagina-utm .utm .fonte .nm small { font-size: 13px; } body.pagina-utm .utm .lista-of a.of { border-bottom-color: var(--u-linha); color: var(--u-txt); }
body.pagina-utm .utm .lista-of .sub2 { font-size: 13px; } body.pagina-utm .utm .tag { font-size: 12.5px; border-color: rgba(255, 255, 255, .22); color: var(--u-sub); }
body.pagina-utm .utm .tag.good { color: #4ade80; border-color: currentColor; } body.pagina-utm .utm .tag.warn { color: #fbbf24; border-color: currentColor; }
body.pagina-utm .utm .tag.crit { color: #f87171; border-color: currentColor; } body.pagina-utm .utm .tag.info { color: #7db3ff; border-color: currentColor; }
body.pagina-utm .utm .alert { background: var(--u-card); color: var(--u-txt); }

@media (max-width: 760px) { .u-titulo { font-size: 16px; white-space: nowrap; } .u-titulo select { max-width: 52vw; font-size: 16px; } }

.u-nota { margin: 8px 0 0; color: var(--u-sub); font-size: 12.5px; }