/* Financeiro, design system */
:root{
  --ink:#0d1421; --ink-2:#3c4657; --ink-3:#6b7688; --ink-4:#98a1b0;
  --bg:#fbfbfc; --surface:#ffffff; --surface-2:#f5f6f8; --surface-3:#eef0f3;
  --line:#e4e7ec; --line-2:#d3d8e0;
  --brand:#3d3ad4; --brand-ink:#2b28a8; --brand-bg:#eeeefc;
  --pos:#0b7a4b; --pos-bg:#e7f5ee;
  --warn:#9a5b06; --warn-bg:#fdf3e3;
  --neg:#b4261f; --neg-bg:#fdecea;
  --shadow:0 1px 2px rgba(13,20,33,.06);
  --shadow-md:0 4px 12px rgba(13,20,33,.08),0 1px 2px rgba(13,20,33,.04);
  --r:6px; --r-lg:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f2f4f7; --ink-2:#c3cad6; --ink-3:#8b95a5; --ink-4:#6a7484;
    --bg:#0b0e14; --surface:#12161f; --surface-2:#171c26; --surface-3:#1e2531;
    --line:#242b38; --line-2:#2f3745;
    --brand:#8b87ff; --brand-ink:#a8a5ff; --brand-bg:#1c1b3d;
    --pos:#4ec08a; --pos-bg:#10291f; --warn:#e0a84e; --warn-bg:#2b2113;
    --neg:#ef6f6a; --neg-bg:#2d1615;
    --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
html[data-tema="escuro"]{
  --ink:#f2f4f7; --ink-2:#c3cad6; --ink-3:#8b95a5; --ink-4:#6a7484;
  --bg:#0b0e14; --surface:#12161f; --surface-2:#171c26; --surface-3:#1e2531;
  --line:#242b38; --line-2:#2f3745;
  --brand:#8b87ff; --brand-ink:#a8a5ff; --brand-bg:#1c1b3d;
  --pos:#4ec08a; --pos-bg:#10291f; --warn:#e0a84e; --warn-bg:#2b2113;
  --neg:#ef6f6a; --neg-bg:#2d1615;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4);
  color-scheme:dark;
}
html[data-tema="claro"]{
  --ink:#0d1421; --ink-2:#3c4657; --ink-3:#6b7688; --ink-4:#98a1b0;
  --bg:#fbfbfc; --surface:#ffffff; --surface-2:#f5f6f8; --surface-3:#eef0f3;
  --line:#e4e7ec; --line-2:#d3d8e0;
  --brand:#3d3ad4; --brand-ink:#2b28a8; --brand-bg:#eeeefc;
  --pos:#0b7a4b; --pos-bg:#e7f5ee; --warn:#9a5b06; --warn-bg:#fdf3e3;
  --neg:#b4261f; --neg-bg:#fdecea;
  --shadow:0 1px 2px rgba(13,20,33,.06);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
a{color:inherit;text-decoration:none}
svg{width:16px;height:16px;flex:none;display:block}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.side-top{padding:16px 14px 10px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:-.01em;margin-bottom:14px}
.logo-mark{width:22px;height:22px;border-radius:6px;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:700}
.switch{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.switch a{flex:1;text-align:center;padding:5px 6px;border-radius:6px;font-size:12.5px;font-weight:500;
  color:var(--ink-3);transition:all .12s}
.switch a:hover{color:var(--ink)}
.switch a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.nav{padding:6px 8px;flex:1}
.nav-lbl{font-size:11px;font-weight:600;color:var(--ink-4);letter-spacing:.03em;padding:14px 8px 5px}
.nav a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;color:var(--ink-2);
  font-size:13.5px;font-weight:450;transition:background .12s,color .12s}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--brand-bg);color:var(--brand-ink);font-weight:550}
.nav a.on svg{color:var(--brand)}
.nav svg{width:16px;height:16px;flex:none;color:var(--ink-4)}
.nav .badge{margin-left:auto;background:var(--neg-bg);color:var(--neg);font-size:11px;font-weight:600;
  padding:0 6px;border-radius:99px;line-height:17px}
.side-bot{padding:10px 8px;border-top:1px solid var(--line)}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:56px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;align-items:center;
  gap:12px;padding:0 20px;position:sticky;top:0;z-index:20}
.top form[role=search]{flex:1;max-width:380px;position:relative;display:flex;align-items:center}
.top form[role=search] svg{position:absolute;left:9px;width:15px;height:15px;color:var(--ink-4);pointer-events:none}
.top input[type=search]{width:100%;padding:6px 10px 6px 30px;font-size:13px}
.top-fim{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.top-div{width:1px;height:22px;background:var(--line);flex:none}
.wrap{padding:22px 28px 72px;max-width:1400px;width:100%;margin:0 auto}
@media (min-width:1600px){.wrap{padding:26px 36px 80px}}

/* ---------- typography ---------- */
h1{font-size:21px;font-weight:600;letter-spacing:-.02em}
h2{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
h3{font-size:13px;font-weight:600;color:var(--ink-2)}
.sub{color:var(--ink-3);font-size:13px;margin-top:2px}
.muted{color:var(--ink-3)}
.mini{font-size:12px;color:var(--ink-3)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head-compacto{align-items:center;margin-bottom:10px}
.resumo-filtro{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  display:flex;align-items:center;gap:4px}
.resumo-filtro b{color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.resumo-filtro{margin-left:0;width:100%;white-space:normal}}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;height:32px;
  border-radius:var(--r);font-size:13px;line-height:1;
  font-weight:500;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow);transition:background .12s,border-color .12s,transform .06s;white-space:nowrap;
  vertical-align:middle}
.btn:hover{background:var(--surface-2);border-color:var(--ink-4)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:transparent}
.btn-sm{height:26px;padding:0 9px;font-size:12px;gap:5px}
.btn-sm svg{width:13px;height:13px}
form.inline,form.i{display:inline-flex}
.btn-danger{color:var(--neg);border-color:var(--line-2)}
.btn-danger:hover{background:var(--neg-bg);border-color:var(--neg)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:1px}

/* ---------- inputs ---------- */
input,select,textarea{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:0 9px;height:32px;box-shadow:var(--shadow);
  transition:border-color .12s;vertical-align:middle}
textarea{height:auto;padding:7px 9px}
input[type=checkbox]{height:auto}
input[type=date],input[type=month]{padding-right:6px}
::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
::-webkit-calendar-picker-indicator:hover{opacity:1}
input:hover,select:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
select{appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7688' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px}
label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:14px}
.field input,.field select,.field textarea{width:100%}
.field input[type=checkbox],.field input[type=radio]{width:auto;flex:none}
.check-line{display:inline-flex;gap:9px;align-items:center;font-weight:450;cursor:pointer;margin:0;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.check-line:hover{border-color:var(--ink-4)}
.check-line:has(input:checked){border-color:var(--brand);background:var(--brand-bg);color:var(--brand-ink)}
.check-line span{line-height:1}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* ---------- barra de lista (padrão EspoCRM: limpo, ferramentas sob demanda) ---------- */
.barra-lista{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.campo-busca{display:flex;flex:0 1 380px;min-width:220px}
.campo-busca input{flex:1;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.btn-busca{border-top-left-radius:0;border-bottom-left-radius:0;padding:0 11px}
.dd{position:relative}
.dd>summary{list-style:none;cursor:pointer;user-select:none}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::marker{content:""}
.dd .cx{font-size:10px;opacity:.7}
.dd-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:210px;max-width:calc(100vw - 28px);
  background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:5px;z-index:40}
/* em tela estreita o painel abriria para fora da direita */
@media (max-width:700px){.dd-menu{left:auto;right:0}}
.dd-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:var(--r);
  font-size:13px;color:var(--ink-2);background:none;border:none;cursor:pointer;text-align:left;
  font-family:inherit;height:auto;box-shadow:none}
.dd-item:hover{background:var(--surface-2);color:var(--ink)}
.dd-item.on{background:var(--brand-bg);color:var(--brand-ink);font-weight:550}
.dd-item.perigo{color:var(--neg)}
.dd-item.perigo:hover{background:var(--neg-bg)}
.dd-sep{height:1px;background:var(--line);margin:4px 0}
.dd-filtros{min-width:250px;padding:12px}
.dd-tit{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-bottom:8px}
.dd-campo{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3);margin-bottom:9px;font-weight:500}
.dd-campo input,.dd-campo select{width:100%}
.dd-par{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dd-par .dd-campo{margin-bottom:9px}
.dd-tit-2{margin-top:2px}
.dd-acoes{display:flex;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.badge-n{background:var(--brand);color:#fff;border-radius:99px;font-size:10.5px;font-weight:600;
  padding:0 5px;min-width:16px;line-height:16px;text-align:center;margin-left:2px}
.barra-selecao{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:10px;
  background:var(--brand-bg);border:1px solid var(--brand);border-radius:var(--r-lg);color:var(--brand-ink)}
.barra-selecao .sel-txt{font-size:13px}
/* cotação no topo */
.cambio-form{display:flex;min-width:0}
.cambio{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px 0 10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;font:inherit;color:var(--ink);
  transition:background .14s,border-color .14s}
.cambio:hover{background:var(--surface-3);border-color:var(--line-2)}
.cambio:active{transform:translateY(.5px)}
.cambio:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cambio-par{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cambio-lbl{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--ink-2);line-height:1}
.cambio-num{font-size:13px;font-weight:600;line-height:1;color:var(--ink)}
.cambio-sep{width:1px;height:20px;background:var(--line-2);flex:none}
.cambio-ic{display:flex;color:var(--ink-3);transition:color .14s}
.cambio-ic svg{width:13px;height:13px}
.cambio:hover .cambio-ic{color:var(--brand)}
.cambio-velho .cambio-ic{color:var(--warn)}
.cambio-buscando{pointer-events:none;opacity:.7}
.cambio-buscando .cambio-ic{color:var(--brand);animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cambio-buscando .cambio-ic{animation:none}}
@media (max-width:1240px){.cambio-brl,.cambio-sep{display:none}}
@media (max-width:1040px){.cambio-par{display:none}.cambio{padding:0 9px;gap:0}}
.cambio-auto{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.tem-nota{cursor:help;border-bottom:1px dotted var(--warn);padding-bottom:1px}
.balao{position:fixed;display:none;z-index:200;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  padding:10px 13px;font-size:12.5px;line-height:1.55;pointer-events:none;text-align:left;font-weight:400;
  /* notas com quebra de linha viram lista legível em vez de parágrafo corrido */
  white-space:pre-line;font-variant-numeric:tabular-nums}
.tem-nota:hover{color:var(--warn)}
.cel-cat{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel-cat a{color:var(--ink-2)}
.cel-cat a:hover{color:var(--brand)}

.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros input,.filtros select{font-size:12.5px;padding:5px 8px}
.filtros select{padding-right:24px}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio-cards label{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line-2);border-radius:var(--r);
  padding:9px 11px;cursor:pointer;margin:0;font-weight:450;background:var(--surface)}
.radio-cards label:has(input:checked){border-color:var(--brand);background:var(--brand-bg);color:var(--brand-ink)}
.radio-cards input{width:auto;margin-top:2px;box-shadow:none}

/* ---------- cards / metrics ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-pad{padding:16px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;min-width:0}
.metric .lbl{font-size:12.5px;color:var(--ink-3);font-weight:500}
.metric .val{font-size:23px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.25}
.metric .foot{font-size:11.5px;color:var(--ink-3);display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.metric.alert{border-color:var(--neg);background:var(--neg-bg)}
.metric.alert .val,.metric.alert .lbl{color:var(--neg)}
a.metric{text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
a.metric:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}
a.metric .lbl{display:flex;align-items:center;gap:5px}
a.metric .lbl::after{content:"›";color:var(--ink-4);font-size:15px;line-height:1}
.pill{background:var(--surface-2);border-radius:4px;padding:1px 5px;font-variant-numeric:tabular-nums;font-size:11.5px}
.v-pos{color:var(--pos)} .v-neg{color:var(--neg)} .v-warn{color:var(--warn)}

/* ---------- table ---------- */
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-bottom:22px;overflow:clip}
.tbl-wrap>form{display:block}
.tbl-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.tbl-head h2{margin:0}
/* composição por categoria: uma barra empilhada e a legenda,
   do mais pesado ao mais leve no mesmo tom da marca */
/* ---------- custo de receber ----------
   Uma equação lida dos dois lados: o dinheiro desce, as perdas saem pelo meio.
   Por isso é um funil vertical e não duas calculadoras lado a lado. */
.funil-card{margin-bottom:22px}
.funil-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:2px;gap:2px;flex:none}
.seg a{padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink-3);
  transition:background .12s,color .12s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.funil{padding-top:18px;max-width:520px}
.funil-lbl{font-size:12.5px;color:var(--ink-3);display:block}
.funil-val{font-size:26px;font-weight:650;letter-spacing:-.02em;display:block;margin:1px 0 2px}
.funil-topo,.funil-base{padding:2px 0}
/* as perdas ficam entre as duas pontas, recuadas, para o olho ver que saem do meio */
.funil-perdas{margin:14px 0;padding:13px 0 13px 15px;border-left:1px solid var(--line-2)}
.funil-barra{display:flex;height:5px;border-radius:99px;overflow:hidden;background:var(--surface-3);
  margin-bottom:11px}
.funil-barra i{min-width:2px}
.p-iof{background:var(--warn)} .p-spr{background:var(--brand)}
.perda{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13px}
.perda .pt{width:8px;height:8px;border-radius:99px;flex:none}
.perda-nome{flex:1;min-width:0;color:var(--ink-2)}
.perda-nome .mini{display:inline}
.perda b{font-variant-numeric:tabular-nums}
.funil-frase{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);max-width:56ch}
.funil-frase b{font-variant-numeric:tabular-nums}
.funil-vazio{display:flex;align-items:flex-start;gap:11px;padding:20px 0 4px;color:var(--ink-3);
  font-size:13px;max-width:56ch}
.funil-vazio svg{width:19px;height:19px;color:var(--ink-4);flex:none;margin-top:1px}
@media (max-width:640px){
  .funil-form{gap:8px}
  .seg{width:100%}
  .seg a{flex:1;text-align:center}
  .campo-moeda{flex:1}
  .funil-val{font-size:23px}
}

/* ---------- simulador de atrito ---------- */
.sim-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.campo-moeda{display:flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:0 10px;height:32px;
  box-shadow:var(--shadow);transition:border-color .12s}
.campo-moeda:focus-within{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:1px}
.campo-moeda span{color:var(--ink-3);font-size:13px;flex:none}
.campo-moeda input{border:0;background:none;box-shadow:none;height:auto;padding:0;width:110px;
  font-variant-numeric:tabular-nums}
.campo-moeda input:focus-visible{outline:none}
.sim-tab td{height:38px}
.sim-tab .mini{line-height:15px}
.sim-forte td{border-top:1px solid var(--line-2)}
.sim-tab tbody tr:hover{background:none}

/* mora nas células vazias da linha de Total, entre o rótulo e o valor */
.comp-cel{padding-top:0;padding-bottom:0;cursor:help}
.comp{display:flex;flex-direction:column;gap:6px;min-width:0}
.comp-bar{display:flex;height:5px;border-radius:99px;overflow:hidden;background:var(--surface-3);
  transition:height .12s}
/* fatia de 3% tem 11px de largura: engrossa no hover para dar onde clicar */
.comp-cel:hover .comp-bar{height:11px}
.comp-bar i{background:var(--brand);min-width:3px;box-shadow:inset -1px 0 0 var(--surface);
  cursor:help;transition:filter .12s}
.comp-bar i:last-child{box-shadow:none}
.comp-bar i:hover{filter:brightness(1.25)}
@media (prefers-reduced-motion:reduce){.comp-bar{transition:none}}
/* hierarquia pelo peso, não pelo cinza: ink-4 em 11,5px não passa o contraste mínimo */
/* item nunca corta no meio: se faltar espaço, quebra para a linha de baixo */
.comp-leg{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:11.5px;color:var(--ink-3);min-width:0}
.comp-item{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap}
.comp-item>i{width:6px;height:6px;border-radius:99px;background:var(--brand);flex:none}
.comp-item b{color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600;flex:none}
.comp-mais{color:var(--ink-4);flex:none}
/* sem as colunas do meio no celular, sobra só o filete sob o rótulo do total */
.comp-bar.comp-mob{display:none}
@media (max-width:640px){
  .comp-bar.comp-mob{display:flex;margin-top:7px}
}
table{width:100%;border-collapse:collapse;table-layout:fixed}
table.auto{table-layout:auto}
.sub-cat{color:var(--ink-3);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-cat a{color:var(--ink-3)}
.sub-cat a:hover{color:var(--brand)}
thead{position:sticky;top:56px;z-index:3}
th{font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:left;padding:8px 14px;
  background:var(--surface-2);white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--line),inset 0 1px 0 var(--line)}
tbody tr:first-child td{border-top:none}
@media (max-width:900px){thead{position:static}}
td{padding:0 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px;
  line-height:20px;height:34px}
tbody tr{height:34px}
th{padding:7px 14px}
tbody td>.mini{line-height:16px;margin:0;display:block}
td .nm{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle;line-height:20px}
.nm-wrap{display:flex;align-items:center;gap:6px;min-width:0;height:20px;justify-content:flex-start}
.nm-wrap .nm{flex:0 1 auto;min-width:0}
.nm-wrap .tag,.nm-wrap .ic-rec{flex:none}
td .tag{line-height:16px;height:18px;padding:0 7px;vertical-align:middle}
td .ic-rec{line-height:20px;vertical-align:middle}
td .btn{vertical-align:middle}
.tbl-wrap table.compacta tbody tr{height:auto}
tbody tr:last-child td{border-bottom:none}
tfoot td{border-top:2px solid var(--line-2);border-bottom:none;background:var(--surface-2);
  height:46px;font-variant-numeric:tabular-nums}
tfoot tr:hover td{background:var(--surface-2)}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
tbody tr[data-href]{cursor:pointer}
td .tag{margin-left:5px}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.metric .val,.r,.num,input[type=number]{font-variant-numeric:tabular-nums}
.r{text-align:right;font-variant-numeric:tabular-nums}
.c{text-align:center}
th.c,td.c{text-align:center}
td.acts{text-align:center}
td.acts .btn,td.acts form{margin:0 auto}
th.acts-h{text-align:center}
tr.done td{color:var(--ink-3)}
tr.done .nm{text-decoration:none}
.nm{font-weight:500;color:var(--ink)}
.nm:hover{color:var(--brand)}
td.acts{text-align:right;white-space:nowrap;width:1%}
.tbl-foot{padding:8px 14px;background:var(--surface-2);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;font-size:12.5px;gap:10px;flex-wrap:wrap}
.foot-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.checkbox{width:14px;height:14px;box-shadow:none;padding:0;cursor:pointer}

/* ---------- badges ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:1px 6px;
  border-radius:99px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap;
  vertical-align:1px;line-height:1.5}
.nm{display:inline}
td .nm+.tag{margin-left:6px}
.ic-rec{display:inline-block;color:var(--ink-4);font-size:12px;margin-left:5px;cursor:help}
.tag-pendente{background:var(--warn-bg);color:var(--warn)}
.tag-pago{background:var(--pos-bg);color:var(--pos)}
.tag-cancelado{background:var(--surface-3);color:var(--ink-3)}
.tag-atraso{background:var(--neg-bg);color:var(--neg);font-weight:600}
.tag-klarna{background:#fce8f1;color:#9d2f63}
@media (prefers-color-scheme:dark){.tag-klarna{background:#331526;color:#f2a2c6}}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- progress ---------- */
.bar{height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden;min-width:74px}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .3s cubic-bezier(.2,.8,.3,1)}
.bar i.pos{background:var(--pos)}
.bar-lbl{font-size:11.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap}
/* linhas com barra de progresso empilham nome, barra e legenda: precisam de ar */
.prog tbody tr{height:auto}
.prog td{padding-top:6px;padding-bottom:6px}
.serie-check{display:flex;gap:9px;align-items:baseline;margin-top:16px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  font-size:13px;cursor:pointer;max-width:560px}
.serie-check input{accent-color:var(--brand);translate:0 1px}
.serie-check .hint-inline{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
/* a barra informa proporção, não precisa atravessar o card inteiro */
.prog .bar{max-width:300px}
/* parcelamentos: colunas de verdade, alinhadas entre as linhas.
   nome 176px, barra flexível, legenda 176px; toda barra começa e termina no mesmo x.
   o breakpoint é a largura do CARD (container query), não a do viewport, porque o
   painel alterna entre uma e duas colunas e o card muda de tamanho sozinho. */
.tbl-wrap:has(>table.prog){container-type:inline-size}
.parc{display:grid;grid-template-columns:176px minmax(90px,1fr) 176px;gap:4px 16px;align-items:center}
.parc-nome{display:flex;align-items:center;gap:8px;min-width:0}
.parc-nome .nm{flex:0 1 auto;min-width:0}
.parc .tag{margin-left:0;flex:0 0 auto}
.parc .bar{height:7px;max-width:none;margin:0}
.parc .bar-lbl{margin:0;font-variant-numeric:tabular-nums}
@container (max-width:640px){
  .parc{grid-template-columns:minmax(90px,1fr) minmax(160px,max-content);gap:4px 12px}
  .parc-nome{grid-column:1/-1}
  .parc .bar-lbl{justify-self:end}
}

/* ---------- ciclos ---------- */
.ciclo-tot{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.val-lg{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
.tbl-wrap.destaque{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg),var(--shadow)}
.tag-atual{background:var(--brand-bg);color:var(--brand-ink);font-weight:600}
.chip-ciclo{display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);transition:all .12s;box-shadow:var(--shadow);
  white-space:nowrap}
.chip-ciclo:hover{border-color:var(--ink-4);color:var(--ink)}
.chip-ciclo.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}
.chip-ciclo svg{width:13px;height:13px}
.chip-ciclo.on .badge-n{background:rgba(255,255,255,.28)}
.chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chips-sep{width:1px;height:18px;background:var(--line-2);margin:0 3px;flex:none}
@media (max-width:640px){.chips-sep{display:none}}

/* ---------- planejamento chart ---------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:14px;border-bottom:1px solid var(--line)}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;min-width:0}
.chart .bar-v{width:100%;max-width:38px;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;
  transition:height .3s cubic-bezier(.2,.8,.3,1);position:relative}
.chart .bar-v.past{background:var(--surface-3)}
.chart .cap{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.chart .cap b{display:block;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.bar i.warn{background:var(--warn)} .bar i.neg{background:var(--neg)}


/* ---------- toasts ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column-reverse;
  gap:10px;pointer-events:none;max-width:min(440px,calc(100vw - 40px))}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;
  padding:11px 12px 11px 14px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);font-size:13px;color:var(--ink);
  animation:toast-entra .24s cubic-bezier(.16,1,.3,1) both}
.toast-ic{display:flex;color:var(--pos);flex:none}
.toast-ic svg{width:16px;height:16px}
.toast-txt{line-height:1.45;min-width:0}
.toast-acts{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.toast-x{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background .12s,color .12s}
.toast-x:hover{background:var(--surface-2);color:var(--ink)}
.toast-x svg{width:13px;height:13px}
.toast-barra{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brand);opacity:.7;
  transform-origin:left;animation:toast-drena var(--vida,3s) linear forwards}
.toast:hover .toast-barra,.toast:focus-within .toast-barra{animation-play-state:paused}
.toast-saindo{animation:toast-sai .18s ease-in both}
@keyframes toast-entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-sai{to{opacity:0;transform:translateY(6px)}}
@keyframes toast-drena{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .toast{animation:toast-aparece .12s linear both}
  .toast-saindo{animation:toast-sai .12s linear both}
  @keyframes toast-aparece{from{opacity:0}to{opacity:1}}
}
@media (max-width:640px){.toasts{left:16px;right:16px;bottom:16px;max-width:none}}

/* ---------- misc ---------- */
.erro-form{background:var(--neg-bg);color:var(--neg);border:1px solid var(--neg);border-radius:var(--r);
  padding:9px 13px;font-size:13px;text-align:left}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:5px;font-size:14px}
.empty svg{width:26px;height:26px;color:var(--ink-4);margin-bottom:10px}
.seg-mes{display:flex;align-items:center;gap:2px}
.seg-mes .btn{padding:5px 7px}
.list-def{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:13.5px;align-items:baseline}
.list-def dt{color:var(--ink-3);font-size:12.5px}
.list-def dd{font-weight:500;font-variant-numeric:tabular-nums}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
/* sem isto a coluna do grid cresce até o conteúdo e o overflow-x da tabela não segura */
.split>*{min-width:0}
.rule-card{padding:15px 17px;border-bottom:1px solid var(--line)}
.rule-card:last-child{border-bottom:none}
.rule-card ol,.rule-card ul{margin:8px 0 0 17px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
pre{background:var(--surface-3);padding:11px;border-radius:var(--r);overflow-x:auto;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login .box{width:100%;max-width:330px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:26px;box-shadow:var(--shadow-md)}
.login .logo{justify-content:center;margin-bottom:6px}
.login p{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:18px}
.login input{width:100%;margin-bottom:10px;padding:8px 11px}
.login .btn{width:100%;justify-content:center;padding:8px}

/* ---------- responsive ---------- */
/* Colunas de tabela por prioridade. A classe vai no <col>, no <th> e em todos os <td>
   da coluna: esconder só as células desalinha o colgroup e as colunas se sobrepõem.
   Ordem em que somem conforme a tela encolhe: col-opt, col-tab, col-cel.
   O identificador e o valor na moeda âncora nunca recebem classe, sempre ficam. */
@media (max-width:1240px){
  .split{grid-template-columns:1fr}
  .col-opt{display:none}
}
@media (max-width:900px){
  .col-tab{display:none}
  /* larguras do colgroup viram preferência, não imposição */
  .tbl-wrap table{table-layout:auto}
  /* rede de segurança: se ainda não couber, rola em vez de colidir */
  .tbl-wrap{overflow-x:auto}
}
@media (max-width:640px){
  .col-cel{display:none}
  th,td{padding-left:11px;padding-right:11px}
  /* com table-layout:auto um nome longo esticaria a tabela inteira */
  td .nm,.sub-cat{max-width:30vw}
  /* dois botões lado a lado dobram a largura da coluna, então empilham */
  td.acts{white-space:normal}
  td.acts form{display:block}
  /* e o rótulo do botão quebra em vez de fixar a largura da coluna */
  td.acts .btn{width:100%;margin:3px 0;white-space:normal;height:auto;min-height:30px;
    padding:5px 8px;line-height:1.25}
  td select{max-width:32vw}
}
@media (max-width:420px){
  th,td{padding-left:8px;padding-right:8px}
}
/* com muitas colunas os rótulos do gráfico se sobrepõem, então mostra um sim outro não */
@media (max-width:640px){
  .chart:has(.col:nth-child(9)) .col:nth-child(even) .cap:last-child{visibility:hidden}
}
/* ---------- celular ----------
   No telefone a barra lateral sai inteira: vira um topo curto com o âmbito e uma
   barra de abas fixa embaixo, no alcance do polegar. O que não cabe nas 4 abas
   entra na folha "Mais". Alturas respeitam a safe area do iPhone. */
.mob-top,.tabbar{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side,.top{display:none}
  .mob-top{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;
    background:var(--surface);border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:30}
  .mob-logo{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;
    letter-spacing:-.01em;flex:none}
  .switch-mob{flex:1;min-width:0;max-width:200px;margin-left:auto}
  .switch-mob a{padding:6px 4px;font-size:12px}
  .mob-novo{width:38px;height:38px;padding:0;flex:none}
  .mob-novo svg{width:18px;height:18px}
  .wrap{padding:14px 14px calc(80px + env(safe-area-inset-bottom))}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar>a,.mais{flex:1 1 0;min-width:0;display:flex}
  .tabbar>a,.mais>summary{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;height:58px;padding:0 2px;cursor:pointer;list-style:none;
    color:var(--ink-3);font-size:10px;font-weight:500;position:relative;
    transition:color .12s}
  .mais>summary::-webkit-details-marker{display:none}
  .tabbar svg{width:21px;height:21px}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar>a.on,.mais[open]>summary{color:var(--brand)}
  .tabbar>a:active,.mais>summary:active{background:var(--surface-2)}
  .pt-alerta{position:absolute;top:9px;left:calc(50% + 7px);width:7px;height:7px;
    border-radius:99px;background:var(--neg)}

  .mais-menu{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.16);
    padding:10px 10px 12px;max-height:66vh;overflow-y:auto;
    animation:sobe .2s cubic-bezier(.16,1,.3,1) both}
  @keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .mais-menu .nav{padding:0}
  .mais-menu .nav a{font-size:14px;padding:11px 10px;min-height:44px}
  .mais-busca{display:flex;align-items:center;gap:8px;background:var(--surface-2);
    border:1px solid var(--line);border-radius:var(--r);padding:0 10px;margin-bottom:8px}
  .mais-busca svg{color:var(--ink-4);flex:none}
  .mais-busca input{flex:1;border:0;background:none;box-shadow:none;height:40px;padding:0}
  .mais-sep{height:1px;background:var(--line);margin:8px 0}
  .mais-cambio{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
  .mais-cambio .mini{display:block}

  .toasts{bottom:calc(70px + env(safe-area-inset-bottom))}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .btn{height:38px}
  .btn-sm{height:32px}
  .checkbox{width:18px;height:18px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
  .metric{padding:12px 13px}
  .metric .val{font-size:20px}
  .head h1{font-size:19px}
  .chart{height:120px;padding:10px}
  .filtros{gap:6px}
  .filtros input,.filtros select{flex:1;min-width:110px}
  /* preset, busca e filtro cabem numa linha só em vez de três,
     e o resumo quebra para a linha de baixo */
  .barra-lista{gap:6px}
  .campo-busca{flex:1 1 auto;min-width:0}
  .campo-busca input{min-width:0}
  .resumo-filtro{width:100%;margin-left:0;white-space:normal}
  /* alvo de toque confortável nas linhas e controles */
  tbody tr{height:40px}
  td{height:40px}
  input,select,textarea{height:38px;font-size:16px}  /* 16px evita o zoom do iOS */
}
@media (max-width:420px){
  .switch a{font-size:11.5px;padding:5px 4px}
  .mob-nome{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}