/* ============================================================
   Finanças ILNET — cockpit de cobrança
   Identidade: navy profundo + royal + celeste (fibra óptica).
   Dinheiro sempre em mono tabular. Assinaturas: pulso de fibra
   no menu, régua de atraso com glow, resumo-recibo com barcode.
   ============================================================ */
:root{
  --papel:#EEF2F9;
  --superficie:#FFFFFF;
  --superficie-2:#F7F9FD;
  --tinta:#0B1B33;
  --tinta-2:#57678A;
  --linha:#DCE3F1;
  --linha-forte:#C4D0E6;
  --royal:#1D4ED8;
  --royal-2:#3B82F6;
  --royal-escuro:#1638A8;
  --royal-suave:#EAF0FE;
  --celeste:#38B6E6;
  --celeste-claro:#E3F4FC;
  --pago:#0E8A55;   --pago-suave:#E1F5EC;
  --ambar:#C2610C;  --ambar-suave:#FCF0E1;
  --critico:#C42834;--critico-suave:#FCE9EA;
  --ok-30:#2F9E63; --ok-60:#D9A21B;
  --grad-royal:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 100%);
  --grad-navy:linear-gradient(180deg,#0C1E3C 0%,#0A1830 100%);
  --f-display:'Space Grotesk','Instrument Sans',sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --sombra-1:0 1px 2px rgba(11,27,51,.06);
  --sombra-2:0 8px 24px -6px rgba(11,27,51,.14);
  --sombra-royal:0 6px 16px -5px rgba(29,78,216,.55);
  --raio:12px;
  --transicao:.18s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0}
::selection{background:rgba(29,78,216,.18)}
body{
  font-family:var(--f-body);background:var(--papel);color:var(--tinta);
  font-size:14.5px;line-height:1.45;
  background-image:radial-gradient(rgba(11,27,51,.035) 1px,transparent 1px);
  background-size:22px 22px;
}
h1,h2,h3,.marca,.login-marca{font-family:var(--f-display)}
.oculto{display:none!important}
button{font:inherit;cursor:pointer}
small{color:var(--tinta-2)}

/* Campos */
input,select,textarea{
  font:inherit;padding:9px 12px;border:1px solid var(--linha-forte);border-radius:10px;
  background:#FDFDFF;color:var(--tinta);width:100%;
  transition:border-color var(--transicao),box-shadow var(--transicao),background var(--transicao);
}
input:hover,select:hover,textarea:hover{border-color:#A9BAD8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(29,78,216,.14);background:#fff}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--critico)}
input[aria-invalid=true]:focus,select[aria-invalid=true]:focus{border-color:var(--critico);box-shadow:0 0 0 3px rgba(196,40,52,.16)}
button:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:8px}
select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357678A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
input[type=checkbox]{accent-color:var(--royal);width:15px;height:15px}
label{display:block;margin:10px 0;font-weight:500;font-size:13px;color:var(--tinta-2)}
label input,label select,label textarea{margin-top:5px}

/* Barra de rolagem */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9D5EA;border-radius:99px;border:2px solid var(--papel)}
::-webkit-scrollbar-thumb:hover{background:#A9BAD8}

/* ============ LOGIN — o momento orquestrado ============ */
.tela-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 640px at 78% -12%,#17356E 0%,#0B1B33 52%,#060F20 100%);
}
/* feixes de luz — dados percorrendo a fibra */
.tela-login::before,.tela-login::after{
  content:'';position:absolute;left:-25%;width:150%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 28%,rgba(56,182,230,.85) 50%,transparent 72%);
  filter:drop-shadow(0 0 6px rgba(56,182,230,.9));
  transform:rotate(-26deg);
}
.tela-login::before{top:34%;animation:fibra 6.5s linear infinite}
.tela-login::after{
  top:66%;height:1.5px;
  background:linear-gradient(90deg,transparent 30%,rgba(96,140,250,.7) 50%,transparent 70%);
  filter:drop-shadow(0 0 5px rgba(59,130,246,.8));
  animation:fibra 8.5s linear 2.2s infinite;
}
@keyframes fibra{
  0%{transform:rotate(-26deg) translateX(-42%);opacity:0}
  12%{opacity:1} 82%{opacity:1}
  100%{transform:rotate(-26deg) translateX(42%);opacity:0}
}
.login-card{
  position:relative;z-index:1;background:var(--superficie);padding:38px 34px 32px;border-radius:18px;
  width:min(390px,92vw);box-shadow:0 30px 80px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  animation:card-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.97)}}
.login-logo{display:block;width:52px;height:52px;margin-bottom:14px;border-radius:14px;
  filter:drop-shadow(0 6px 18px rgba(56,182,230,.35))}
.login-marca,.marca{font-weight:700;font-size:21px;letter-spacing:.05em}
.login-marca span,.marca span{color:var(--celeste);margin-left:2px}
.login-sub{color:var(--tinta-2);margin:4px 0 18px;font-size:13.5px}
.erro{color:var(--critico);margin-top:10px;min-height:18px;font-size:13px}

/* ============ CASCA DO APP ============ */
#app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.menu{
  background:var(--grad-navy);color:#E8EFFB;display:flex;flex-direction:column;
  padding:24px 14px 18px;position:sticky;top:0;height:100vh;
}
/* pulso de fibra: luz que sobe pela borda do menu */
.menu{border-right:1px solid rgba(56,182,230,.12);position:sticky}
.menu::after{
  content:'';position:absolute;top:0;right:-1px;width:2px;height:100%;pointer-events:none;
  background:linear-gradient(180deg,transparent 32%,rgba(56,182,230,.95) 50%,transparent 68%);
  background-size:100% 300%;filter:drop-shadow(0 0 6px rgba(56,182,230,.75));
  animation:pulso-fibra 5.5s linear infinite;
}
@keyframes pulso-fibra{from{background-position:0 130%}to{background-position:0 -130%}}
.menu .marca{color:#fff;margin-bottom:28px;padding-left:8px;display:flex;align-items:center;gap:10px;font-size:17px}
.menu .marca img{width:30px;height:30px;border-radius:8px;box-shadow:0 0 14px rgba(56,182,230,.35)}
.menu nav{display:flex;flex-direction:column;gap:3px}
.menu nav button{
  display:flex;align-items:center;gap:11px;background:none;border:0;color:#9FB1D4;text-align:left;
  padding:10px 12px;border-radius:10px;font-weight:500;font-size:13.5px;
  transition:background var(--transicao),color var(--transicao),transform var(--transicao);
}
.menu nav button::before{
  content:'';width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat;
}
.menu nav button[data-view="dashboard"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E")}
.menu nav button[data-view="devedores"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3.2 20c.6-3.2 3-5 5.8-5s5.2 1.8 5.8 5'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.5'/%3E%3Cpath d='M16.5 15.2c2.5.1 4 1.6 4.4 4'/%3E%3C/svg%3E")}
.menu nav button[data-view="cobrancas"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E")}
.menu nav button[data-view="promessas"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 3v4M16 3v4m-7.5 8 2.2 2.2L15 13'/%3E%3C/svg%3E")}
.menu nav button[data-view="ranking"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8m-4-4v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M7 6H4v1a4 4 0 0 0 3.5 4M17 6h3v1a4 4 0 0 1-3.5 4'/%3E%3C/svg%3E")}
.menu nav button[data-view="config"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9m5 0h2M4 17h5m5 0h6M4 12h13'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='12' cy='17' r='2.2'/%3E%3Ccircle cx='20' cy='12' r='2.2'/%3E%3C/svg%3E")}
.menu nav button:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.menu nav button.ativo{background:var(--grad-royal);color:#fff;box-shadow:var(--sombra-royal);transform:none}
.menu nav button .badge{margin-left:auto}
.menu-user{margin-top:auto;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:8px}
.menu-user small{display:block;color:#7C90B8;text-transform:capitalize;font-size:11.5px}
.btn-link{background:none;border:0;color:#8AD3F2;text-decoration:underline;text-underline-offset:3px;padding:0;transition:color var(--transicao)}
.btn-link:hover{color:#B9E7FA}
/* min-width:0: coluna de grid cresce até a tabela mais larga e a página rolava
   de lado; assim a tabela rola dentro da própria moldura (.tabela-wrap). */
main{padding:30px 36px 48px;max-width:1220px;width:100%;min-width:0}

/* Cabeçalho de view */
.view-cab{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.view-cab h1{font-size:25px;font-weight:700;letter-spacing:-.015em}
.view-cab h1 small{font-size:13.5px;font-weight:500;font-family:var(--f-body)}
.cab-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cab-acoes input{width:auto}
.view-cab select{width:auto}

/* ============ BOTÕES ============ */
.btn{
  background:#fff;border:1px solid var(--linha-forte);border-radius:10px;padding:8px 15px;
  font-weight:600;font-size:13.5px;color:var(--tinta);box-shadow:var(--sombra-1);
  transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao),background var(--transicao);
}
.btn:hover{border-color:#A9BAD8;transform:translateY(-1px);box-shadow:0 4px 10px -2px rgba(11,27,51,.15)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:var(--sombra-1)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-primario{
  position:relative;overflow:hidden;background:var(--grad-royal);border-color:transparent;color:#fff;
  box-shadow:var(--sombra-royal);
}
.btn-primario::after{ /* brilho que varre no hover */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn-primario:hover{border-color:transparent;box-shadow:0 10px 22px -6px rgba(29,78,216,.65);transform:translateY(-1px)}
.btn-primario:hover::after{transform:translateX(120%)}
.btn-perigo{background:linear-gradient(135deg,#C42834,#E04450);border-color:transparent;color:#fff;box-shadow:0 6px 16px -5px rgba(196,40,52,.5)}
.btn-cheio{width:100%;margin-top:14px;padding:12px}
.btn-mini{padding:5px 11px;font-size:12.5px;border-radius:8px}

/* ============ CARDS E KPIs ============ */
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:20px;box-shadow:var(--sombra-1)}
.card h3{font-size:12.5px;font-weight:600;color:var(--tinta-2);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  position:relative;overflow:hidden;background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio);padding:16px 18px 14px;box-shadow:var(--sombra-1);
  transition:transform var(--transicao),box-shadow var(--transicao);
  animation:subir-kpi .5s cubic-bezier(.16,1,.3,1) both;
}
.kpis .kpi:nth-child(1){animation-delay:.02s}.kpis .kpi:nth-child(2){animation-delay:.06s}
.kpis .kpi:nth-child(3){animation-delay:.1s}.kpis .kpi:nth-child(4){animation-delay:.14s}
.kpis .kpi:nth-child(5){animation-delay:.18s}.kpis .kpi:nth-child(6){animation-delay:.22s}
@keyframes subir-kpi{from{opacity:0;transform:translateY(10px)}}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-royal)}
.kpi.k-vencido::before{background:linear-gradient(90deg,#C42834,#E5636D)}
.kpi.k-aberto::before{background:linear-gradient(90deg,#C2610C,#E8933C)}
.kpi.k-fila::before{background:linear-gradient(90deg,#1487BE,#38B6E6)}
.kpi b{display:block;font-family:var(--f-mono);font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.2}
.kpi.k-vencido b{color:var(--critico)}
.kpi small{font-size:11.5px;letter-spacing:.01em}
.graficos{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:14px}

/* ============ TABELAS ============ */
.tabela-wrap{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);overflow:auto;box-shadow:var(--sombra-1)}
table{width:100%;border-collapse:collapse}
th{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-2);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--linha);background:var(--superficie-2);
  position:sticky;top:0;z-index:1;
}
td{padding:11px 14px;border-bottom:1px solid var(--linha);vertical-align:middle;transition:background .12s ease}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#F4F7FD}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{font-family:var(--f-mono);font-size:12.5px;letter-spacing:-.02em}
.carregando{padding:26px;color:var(--tinta-2)}
.carregando::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-2px;
  border:2px solid var(--linha-forte);border-top-color:var(--royal);border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.aviso-erro{background:var(--critico-suave);border:1px solid #EFB9BD;border-left:3px solid var(--critico);color:#8C1B24;padding:12px 14px;border-radius:10px;margin-bottom:14px}

/* Badge do menu */
.badge{
  display:inline-block;min-width:19px;padding:1px 6px;border-radius:20px;background:#E5424E;color:#fff;
  font-size:11px;font-weight:700;font-family:var(--f-mono);text-align:center;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(229,66,78,.5);animation:badge-pulso 2.4s ease-out infinite;
}
@keyframes badge-pulso{0%{box-shadow:0 0 0 0 rgba(229,66,78,.45)}70%{box-shadow:0 0 0 7px rgba(229,66,78,0)}100%{box-shadow:0 0 0 0 rgba(229,66,78,0)}}
.prom-campos{display:inline-flex;gap:6px;align-items:center}
.prom-campos input{width:auto}

/* Seções e mini-tabelas */
.secao{
  display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--tinta-2);
  margin:26px 0 14px;text-transform:uppercase;letter-spacing:.08em;
}
.secao::before{content:'';width:20px;height:3px;border-radius:2px;background:var(--grad-royal)}
.secao::after{content:'';flex:1;height:1px;background:var(--linha)}
.mini-tab{margin-top:10px;overflow:auto}
.mini-tab table{font-size:13px}
.mini-tab th{position:static;background:none;padding:6px 8px;font-size:10.5px}
.mini-tab td{padding:6px 8px}
.vazio-mini{color:var(--tinta-2);font-size:13px;padding:16px 4px;line-height:1.5}

/* ============ FILTROS (Devedores) ============ */
.faixas{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.faixa{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linha-forte);background:#fff;
  border-radius:999px;padding:7px 16px;font-weight:600;font-size:13px;color:var(--tinta-2);
  transition:all var(--transicao);box-shadow:var(--sombra-1);
}
.faixa:hover{border-color:var(--royal);color:var(--royal);transform:translateY(-1px)}
.faixa.on{background:var(--grad-royal);border-color:transparent;color:#fff;box-shadow:var(--sombra-royal)}
.faixa.f-a::before,.faixa.f-b::before,.faixa.f-c::before,.faixa.f-d::before{
  content:'';width:8px;height:8px;border-radius:50%;flex:none}
.faixa.f-a::before{background:var(--ok-30)} .faixa.f-b::before{background:var(--ok-60)}
.faixa.f-c::before{background:var(--ambar)} .faixa.f-d::before{background:var(--critico)}
.faixa.on.f-a::before,.faixa.on.f-b::before,.faixa.on.f-c::before,.faixa.on.f-d::before{box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.filtros{padding:16px 18px;margin-bottom:12px}
.filtros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px}
.filtros label{margin:0}
.filtros .par{display:flex;gap:6px;margin-top:5px}
.filtros-chips{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px dashed var(--linha)}
.chk{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:500;color:var(--tinta-2);cursor:pointer;transition:color var(--transicao)}
.chk:hover{color:var(--tinta)}
.chk input{width:auto;margin:0}
.resumo-filtro{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:var(--tinta-2)}
.resumo-filtro strong{color:var(--tinta);font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Barra de lote — vidro navy flutuante */
.lote-barra{
  position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(10,23,45,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;border:1px solid rgba(56,182,230,.25);border-radius:14px;padding:11px 16px;margin-bottom:12px;
  box-shadow:0 16px 40px -8px rgba(7,17,35,.55);
  animation:lote-entra .3s cubic-bezier(.16,1,.3,1);
}
@keyframes lote-entra{from{opacity:0;transform:translateY(-8px)}}
.lote-valor{color:#9FE0F7;font-size:13px;font-family:var(--f-mono);letter-spacing:-.02em}
.lote-acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lote-barra .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.lote-barra .btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.lote-barra .btn-primario{background:var(--grad-royal);border-color:transparent}
.lote-barra .btn-link{color:#8AD3F2}

/* Tabela: seleção, tags, ações */
.col-chk{width:34px;text-align:center}
.col-chk input{width:auto;margin:0}
tr.sel td{background:var(--royal-suave)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--royal)}
/* Nada de display:flex na <td>: a célula deixava de ser célula de tabela e a
   borda e a altura dela descolavam da linha (separadores desalinhados). */
.col-acoes{white-space:nowrap}
.col-acoes > * + *{margin-left:6px}
.col-acoes > *{vertical-align:middle}
.tag-alerta,.tag-inativo{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:1px;margin-left:4px}
.tag-alerta{background:var(--ambar-suave);color:var(--ambar);cursor:help}
.tag-inativo{background:#EDF0F6;color:#6B7A99}
.zap{font-size:12px;color:var(--pago);text-decoration:none;font-weight:600}
.zap:hover{text-decoration:underline;text-underline-offset:3px}

/* Paginação, vazio, sync */
.paginacao{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;font-size:13px;color:var(--tinta-2)}
.paginacao strong{font-family:var(--f-mono)}
.vazio{padding:48px 20px;text-align:center;color:var(--tinta-2)}
.vazio::before{
  content:'';display:block;width:44px;height:44px;margin:0 auto 12px;background:var(--linha-forte);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vazio strong{display:block;font-family:var(--f-display);font-size:16px;color:var(--tinta);margin-bottom:4px}
.vazio p{margin-bottom:14px}
.sync-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--tinta-2);padding:5px 12px;border-radius:20px;background:#E8EEF8;white-space:nowrap}
.sync-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:#9AACC9}
.sync-tag.ok::before{background:var(--pago)}
.sync-tag.rodando{background:var(--celeste-claro);color:#0F7FAF}
.sync-tag.rodando::before{background:var(--celeste);animation:badge-pulso 1.4s ease-out infinite}
.sync-tag.erro{background:var(--critico-suave);color:var(--critico)}
.sync-tag.erro::before{background:var(--critico)}

/* ============ RÉGUA DE ATRASO — assinatura ============ */
.regua{height:8px;border-radius:99px;background:#E2E9F5;box-shadow:inset 0 1px 2px rgba(11,27,51,.08);position:relative;min-width:110px;overflow:hidden}
.regua i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transform-origin:left;animation:regua-cresce .7s cubic-bezier(.16,1,.3,1) both}
@keyframes regua-cresce{from{transform:scaleX(0)}}
.rl{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 3px 0 10px;vertical-align:-1px}
.rl.a,.regua i.a{background:var(--ok-30);color:var(--ok-30)}
.rl.b,.regua i.b{background:var(--ok-60);color:var(--ok-60)}
.rl.c,.regua i.c{background:var(--ambar);color:var(--ambar)}
.rl.d,.regua i.d{background:linear-gradient(90deg,#C42834,#E5636D);color:var(--critico)}
.regua i{box-shadow:0 0 8px -2px currentColor}
.legenda-regua{color:var(--tinta-2);font-size:13px;margin:-4px 0 14px}
.dias-tag{font-family:var(--f-mono);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.dias-tag.b{color:#A87C10} .dias-tag.c{color:var(--ambar)} .dias-tag.d{color:var(--critico)}

/* ============ COBRANÇAS ============ */
.cob-card{
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--sombra-1);
  transition:box-shadow var(--transicao),border-color var(--transicao);
}
.cob-card:hover{box-shadow:var(--sombra-2);border-color:var(--linha-forte)}
.cob-topo{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.cob-topo h3{font-size:16px;letter-spacing:-.01em}
.chip{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.chip.interna{background:var(--celeste-claro);color:#0F7FAF}
.chip.externa{background:var(--ambar-suave);color:var(--ambar)}
.chip.paga{background:var(--pago-suave);color:var(--pago)}
.chip.esgotada{background:#EDF0F6;color:#6B7A99}
.chip.c{background:var(--ambar-suave);color:var(--ambar)}
.chip.d{background:var(--critico-suave);color:var(--critico)}
.tent{font-size:13px;color:var(--tinta-2);margin-top:8px;padding-left:12px;border-left:3px solid var(--linha)}
.tent b{color:var(--tinta)}
.cob-acoes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.cob-acoes select{width:auto}
.cob-nota{display:block;margin-top:12px;font-size:12.5px;color:var(--ambar)}

/* ============ MODAL ============ */
.modal-fundo{
  position:fixed;inset:0;background:rgba(7,18,36,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;
  animation:fundo-entra .2s ease-out;
}
@keyframes fundo-entra{from{opacity:0}}
.modal{
  background:var(--superficie);border-radius:16px;width:min(680px,96vw);max-height:92vh;overflow:auto;
  padding:22px 26px;box-shadow:0 40px 100px -16px rgba(7,17,35,.5);
  animation:modal-entra .32s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-entra{from{opacity:0;transform:translateY(14px) scale(.97)}}
.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal header h2{font-size:19px;letter-spacing:-.01em}
.btn-x{
  background:none;border:0;font-size:24px;line-height:1;color:var(--tinta-2);width:34px;height:34px;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  transition:background var(--transicao),color var(--transicao),transform .25s ease;
}
.btn-x:hover{background:var(--critico-suave);color:var(--critico);transform:rotate(90deg)}

/* Toggles do cálculo */
.toggles{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.toggle{
  border:1px solid var(--linha-forte);border-radius:999px;padding:7px 15px;background:#fff;
  font-weight:600;font-size:13px;color:var(--tinta-2);transition:all var(--transicao);box-shadow:var(--sombra-1);
}
.toggle:hover{border-color:var(--royal);color:var(--royal);transform:translateY(-1px)}
.toggle.on{background:var(--grad-royal);border-color:transparent;color:#fff;box-shadow:var(--sombra-royal)}

/* Resumo do cálculo — recibo com código de barras */
.calc-resumo{
  position:relative;background:#FBFCFF;border:1px solid var(--linha-forte);border-radius:12px;
  padding:16px 18px 24px;margin-top:14px;overflow:hidden;
}
.calc-resumo::after{ /* barcode de boleto no rodapé */
  content:'';position:absolute;left:18px;right:18px;bottom:6px;height:9px;opacity:.28;
  background:
    repeating-linear-gradient(90deg,var(--tinta) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,var(--tinta) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,var(--tinta) 0 3px,transparent 3px 13px);
}
.calc-resumo .linha{display:flex;justify-content:space-between;gap:14px;padding:4px 0;font-variant-numeric:tabular-nums;font-size:13.5px}
.calc-resumo .linha+.linha{border-top:1px dotted var(--linha)}
.calc-resumo .linha span:last-child{font-family:var(--f-mono);font-weight:600;font-size:13px;letter-spacing:-.02em}
.calc-resumo .total{border-top:1px dashed var(--linha-forte);margin-top:8px;padding-top:10px;font-family:var(--f-display);font-weight:700;font-size:15px;align-items:baseline}
.calc-resumo .total span:last-child{font-family:var(--f-mono);font-weight:700;font-size:21px;color:var(--royal)}

/* ============ CONFIG ============ */
.config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.config-grid h4{font-family:var(--f-display);font-size:13.5px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--linha)}
.usr-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--linha);gap:8px}
.usr-row:last-child{border-bottom:0}
.msg-ok{color:var(--pago);font-weight:600} .msg-erro{color:var(--critico);font-weight:600}

/* ============ MOVIMENTO ============ */
@media (prefers-reduced-motion: no-preference){
  .view{animation:aparecer .24s cubic-bezier(.16,1,.3,1)}
  @keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============ RESPONSIVO ============ */
@media(max-width:900px){
  .graficos{grid-template-columns:1fr}
  #app{grid-template-columns:1fr}
  .menu{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:12px 14px;gap:6px}
  .menu::after{display:none}
  .menu nav{flex-direction:row}
  .menu nav button{padding:9px 12px;white-space:nowrap}
  .menu .marca{margin:0 12px 0 0;font-size:15px}
  .menu .marca img{width:24px;height:24px}
  .menu-user{margin:0 0 0 auto;border:0;padding:0}
  main{padding:20px 16px 40px}
}

/* ============ COBRADOR, RECEBIMENTO, PIX, RENEGOCIAÇÃO ============ */
.chip{background:#EDF0F6;color:#57678A}
.modal{width:min(780px,96vw)}
.banner-sim{
  background:repeating-linear-gradient(135deg,#FFF6E6 0 14px,#FDEFD6 14px 28px);
  border:1px solid #F1CF92;border-left:4px solid var(--ambar);color:#7A4208;
  padding:10px 14px;border-radius:10px;margin-bottom:18px;font-size:13.5px
}
.aviso-info{
  background:var(--royal-suave);border:1px solid #C7D6FA;border-left:3px solid var(--royal);color:#1B3A8C;
  padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13.5px
}
.nota{font-size:12.5px;color:var(--tinta-2);margin:6px 0 10px}
.card-largo{grid-column:1/-1}
.form-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
label.inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px}
label.inline select{margin:0;width:auto}
tr.inativo td{opacity:.55}

/* escolha do cobrador */
.opcoes-cobrador{display:grid;gap:8px;margin:12px 0 4px}
.opcao{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;cursor:pointer;color:var(--tinta)}
.opcao:hover{border-color:var(--linha-forte);background:var(--superficie-2)}
.opcao:has(input:checked){border-color:var(--royal);background:var(--royal-suave)}
.opcao input{margin-top:3px;accent-color:var(--royal)}
.opcao span{display:grid;gap:2px}
.opcao small{color:var(--tinta-2);font-weight:400}
.cob-acoes-dono{padding-top:10px;border-top:1px dashed var(--linha)}
.cob-acoes-dono small{color:var(--tinta-2)}

/* ficha do cliente no modal */
.ficha-cli{display:grid;gap:10px;padding:14px;border:1px solid var(--linha);border-radius:12px;background:var(--superficie-2);margin-bottom:14px}
.ficha-cli-end{display:grid;gap:4px}
.ficha-cli-end small{color:var(--tinta-2)}
.ficha-cli .ref{font-size:14px;font-weight:600;color:var(--tinta);background:#FFF7D6;border:1px solid #F0DE95;border-radius:8px;padding:6px 10px;justify-self:start}
.ficha-cli .ref.vazia{font-weight:400;color:var(--tinta-2);background:transparent;border-style:dashed}
.ficha-cli-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.ficha-cli .aviso-erro{margin:0}

/* recebimento */
.bloco-pag{margin-top:16px;padding-top:14px;border-top:1px dashed var(--linha-forte)}
.bloco-pag h4,.modal h4{font-family:var(--f-display);font-size:14px;margin:4px 0 6px}
.recibo-ok{display:grid;gap:3px;padding:14px;border-radius:12px;background:var(--pago-suave);border:1px solid #B8E3CD;color:#0B5E3B;margin-bottom:14px}
.recibo-texto{white-space:pre-wrap;font-family:var(--f-mono);font-size:12.5px;background:var(--superficie-2);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin:6px 0 4px}

/* PIX */
.bloco-pix{margin-top:16px;padding:16px;border:1px solid var(--linha);border-radius:12px;background:var(--superficie-2)}
.pix-cab{display:grid;gap:2px;margin-bottom:12px}
.pix-cab b{font-family:var(--f-display);font-size:16px}
.pix-cab small{color:var(--tinta-2)}
.pix-corpo{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.pix-qr{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:8px;min-width:120px;min-height:120px;display:grid;place-items:center}
.pix-qr img{display:block;width:220px;height:220px;image-rendering:pixelated}
.pix-codigo textarea{width:100%;font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--linha-forte);border-radius:8px;padding:8px;resize:vertical;word-break:break-all}

/* renegociação */
.reneg-valores{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--tinta-2)}
.reneg-valores b{font-family:var(--f-mono);color:var(--tinta);margin-left:4px}
.reneg-valores b.destaque{color:var(--royal)}

/* usuários */
.cidades-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 12px;max-height:240px;overflow:auto;padding:6px 2px;border-top:1px dashed var(--linha)}
.cidades-grid .chk{margin:4px 0;font-weight:400;color:var(--tinta)}

@media(max-width:700px){
  .pix-corpo{grid-template-columns:1fr}
  .pix-qr img{width:100%;height:auto;max-width:260px}
}
a.btn{display:inline-block;text-decoration:none}

/* ============ AVISOS E DIÁLOGOS ============ */
#toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:8px;width:min(400px,calc(100vw - 40px))}
.toast{
  background:var(--tinta);color:#fff;padding:12px 16px 12px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;
  border-left:4px solid var(--pago);box-shadow:0 14px 34px -10px rgba(7,17,35,.55);cursor:pointer;white-space:pre-line;
  animation:toast-entra .25s cubic-bezier(.16,1,.3,1);transition:opacity .3s ease,transform .3s ease;
}
.toast.erro{border-left-color:#F0606B}
.toast.sai{opacity:0;transform:translateY(6px)}
@keyframes toast-entra{from{opacity:0;transform:translateY(10px)}}
.dialogo{
  border:0;padding:0;border-radius:16px;width:min(460px,92vw);color:var(--tinta);background:var(--superficie);
  box-shadow:0 40px 100px -16px rgba(7,17,35,.55);
}
.dialogo::backdrop{background:rgba(7,18,36,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dialogo[open]{animation:modal-entra .28s cubic-bezier(.16,1,.3,1)}
.dialogo form{padding:22px 24px 20px}
.dialogo h2{font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.dialogo p{color:var(--tinta-2);font-size:14px;line-height:1.55;margin-bottom:18px;white-space:pre-line}
.dialogo input{margin-bottom:18px}
.dialogo-acoes{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ============ BUSCA DE CLIENTE (menu) ============ */
.busca-global{position:relative;margin:-10px 2px 20px}
.busca-global input{
  -webkit-appearance:none;appearance:none;background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;
  padding:9px 30px 9px 34px;font-size:13.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB1D4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px center;background-size:15px;
}
.busca-global input::placeholder{color:#8496BA}
.busca-global input:hover{border-color:rgba(255,255,255,.26)}
.busca-global input:focus{background-color:rgba(255,255,255,.12);border-color:var(--celeste);box-shadow:0 0 0 3px rgba(56,182,230,.22)}
.busca-global input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.busca-global kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:11px;color:#8496BA;
  border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:0 5px;line-height:17px;pointer-events:none}
.busca-global input:focus + kbd,.busca-global input:not(:placeholder-shown) + kbd{display:none}
.busca-resultados{
  position:absolute;left:0;top:calc(100% + 6px);width:min(460px,86vw);max-height:430px;overflow:auto;z-index:60;padding:6px;
  background:var(--superficie);color:var(--tinta);border-radius:12px;box-shadow:0 18px 44px -10px rgba(7,17,35,.5),0 0 0 1px var(--linha);
}
.busca-item{display:flex;justify-content:space-between;gap:14px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 10px;color:var(--tinta)}
.busca-item:hover,.busca-item.sel{background:var(--royal-suave)}
.busca-nome{display:grid;gap:1px;min-width:0}
.busca-nome b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-nome small{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-valor{font-family:var(--f-mono);font-size:12.5px;white-space:nowrap;color:var(--pago);align-self:center}
.busca-valor.deve{color:var(--critico);font-weight:700}
.busca-vazio{padding:14px;font-size:13px;color:var(--tinta-2)}

/* ============ FICHA COMPLETA DO CLIENTE ============ */
.link-cliente{
  background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--tinta);text-align:left;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color var(--transicao),color var(--transicao);
}
.link-cliente:hover{color:var(--royal);text-decoration-color:currentColor}
.ficha-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ficha-saldo{display:grid;gap:3px}
.ficha-saldo small{font-size:12.5px;font-weight:600}
.ficha-saldo b{font-family:var(--f-mono);font-size:30px;letter-spacing:-.035em;line-height:1.05}
.ficha-saldo.deve b{color:var(--critico)}
.ficha-saldo.emdia b{color:var(--pago)}
.ficha-saldo span{font-size:13px;color:var(--tinta-2);max-width:52ch}
.ficha-acoes{display:flex;gap:8px;flex-wrap:wrap}
.abas-ficha{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin:0 0 16px}
.abas-ficha button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;font-weight:600;font-size:13.5px;color:var(--tinta-2)}
.abas-ficha button:hover{color:var(--tinta)}
.abas-ficha button.on{color:var(--royal);border-bottom-color:var(--royal)}
.ficha-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px}
.ficha-grade h4,#ficha-aba h4{font-family:var(--f-display);font-size:14px;margin:12px 0 6px}
.ficha-grade p{font-size:13.5px;margin:4px 0}
#ficha-aba .tabela-wrap{max-height:260px;margin-bottom:6px}
.linha-tempo{list-style:none;padding:0 0 0 18px;margin:6px 0 2px 6px;border-left:2px solid var(--linha)}
.linha-tempo li{position:relative;padding:0 0 16px 12px}
.linha-tempo li:last-child{padding-bottom:4px}
.linha-tempo li::before{content:'';position:absolute;left:-25px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--superficie);border:3px solid var(--royal)}
.linha-tempo time{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--tinta-2)}
.linha-tempo b{display:block;font-size:13.5px;margin:1px 0}
.linha-tempo span{display:block;font-size:12.5px;color:var(--tinta-2)}
.linha-tempo .ev-tentativa::before{border-color:var(--celeste)}
.linha-tempo .ev-pago::before,.linha-tempo .ev-pix::before{border-color:var(--pago)}
.linha-tempo .ev-pago::before{background:var(--pago)}
.linha-tempo .ev-promessa::before{border-color:var(--ambar)}
.linha-tempo .ev-renegociacao::before{border-color:#7B5BD3}
/* O menu é sticky (contexto de empilhamento próprio): sem z-index, a lista da
   busca, que mora dentro dele, ficava por baixo dos cards do conteúdo. */
.menu{z-index:40}

/* ============ ÍCONES DAS TELAS NOVAS (máscara, como as outras) ============ */
.menu nav button[data-view="renegociacoes"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h6M4 12h6M4 18h6'/%3E%3Cpath d='M10 6c4 0 4 6 8 6M10 18c4 0 4-6 8-6'/%3E%3Cpath d='m16 9.5 2.5 2.5-2.5 2.5'/%3E%3C/svg%3E")}
.menu nav button[data-view="recebimentos"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E")}
.menu nav button[data-view="auditoria"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.4 7.5 9.5 4.3-1.1 7.5-4.9 7.5-9.5V6Z'/%3E%3Cpath d='m8.8 12.2 2.2 2.2 4.4-4.6'/%3E%3C/svg%3E")}

/* ============ CARDS COM CABEÇALHO, METAS, AUDITORIA ============ */
.card-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.card-cab h3{margin-bottom:0}
.card-cab input{width:auto}
.espaco-topo{margin-top:14px}
.campo-curto{width:110px;padding:6px 9px}
.meta-barra{height:8px;min-width:90px;border-radius:99px;background:#E2E9F5;overflow:hidden}
.meta-barra i{display:block;height:100%;border-radius:99px;background:var(--grad-royal)}
.meta-barra.batida i{background:linear-gradient(90deg,#0E8A55,#2FB57A)}
.recibo-texto.json{font-size:12px;max-height:50vh;overflow:auto}

/* ============ PARA HOJE (dashboard) ============ */
.para-hoje{display:grid;grid-template-columns:minmax(230px,290px) 1fr;gap:14px;margin-bottom:18px}
.hoje-recebido{
  position:relative;overflow:hidden;display:grid;gap:3px;align-content:center;cursor:pointer;
  background:var(--grad-navy);color:#fff;border-radius:var(--raio);padding:16px 20px;box-shadow:var(--sombra-2);
}
/* a mesma luz da fibra do menu, uma vez só, no número que importa */
.hoje-recebido::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,182,230,.9),transparent);filter:drop-shadow(0 0 5px rgba(56,182,230,.8))}
.hoje-recebido:focus-visible{outline:2px solid var(--celeste);outline-offset:2px}
.hoje-recebido small{color:#9FB1D4;font-size:12.5px;font-weight:600}
.hoje-recebido b{font-family:var(--f-mono);font-size:27px;letter-spacing:-.035em;line-height:1.1}
.hoje-recebido span{font-size:12.5px;color:#B9C8E6}
.hoje-acoes{display:flex;flex-wrap:wrap;gap:8px;align-content:center}
.hoje-item{
  display:flex;align-items:baseline;gap:8px;background:var(--superficie);border:1px solid var(--linha);
  border-left:3px solid var(--royal);border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--tinta);text-align:left;
  transition:border-color var(--transicao),background var(--transicao);
}
.hoje-item b{font-family:var(--f-mono);font-size:17px;letter-spacing:-.02em}
.hoje-item.c{border-left-color:var(--ambar)} .hoje-item.d{border-left-color:var(--critico)}
.hoje-item:hover{background:var(--superficie-2);border-color:var(--linha-forte)}
.hoje-vazio{color:var(--tinta-2);font-size:13.5px;padding:10px 2px}

/* ============ REFINO VISUAL ============ */
/* Títulos em texto normal: rótulo em caixa alta espaçada acima de tudo deixava
   tudo com o mesmo peso e cansava a leitura. */
.card h3{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--tinta);text-transform:none;letter-spacing:-.005em;margin-bottom:12px}
.secao{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--tinta);text-transform:none;letter-spacing:-.01em;margin:30px 0 14px}
th{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.mini-tab th{font-size:11.5px}
/* Movimento só onde ele diz algo: os números não pulam nem entram em cascata. */
.kpi{animation:none}
.kpi:hover{transform:none;box-shadow:var(--sombra-1)}
.kpi small:first-child{font-weight:600}
/* Conteúdo centralizado e mais largo em tela grande (a tabela de devedores agradece). */
main{max-width:1440px;margin:0 auto;padding:30px 40px 56px}
/* Foco visível em links e campos de busca também. */
a:focus-visible,.link-cliente:focus-visible,.hoje-item:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:6px}

/* ============ RESPONSIVO (painel) ============ */
/* O canvas do gráfico segura a largura da coluna: sem min-width:0 o cartão não
   encolhe junto com a janela e o Chart.js não redesenha menor. */
.graficos > *{min-width:0}
@media(max-width:1180px){
  #app{grid-template-columns:200px 1fr}
  main{padding:24px 22px 44px}
  .graficos{grid-template-columns:1fr}
}
@media(max-width:900px){
  .para-hoje{grid-template-columns:1fr}
  .busca-global{margin:0 8px 0 0;min-width:180px}
  .busca-resultados{position:fixed;left:12px;right:12px;top:64px;width:auto}
  .modal{padding:18px 16px}
  .form-linha{grid-template-columns:1fr}
}
/* A regra de 1180px vem depois da de 900px do layout original: no celular o
   menu continua virando barra no topo e o conteúdo ocupa a largura toda. */
@media(max-width:900px){
  #app{grid-template-columns:1fr}
  main{padding:20px 16px 40px}
  /* Celular: ações do cabeçalho quebram linha e a busca usa o espaço que sobra. */
  .cab-acoes{width:100%}
  .cab-acoes input[type=search]{flex:1 1 180px}
  #usr-lista{overflow-x:auto}
}

/* Seleção de cobranças para reatribuir em lote */
.cob-chk{width:16px;height:16px;margin:0 8px 0 0;vertical-align:-2px;accent-color:var(--royal);cursor:pointer}
/* Caixa de seleção ao lado do nome, mesmo quando o nome quebra linha. */
.cob-topo h3:has(.cob-chk){display:flex;align-items:baseline;column-gap:6px}
.cob-topo h3 .cob-chk{align-self:flex-start;margin:4px 2px 0 0;flex:none}
.cob-topo h3:has(.cob-chk) .link-cliente{min-width:0;text-align:left}
.cob-topo h3:has(.cob-chk) small{flex:none}
.cob-card.sel{border-color:var(--royal);box-shadow:inset 3px 0 0 var(--royal),var(--sombra-1)}
#cob-busca{width:220px}
.lote-barra select{width:auto;background-color:rgba(255,255,255,.95)}

/* Mensagens do WhatsApp: modelo em cima, prévia em balão embaixo */
.msg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:4px 0 14px}
.msg-grid textarea{line-height:1.45;resize:vertical;min-height:110px}
.msg-grid .nota{display:block;margin:4px 0 0}
.msg-previa{
  margin-top:10px;padding:10px 12px;border-radius:4px 14px 14px 14px;background:#E4F5EC;border:1px solid #C3E6D2;
  color:#14382A;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg-previa mark{background:var(--critico-suave);color:#8C1B24;border-radius:3px;padding:0 2px}
.msg-previa .vazia{color:var(--tinta-2);font-style:italic}
@media (max-width:900px){.msg-grid{grid-template-columns:1fr}}