/* ==========================================================================
   NOVACARTERA — Sistema de Design "Esmeralda"
   Identidade verde-esmeralda, tipografia com caráter (Space Grotesk + Plus Jakarta Sans),
   dinheiro tabular. Uma cor de marca só; verde é marca, não é "bom".
   Decisões do dono em 2026-09-04, olhando as peças uma a uma:
     · botão principal CHAPADO — sem degradê e sem brilho colorido (enfeite compete com o dado)
     · VERMELHO CHEIO reservado ao que não tem volta (revogar aparelho, desativar, apagar)
     · o chip CRESCE no dedo (48px) e fica igual no mouse (34px)
     · UMA CAIXA SÓ: canto de 12, sem sombra, painel e app
   O gradiente continua vivo só no cartão herói e no topo do app (não são botões).
   ========================================================================== */

:root{
  /* superfícies e texto */
  --bg:#F4F7F5; --surface:#FFFFFF; --surface-2:#EDF2EF; --surface-3:#E4EBE7;
  --text:#0B1512; --text-soft:#54635C; --text-3:#8B968F;
  /* marca — esmeralda + gradiente herói */
  --primary:#0E9F6E; --primary-strong:#0B7F58; --on-primary:#FFFFFF; --primary-wash:#E4F5EC;
  --grad-hero:linear-gradient(135deg,#0FA972 0%,#0AA0A0 100%);
  --grad-hero-soft:linear-gradient(135deg,#0E9F6E 0%,#12B981 100%);
  /* semânticas */
  --success:#12A150; --success-chip:#E4F5EC;
  --warning:#B25E09; --warning-accent:#D97706; --warning-chip:#FCEFDA;
  --danger:#D7263D; --danger-chip:#FCE6E9;
  /* estrutura + profundidade */
  --border:#E6ECE9; --border-strong:#CFD9D4;
  --scrim:rgba(9,20,15,.44);
  --inverse-surface:#0B1512; --on-inverse:#F4F7F5;
  --e1:0 1px 2px rgba(12,40,30,.05), 0 4px 14px rgba(12,40,30,.05);
  --e2:0 14px 38px rgba(12,40,30,.16);
  --glow:0 10px 24px rgba(14,159,110,.30);
  --focus:var(--primary);
  /* uma caixa so: canto de 12 no painel e no app (decisao do dono, 04/09) */
  --r-card:12px; --r-btn:14px; --r-pill:999px; --r-sheet:26px;
  --font-display:"Space Grotesk","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0F0D; --surface:#121A16; --surface-2:#1A231E; --surface-3:#222D28;
    --text:#EAF1ED; --text-soft:#93A29B; --text-3:#65706A;
    --primary:#34D399; --primary-strong:#10B981; --on-primary:#04231A; --primary-wash:rgba(52,211,153,.15);
    --grad-hero:linear-gradient(135deg,#0FA972 0%,#0AA0A0 100%);
    --grad-hero-soft:linear-gradient(135deg,#0E9F6E 0%,#12B981 100%);
    --success:#3DD68C; --success-chip:rgba(61,214,140,.15);
    --warning:#E7A44A; --warning-accent:#E7A44A; --warning-chip:rgba(231,164,74,.15);
    --danger:#F0616B; --danger-chip:rgba(240,97,107,.15);
    --border:#242E29; --border-strong:#33413B;
    --scrim:rgba(0,0,0,.6);
    --inverse-surface:#EAF1ED; --on-inverse:#0B1512;
    --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 16px 40px rgba(0,0,0,.6);
    --glow:0 10px 26px rgba(16,185,129,.26);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0F0D; --surface:#121A16; --surface-2:#1A231E; --surface-3:#222D28;
  --text:#EAF1ED; --text-soft:#93A29B; --text-3:#65706A;
  --primary:#34D399; --primary-strong:#10B981; --on-primary:#04231A; --primary-wash:rgba(52,211,153,.15);
  --grad-hero:linear-gradient(135deg,#0FA972 0%,#0AA0A0 100%);
  --grad-hero-soft:linear-gradient(135deg,#0E9F6E 0%,#12B981 100%);
  --success:#3DD68C; --success-chip:rgba(61,214,140,.15);
  --warning:#E7A44A; --warning-accent:#E7A44A; --warning-chip:rgba(231,164,74,.15);
  --danger:#F0616B; --danger-chip:rgba(240,97,107,.15);
  --border:#242E29; --border-strong:#33413B;
  --scrim:rgba(0,0,0,.6);
  --inverse-surface:#EAF1ED; --on-inverse:#0B1512;
  --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 16px 40px rgba(0,0,0,.6);
  --glow:0 10px 26px rgba(16,185,129,.26);
  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
svg{display:block}
.icon{width:20px; height:20px; stroke:currentColor; stroke-width:1.75; fill:none;
      stroke-linecap:round; stroke-linejoin:round; flex:none}
.icon-sm{width:16px; height:16px}
.icon-lg{width:24px; height:24px}

/* ---------- tipografia ---------- */
.overline{font-family:var(--font-body); font-size:11.5px; line-height:16px; font-weight:600;
          letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft)}
.caption{font-size:12.5px; line-height:17px; color:var(--text-soft)}
.label{font-size:13.5px; line-height:18px; font-weight:600}
.title-item{font-size:16px; line-height:22px; font-weight:600; letter-spacing:-.01em}
.title-sec{font-family:var(--font-display); font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em}
.title-screen{font-family:var(--font-display); font-size:22px; line-height:28px; font-weight:700; letter-spacing:-.02em}
.body-soft{color:var(--text-soft)}
/* dinheiro — display font, tabular, o coração do sistema */
.money{font-family:var(--font-display); font-variant-numeric:tabular-nums;
       font-feature-settings:"tnum" 1; letter-spacing:-.01em; font-weight:600}
.num-list{font-size:16px; line-height:22px}
.num-kpi{font-size:30px; line-height:36px; font-weight:700}
.num-hero{font-size:38px; line-height:44px; font-weight:700; letter-spacing:-.02em}
.neg{color:var(--danger)}
.pos{color:var(--success)}

/* ---------- superfícies ---------- */
/* A CAIXA — uma so. Sombra e canto grande pesam numa tela de trabalho cheia de numero;
   a sombra fica reservada para a folha que sobe de baixo. `.panel` e o mesmo nome que o
   painel do dono ja usava: subiu para ca para as duas metades pararem de divergir. */
.card, .panel{background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-card); padding:18px}
.card-sombra{box-shadow:var(--e1)}
.card-flat{box-shadow:none}
.card-2{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-card)}
.well{background:var(--surface-2); border-radius:12px}
.divider{height:1px; background:var(--border); border:0}

/* cartão herói (gradiente) — o momento premium (saldo, próximo cliente) */
.hero{position:relative; overflow:hidden; border-radius:20px; padding:20px;
      background:var(--grad-hero); color:#fff; box-shadow:0 16px 34px rgba(11,120,88,.34)}
.hero::after{content:""; position:absolute; right:-40px; top:-60px; width:190px; height:190px;
      border-radius:50%; background:rgba(255,255,255,.10)}
.hero::before{content:""; position:absolute; right:20px; top:30px; width:130px; height:130px;
      border-radius:50%; border:1px solid rgba(255,255,255,.16)}
.hero *{position:relative; z-index:1}
.hero .overline{color:rgba(255,255,255,.82)}
.hero .money{color:#fff}

/* ---------- chips / status ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px;
      border-radius:var(--r-pill); font-size:13.5px; font-weight:600; background:var(--surface-2);
      color:var(--text-soft); border:1px solid transparent; white-space:nowrap; cursor:pointer;
      transition:background .14s, color .14s}
.chip.sel{background:var(--primary-wash); color:var(--primary-strong)}
/* NO DEDO o chip cresce para 48px (minimo do Android e da norma de acessibilidade); no mouse
   fica em 34, que e o que mantem a densidade do painel. Decisao do dono, pensando no dia em
   que o painel virar app de administrador. `pointer:coarse` = quem aponta com o dedo. */
@media (pointer:coarse){
  .chip{height:48px; padding:0 20px; font-size:15px}
  .chip + .chip{margin-left:2px}
}
:root[data-theme="dark"] .chip.sel, @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.sel{color:var(--primary)}}
.statuschip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
      border-radius:var(--r-pill); font-size:12px; font-weight:600}
.st-ok{background:var(--success-chip); color:var(--success)}
.st-warn{background:var(--warning-chip); color:var(--warning-accent)}
.st-danger{background:var(--danger-chip); color:var(--danger)}
.st-neutral{background:var(--surface-2); color:var(--text-soft)}
.st-dot{width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- campos ---------- */
/* Estava escrito dentro do app do cobrador: o painel nao alcancava e desenhava o dele a mao,
   com outra altura, outro canto e SEM anel de foco. Um desenho so, duas alturas. */
.input{width:100%; height:48px; border-radius:12px; border:1px solid var(--border-strong);
       background:var(--surface); color:var(--text); padding:0 14px;
       font-family:var(--font-body); font-size:15px}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-wash)}
.input[disabled]{background:var(--surface-2); color:var(--text-3); cursor:not-allowed}
textarea.input{height:auto; padding:12px 14px; resize:none}
/* a variacao do painel: mesma familia, mais baixa, porque la a tela e densa e tem mouse */
.input-sm{height:36px; border-radius:9px; padding:0 10px; font-size:14px; width:auto}
select.input, select.input-sm{appearance:auto}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     height:46px; padding:0 20px; border-radius:var(--r-btn); font-size:15px; font-weight:700;
     letter-spacing:-.01em; transition:transform .1s, box-shadow .16s, background .14s}
.btn:active{transform:translateY(1px) scale(.995)}
/* CHAPADO. O degrade com brilho verde era o momento "fintech premium"; numa tela cheia de
   numero ele competia com o dado. Uma cor, sem sombra colorida — o verde continua mandando. */
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-strong)}
.btn-secondary{background:var(--surface-2); color:var(--primary-strong)}
:root[data-theme="dark"] .btn-secondary, @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-secondary{color:var(--primary)}}
.btn-secondary:hover{background:var(--surface-3)}
.btn-ghost{background:transparent; color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}
/* VERMELHO CHEIO, e so para o que NAO TEM VOLTA: revogar aparelho, desativar usuario,
   apagar. Antes era vermelho clarinho com letra vermelha — tinha cara de etiqueta, nao de
   botao, e revogar um aparelho tira a rota inteira do cobrador. */
.btn-danger{background:var(--danger); color:#fff}
.btn-danger:hover{filter:brightness(.94)}
/* para recusar, cancelar e afins — aviso sem peso de destruicao */
.btn-danger-suave{background:var(--danger-chip); color:var(--danger)}
.btn-danger-suave:hover{filter:brightness(.97)}
.btn-lg{height:56px; font-size:16.5px; width:100%; border-radius:16px}
.btn-block{width:100%}
.btn:focus-visible, .chip:focus-visible, a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-wash), 0 0 0 1px var(--primary)}
/* DESLIGADO — nao existia: um botao que nao pode ser usado tinha a mesma cara de um que pode,
   e quem clicava e nao via nada acontecer achava que era defeito. */
.btn[disabled], .btn[aria-disabled="true"]{background:var(--surface-2); color:var(--text-3);
      box-shadow:none; cursor:not-allowed; pointer-events:none; transform:none}
/* TRABALHANDO — o CSV de um mes inteiro demora; sem isto o dono clica de novo e baixa duas vezes. */
.btn .spin{width:15px; height:15px; border-radius:50%; border:2px solid currentColor;
      border-top-color:transparent; display:inline-block; flex:none}
@media (prefers-reduced-motion:no-preference){ .btn .spin{animation:nc-gira .7s linear infinite} }
@keyframes nc-gira{ to{ transform:rotate(360deg) } }

/* ---------- segmented + day chips ---------- */
.segmented{display:inline-flex; background:var(--surface-2); border-radius:12px; padding:4px; gap:3px}
.segmented button{height:36px; padding:0 15px; border-radius:9px; font-size:14px; font-weight:600;
                  color:var(--text-soft); transition:.14s}
.segmented button.sel{background:var(--surface); color:var(--text); box-shadow:var(--e1)}
.daychips{display:flex; gap:7px}
.daychips button{width:38px; height:38px; border-radius:11px; font-size:13px; font-weight:600;
                 background:var(--surface-2); color:var(--text-soft)}
.daychips button.sel{background:var(--primary); color:var(--on-primary)}

/* ---------- barra de parcelas ---------- */
.installment{display:flex; gap:3px; margin-top:2px}
.installment i{flex:1; height:7px; border-radius:3px; background:var(--surface-3)}
.installment i.pago{background:var(--primary)}
.installment i.hoje{background:var(--warning-accent)}
.installment i.mora{background:var(--danger)}
.hero .installment i{background:rgba(255,255,255,.28)}
.hero .installment i.pago{background:#fff}

/* ---------- sparkline ---------- */
.spark{height:28px; width:100%}
.spark path{fill:none; stroke:var(--primary); stroke-width:2}

/* ---------- avatar ---------- */
.avatar{width:44px; height:44px; border-radius:13px; flex:none; display:flex; align-items:center;
        justify-content:center; background:var(--surface-2); color:var(--primary-strong);
        font-family:var(--font-display); font-weight:700; font-size:15px}
:root[data-theme="dark"] .avatar, @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .avatar{color:var(--primary)}}

/* ---------- utilidades ---------- */
.row{display:flex; align-items:center}
.row.between{justify-content:space-between}
.row.gap{gap:12px}
.stack{display:flex; flex-direction:column}
.grow{flex:1; min-width:0}
.right{margin-left:auto}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.hidden{display:none!important}