/* ====================================================================
   Caixa-Sicoob  |  Premium Enterprise Dashboard CSS
   Version 2.0 - 2026 Glassmorphism + Depth Design System
   ==================================================================== */

/* ── Reset + Base ────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--primary);color:#fff}

/* ── Design Tokens ──────────────────────────────────────────────── */
:root{
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s var(--ease-out-expo);
  --transition-med: 0.25s var(--ease-out-expo);
  --transition-slow: 0.4s var(--ease-out-expo);
  --glass-blur: 16px;
  --glass-saturate: 1.8;
}

/* ── Themes ──────────────────────────────────────────────────────── */

/* -- Dark (Default) ------------------------------------------------ */
[data-theme="dark"]{
  --bg:#0b0d14;
  --bg-subtle:#10121c;
  --surface:#161925;
  --surface-hover:#1c2030;
  --card:#1a1e2e;
  --card-hover:#1f2438;
  --border:#272c42;
  --border-subtle:#1f2338;
  --text:#e8eaf4;
  --text-secondary:#c4c7d9;
  --muted:#787ea0;
  --primary:#5b9aff;
  --primary-hover:#4488f0;
  --primary-glow:rgba(91,154,255,.2);
  --primary-surface:rgba(91,154,255,.08);
  --green:#36d986;
  --green-glow:rgba(54,217,134,.15);
  --red:#f06070;
  --red-glow:rgba(240,96,112,.15);
  --yellow:#f5b942;
  --yellow-glow:rgba(245,185,66,.12);
  --orange:#ed8936;
  --input-bg:#0e1019;
  --input-border:#2a2f48;
  --topbar-bg:rgba(16,18,28,.78);
  --badge-blue-bg:rgba(91,154,255,.12);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow:0 4px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-xl:0 20px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  --shadow-primary:0 4px 20px rgba(91,154,255,.15), 0 1px 4px rgba(91,154,255,.1);
  --card-accent:#5b9aff;
  --card-accent-glow:rgba(91,154,255,.06);
  --table-stripe:rgba(91,154,255,.025);
  --table-hover:rgba(91,154,255,.06);
  --scrollbar-track:rgba(255,255,255,.03);
  --scrollbar-thumb:rgba(255,255,255,.1);
  --scrollbar-thumb-hover:rgba(255,255,255,.18);
  --skeleton-base:#1a1e2e;
  --skeleton-shine:rgba(255,255,255,.04);
}

/* -- Light --------------------------------------------------------- */
[data-theme="light"]{
  --bg:#f2f4f8;
  --bg-subtle:#eaecf2;
  --surface:#ffffff;
  --surface-hover:#f8f9fc;
  --card:#ffffff;
  --card-hover:#fafbfe;
  --border:#dfe2ea;
  --border-subtle:#e8eaf0;
  --text:#1a1d2e;
  --text-secondary:#3d4158;
  --muted:#6b728c;
  --primary:#2563eb;
  --primary-hover:#1d4fd8;
  --primary-glow:rgba(37,99,235,.15);
  --primary-surface:rgba(37,99,235,.05);
  --green:#16a34a;
  --green-glow:rgba(22,163,74,.1);
  --red:#dc2626;
  --red-glow:rgba(220,38,38,.1);
  --yellow:#d97706;
  --yellow-glow:rgba(217,119,6,.1);
  --orange:#ea580c;
  --input-bg:#f8f9fc;
  --input-border:#d5d8e2;
  --topbar-bg:rgba(255,255,255,.82);
  --badge-blue-bg:rgba(37,99,235,.08);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
  --shadow-xl:0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  --shadow-primary:0 4px 20px rgba(37,99,235,.12), 0 1px 4px rgba(37,99,235,.08);
  --card-accent:#2563eb;
  --card-accent-glow:rgba(37,99,235,.04);
  --table-stripe:rgba(37,99,235,.02);
  --table-hover:rgba(37,99,235,.045);
  --scrollbar-track:rgba(0,0,0,.03);
  --scrollbar-thumb:rgba(0,0,0,.12);
  --scrollbar-thumb-hover:rgba(0,0,0,.22);
  --skeleton-base:#eaecf2;
  --skeleton-shine:rgba(255,255,255,.6);
}

/* -- Midnight ------------------------------------------------------ */
[data-theme="midnight"]{
  --bg:#070a16;
  --bg-subtle:#0c1022;
  --surface:#111630;
  --surface-hover:#161c3a;
  --card:#171d3a;
  --card-hover:#1c2344;
  --border:#252c52;
  --border-subtle:#1e2446;
  --text:#dde4ff;
  --text-secondary:#b8c0e8;
  --muted:#6f7bb8;
  --primary:#818cf8;
  --primary-hover:#6366f1;
  --primary-glow:rgba(129,140,248,.18);
  --primary-surface:rgba(129,140,248,.07);
  --green:#34d399;
  --green-glow:rgba(52,211,153,.12);
  --red:#f87171;
  --red-glow:rgba(248,113,113,.12);
  --yellow:#fbbf24;
  --yellow-glow:rgba(251,191,36,.1);
  --orange:#fb923c;
  --input-bg:#0a0e1e;
  --input-border:#282f54;
  --topbar-bg:rgba(12,16,34,.8);
  --badge-blue-bg:rgba(129,140,248,.12);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow:0 4px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.22);
  --shadow-lg:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.28);
  --shadow-xl:0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  --shadow-primary:0 4px 20px rgba(129,140,248,.15), 0 1px 4px rgba(129,140,248,.1);
  --card-accent:#818cf8;
  --card-accent-glow:rgba(129,140,248,.05);
  --table-stripe:rgba(129,140,248,.025);
  --table-hover:rgba(129,140,248,.06);
  --scrollbar-track:rgba(255,255,255,.02);
  --scrollbar-thumb:rgba(255,255,255,.08);
  --scrollbar-thumb-hover:rgba(255,255,255,.15);
  --skeleton-base:#171d3a;
  --skeleton-shine:rgba(255,255,255,.03);
}

/* -- Ocean --------------------------------------------------------- */
[data-theme="ocean"]{
  --bg:#091520;
  --bg-subtle:#0d1c2c;
  --surface:#142232;
  --surface-hover:#1a2a3e;
  --card:#182b3e;
  --card-hover:#1e3348;
  --border:#24405c;
  --border-subtle:#1e3650;
  --text:#ddf0fe;
  --text-secondary:#aacce8;
  --muted:#6a9cc4;
  --primary:#38bdf8;
  --primary-hover:#0ea5e9;
  --primary-glow:rgba(56,189,248,.18);
  --primary-surface:rgba(56,189,248,.07);
  --green:#2dd4bf;
  --green-glow:rgba(45,212,191,.12);
  --red:#fb7185;
  --red-glow:rgba(251,113,133,.12);
  --yellow:#facc15;
  --yellow-glow:rgba(250,204,21,.1);
  --orange:#fb923c;
  --input-bg:#0c1822;
  --input-border:#244060;
  --topbar-bg:rgba(13,28,44,.8);
  --badge-blue-bg:rgba(56,189,248,.1);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow:0 4px 16px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.25);
  --shadow-xl:0 20px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  --shadow-primary:0 4px 20px rgba(56,189,248,.15), 0 1px 4px rgba(56,189,248,.1);
  --card-accent:#38bdf8;
  --card-accent-glow:rgba(56,189,248,.05);
  --table-stripe:rgba(56,189,248,.025);
  --table-hover:rgba(56,189,248,.06);
  --scrollbar-track:rgba(255,255,255,.02);
  --scrollbar-thumb:rgba(255,255,255,.08);
  --scrollbar-thumb-hover:rgba(255,255,255,.15);
  --skeleton-base:#182b3e;
  --skeleton-shine:rgba(255,255,255,.03);
}

/* -- Cream --------------------------------------------------------- */
[data-theme="cream"]{
  --bg:#f7f4ea;
  --bg-subtle:#efe9d8;
  --surface:#fffdf6;
  --surface-hover:#faf7ee;
  --card:#fffdf6;
  --card-hover:#fcf9f0;
  --border:#ddd6c0;
  --border-subtle:#e8e0cc;
  --text:#3a3626;
  --text-secondary:#5a5540;
  --muted:#8a826f;
  --primary:#b45309;
  --primary-hover:#92400e;
  --primary-glow:rgba(180,83,9,.14);
  --primary-surface:rgba(180,83,9,.05);
  --green:#15803d;
  --green-glow:rgba(21,128,61,.1);
  --red:#b91c1c;
  --red-glow:rgba(185,28,28,.1);
  --yellow:#a16207;
  --yellow-glow:rgba(161,98,7,.08);
  --orange:#c2410c;
  --input-bg:#f3eddc;
  --input-border:#d4cbb2;
  --topbar-bg:rgba(247,244,234,.82);
  --badge-blue-bg:rgba(180,83,9,.08);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(120,100,60,.06), 0 1px 2px rgba(120,100,60,.04);
  --shadow:0 4px 16px rgba(120,100,60,.07), 0 1px 4px rgba(120,100,60,.04);
  --shadow-lg:0 8px 32px rgba(120,100,60,.1), 0 2px 8px rgba(120,100,60,.05);
  --shadow-xl:0 20px 60px rgba(120,100,60,.12), 0 4px 16px rgba(120,100,60,.06);
  --shadow-primary:0 4px 20px rgba(180,83,9,.1), 0 1px 4px rgba(180,83,9,.06);
  --card-accent:#b45309;
  --card-accent-glow:rgba(180,83,9,.04);
  --table-stripe:rgba(180,83,9,.02);
  --table-hover:rgba(180,83,9,.045);
  --scrollbar-track:rgba(0,0,0,.03);
  --scrollbar-thumb:rgba(0,0,0,.1);
  --scrollbar-thumb-hover:rgba(0,0,0,.18);
  --skeleton-base:#efe9d8;
  --skeleton-shine:rgba(255,255,255,.5);
}

/* ── Custom Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:4px}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}

/* ── Body + Global ──────────────────────────────────────────────── */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--transition-slow),color var(--transition-slow);
}
a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-hover)}

button{
  cursor:pointer;border:none;font:inherit;
  border-radius:var(--radius-xs);
  padding:8px 16px;
  transition:all var(--transition-fast);
  position:relative;
  overflow:hidden;
}

input,select,textarea{
  font:inherit;
  background:var(--input-bg);
  color:var(--text);
  border:1.5px solid var(--input-border);
  border-radius:var(--radius-xs);
  padding:9px 13px;
  outline:none;
  transition:border var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
  background:var(--surface);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}

/* ── Focus Rings (Accessibility) ───────────────────────────────── */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--primary-glow);
}

/* ── Tables ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;border-spacing:0}
th,td{
  padding:10px 14px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--transition-fast);
}
th{
  background:var(--surface);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
  position:sticky;top:0;
  letter-spacing:.6px;
  border-bottom:2px solid var(--border);
  z-index:2;
  white-space:nowrap;
}
tr:nth-child(even){background:var(--table-stripe)}
tr:hover{background:var(--table-hover)}
tbody tr{transition:background var(--transition-fast)}

/* ── Login ───────────────────────────────────────────────────────── */
.login-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:var(--bg);
  position:relative;
}
.login-wrap::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 30% 20%, var(--primary-glow), transparent),
    radial-gradient(ellipse 500px 350px at 70% 80%, var(--green-glow), transparent);
  pointer-events:none;
}
.login-box{
  background:var(--surface);
  padding:44px 40px;
  border-radius:16px;
  box-shadow:var(--shadow-xl);
  width:380px;
  text-align:center;
  border:1px solid var(--border);
  position:relative;
  z-index:1;
  animation:loginAppear .5s var(--ease-out-expo);
}
@keyframes loginAppear{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.login-box h1{font-size:24px;margin-bottom:4px;font-weight:700;letter-spacing:-.4px}
.login-box p{color:var(--muted);margin-bottom:28px;font-size:14px}
.field{margin-bottom:16px;text-align:left}
.field label{
  display:block;font-size:11px;color:var(--muted);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.7px;font-weight:600;
}
.field input,.field select,.field textarea{width:100%}
.error{color:var(--red);font-size:12px;margin-top:10px;font-weight:500}
.btn-login{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;font-weight:600;font-size:15px;
  border-radius:var(--radius-sm);margin-top:10px;
  box-shadow:var(--shadow-primary);
  transition:all var(--transition-fast);
  letter-spacing:.2px;
}
.btn-login:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px var(--primary-glow);
  filter:brightness(1.08);
}
.btn-login:active{transform:translateY(0);filter:brightness(.96)}

/* ── Topbar ──────────────────────────────────────────────────────── */
.app{display:none}.app.active{display:block}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  position:sticky;top:0;z-index:100;
  transition:background var(--transition-slow);
}
.logo{
  font-weight:700;font-size:19px;letter-spacing:-.4px;
  display:flex;align-items:center;gap:2px;
}
.logo span{
  color:var(--primary);font-weight:500;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.topbar-right{display:flex;align-items:center;gap:14px}
.user-info{font-size:13px;font-weight:500}
.btn-logout{
  padding:7px 15px;background:transparent;
  border:1.5px solid var(--border);color:var(--muted);font-size:12px;
  border-radius:var(--radius-xs);font-weight:500;
  transition:all var(--transition-fast);
}
.btn-logout:hover{border-color:var(--red);color:var(--red);background:var(--red-glow)}
.btn-theme{
  background:transparent;border:1.5px solid var(--border);
  color:var(--muted);padding:7px 11px;font-size:16px;line-height:1;
  border-radius:var(--radius-xs);
  transition:all var(--transition-fast);
}
.btn-theme:hover{
  border-color:var(--primary);color:var(--primary);
  background:var(--primary-surface);
  transform:rotate(15deg);
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.tabs{
  display:flex;gap:1px;padding:0 28px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:background var(--transition-slow);
}
.tab{
  padding:11px 18px;cursor:pointer;
  font-size:13px;font-weight:500;
  color:var(--muted);
  border-bottom:2.5px solid transparent;
  transition:all var(--transition-med);
  position:relative;
  user-select:none;
}
.tab:hover{color:var(--text);background:var(--primary-surface)}
.tab.active{
  color:var(--primary);
  font-weight:600;
  border-bottom-color:transparent;
}
.tab.active::after{
  content:'';position:absolute;bottom:-1px;left:12px;right:12px;height:2.5px;
  background:linear-gradient(90deg,var(--primary),var(--primary-hover));
  border-radius:2px 2px 0 0;
}

/* ── Content ─────────────────────────────────────────────────────── */
.content{padding:24px 28px;max-width:1440px;margin:0 auto}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── Staggered Slide-Up Animation ────────────────────────────────── */
@keyframes slideUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.tab-panel.active .card{animation:slideUp .4s var(--ease-out-expo) both}
.tab-panel.active .card:nth-child(1){animation-delay:0ms}
.tab-panel.active .card:nth-child(2){animation-delay:40ms}
.tab-panel.active .card:nth-child(3){animation-delay:80ms}
.tab-panel.active .card:nth-child(4){animation-delay:120ms}
.tab-panel.active .card:nth-child(5){animation-delay:160ms}
.tab-panel.active .card:nth-child(6){animation-delay:200ms}
.tab-panel.active .card:nth-child(7){animation-delay:240ms}
.tab-panel.active .card:nth-child(8){animation-delay:280ms}
.tab-panel.active .table-wrap{animation:slideUp .4s var(--ease-out-expo) .15s both}
.tab-panel.active .section-title{animation:slideUp .35s var(--ease-out-expo) both}
.tab-panel.active .table-toolbar{animation:slideUp .35s var(--ease-out-expo) .08s both}

/* ── Cards ───────────────────────────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;margin-bottom:22px;
}
.card{
  background:var(--card);
  padding:20px 22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  border-left:3px solid var(--card-accent);
  min-height:92px;
  transition:all var(--transition-med);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--card-accent-glow),transparent 60%);
  opacity:0;transition:opacity var(--transition-med);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border);
}
.card:hover::before{opacity:1}
.card-label{
  font-size:11px;text-transform:uppercase;color:var(--muted);
  letter-spacing:.7px;margin-bottom:8px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.card-label::before{
  content:'';display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--card-accent);flex-shrink:0;
  box-shadow:0 0 6px var(--card-accent-glow);
}
.card-value{
  font-family:var(--font-data);font-size:26px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
  line-height:1.2;
}
.card-sub{font-size:12px;color:var(--muted);margin-top:5px}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}

/* Card accent variants */
.card--danger{border-left-color:var(--red)}
.card--danger .card-label::before{background:var(--red);box-shadow:0 0 8px var(--red-glow)}
.card--danger::before{background:linear-gradient(90deg,var(--red-glow),transparent 60%)}
.card--warning{border-left-color:var(--yellow)}
.card--warning .card-label::before{background:var(--yellow);box-shadow:0 0 8px var(--yellow-glow)}
.card--warning::before{background:linear-gradient(90deg,var(--yellow-glow),transparent 60%)}
.card--success{border-left-color:var(--green)}
.card--success .card-label::before{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.card--success::before{background:linear-gradient(90deg,var(--green-glow),transparent 60%)}
.card--info{border-left-color:var(--primary)}
.card--info .card-label::before{background:var(--primary);box-shadow:0 0 8px var(--primary-glow)}

/* ── Table ───────────────────────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.table-toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;flex-wrap:wrap;
}
.section-title{
  font-size:16px;font-weight:700;margin-bottom:14px;
  padding-left:14px;border-left:3px solid var(--primary);
  border-bottom:none;line-height:1.3;
  letter-spacing:-.2px;
  color:var(--text);
}

/* Table data classes */
.td-money{
  font-family:var(--font-data);text-align:right;
  font-variant-numeric:tabular-nums;font-weight:600;
  letter-spacing:-.3px;
}
.td-mono{font-family:var(--font-data);font-size:12px;letter-spacing:-.2px}
.row-overdue{background:var(--red-glow)}
.row-paid{opacity:.6}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;
  border-radius:var(--radius-xs);
  transition:all var(--transition-fast);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;
  box-shadow:var(--shadow-primary);
}
.btn-primary:hover{
  filter:brightness(1.1);
  box-shadow:0 6px 20px var(--primary-glow);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0);filter:brightness(.95)}
.btn-secondary{
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--border);
}
.btn-secondary:hover{background:var(--card);border-color:var(--primary);color:var(--primary)}
.btn-success{
  background:linear-gradient(135deg,var(--green),#0d9456);
  color:#fff;
  box-shadow:0 2px 10px var(--green-glow);
}
.btn-success:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:var(--radius-xs)}

/* ── NEW: WhatsApp Button ────────────────────────────────────────── */
.btn-whatsapp{
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-weight:600;
  box-shadow:0 3px 12px rgba(37,211,102,.25);
  padding:8px 18px;border-radius:var(--radius-xs);
  transition:all var(--transition-fast);
  display:inline-flex;align-items:center;gap:7px;
}
.btn-whatsapp:hover{
  filter:brightness(1.1);
  box-shadow:0 5px 20px rgba(37,211,102,.35);
  transform:translateY(-1px);
}
.btn-whatsapp:active{transform:translateY(0);filter:brightness(.95)}
.btn-whatsapp::before{
  content:'';display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;
  letter-spacing:.2px;
  transition:all var(--transition-fast);
}
.badge-green{
  background:linear-gradient(135deg,rgba(46,204,113,.18),rgba(46,204,113,.08));
  color:var(--green);
  border:1px solid rgba(46,204,113,.2);
}
.badge-red{
  background:linear-gradient(135deg,rgba(240,96,112,.18),rgba(240,96,112,.08));
  color:var(--red);
  border:1px solid rgba(240,96,112,.2);
}
.badge-yellow{
  background:linear-gradient(135deg,rgba(245,185,66,.18),rgba(245,185,66,.08));
  color:var(--yellow);
  border:1px solid rgba(245,185,66,.2);
}
.badge-gray{
  background:linear-gradient(135deg,rgba(139,143,163,.15),rgba(139,143,163,.05));
  color:var(--muted);
  border:1px solid rgba(139,143,163,.15);
}
.badge-blue{
  background:linear-gradient(135deg,var(--badge-blue-bg),rgba(91,154,255,.04));
  color:var(--primary);
  border:1px solid rgba(91,154,255,.15);
}
.badge-purple{
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(139,92,246,.06));
  color:#a78bfa;
  border:1px solid rgba(139,92,246,.2);
}

/* ── Import Status Badges ────────────────────────────────────────── */
.badge-importada{
  background:linear-gradient(135deg,rgba(46,204,113,.15),rgba(46,204,113,.05));
  color:var(--green);font-size:10px;padding:2px 8px;
  border-radius:20px;border:1px solid rgba(46,204,113,.15);
  font-weight:600;
}
.badge-nao-importada{
  background:linear-gradient(135deg,rgba(139,143,163,.12),rgba(139,143,163,.04));
  color:var(--muted);font-size:10px;padding:2px 8px;
  border-radius:20px;border:1px solid rgba(139,143,163,.12);
  font-weight:600;
}

/* ── Notify ──────────────────────────────────────────────────────── */
.notify{
  position:fixed;top:-60px;left:50%;transform:translateX(-50%);
  padding:12px 28px;border-radius:var(--radius);
  font-weight:500;z-index:9999;
  transition:top .4s var(--ease-spring);
  font-size:13px;
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
}
.notify.show{top:18px}
.notify-info{background:rgba(91,154,255,.92);color:#fff}
.notify-success{background:rgba(54,217,134,.92);color:#fff}
.notify-error{background:rgba(240,96,112,.92);color:#fff}

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:1000;align-items:center;justify-content:center;
  backdrop-filter:blur(8px) saturate(1.2);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--surface);
  border-radius:16px;
  padding:28px;
  width:440px;max-width:95vw;max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-xl);
  border:1px solid var(--border);
  animation:modalAppear .3s var(--ease-out-expo);
  position:relative;
}
@keyframes modalAppear{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
.modal h2{
  margin-bottom:18px;font-size:18px;font-weight:700;
  letter-spacing:-.3px;
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ── QR Modal (enhanced) ──────────────────────────────────────────── */
.modal-qr{width:500px}
.qr-header{text-align:center;margin-bottom:14px}
.qr-header h2{margin-bottom:10px}
.qr-order-info{
  background:var(--card);border-radius:var(--radius-sm);
  padding:12px 16px;text-align:left;
  border:1px solid var(--border);
}
.qr-info-row{
  display:flex;justify-content:space-between;
  padding:4px 0;border-bottom:1px solid var(--border-subtle);
}
.qr-info-row:last-child{border-bottom:none}
.qr-info-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.qr-info-value{font-weight:600;font-size:13px}
.qr-container{text-align:center;padding:14px 0}
.pix-valor{
  font-family:var(--font-data);font-size:34px;font-weight:700;
  color:var(--green);margin-bottom:14px;
  letter-spacing:1px;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px var(--green-glow);
}
.pix-copia-cola{
  font-family:var(--font-data);font-size:10px;color:var(--muted);
  word-break:break-all;max-height:40px;overflow:hidden;
  margin-top:10px;padding:8px;background:var(--card);
  border-radius:var(--radius-xs);cursor:pointer;
  border:1px solid var(--border);
  transition:all var(--transition-fast);
}
.pix-copia-cola:hover{border-color:var(--primary);background:var(--primary-surface)}
.qr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.qr-whatsapp{
  background:var(--card);border-radius:var(--radius-sm);
  padding:14px;margin:12px 0;border:1px solid var(--border);
}
.qr-wa-title{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--green)}
.qr-phone-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.qr-phone-btn{
  padding:7px 14px;border-radius:var(--radius-xs);
  background:var(--surface);border:1.5px solid var(--border);
  cursor:pointer;font-size:12px;
  transition:all var(--transition-fast);color:var(--text);
  font-weight:500;
}
.qr-phone-btn:hover{
  border-color:var(--green);
  background:rgba(46,204,113,.08);
  transform:translateY(-1px);
  box-shadow:0 2px 8px var(--green-glow);
}
.qr-phone-btn .wa-tag{color:var(--green);font-weight:700;margin-left:5px;font-size:10px}

/* ── Auto PIX pulse ──────────────────────────────────────────────── */
.modal-auto-pix{border:2px solid var(--green);animation:autoPixPulse 2s ease-in-out 3}
@keyframes autoPixPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}
  50%{box-shadow:0 0 40px 8px rgba(46,204,113,.25)}
}
.auto-pix-badge{
  position:absolute;top:-9px;right:-9px;
  background:linear-gradient(135deg,var(--red),#c0392b);
  color:#fff;border-radius:50%;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  box-shadow:0 2px 8px var(--red-glow);
  animation:badgePop .3s var(--ease-spring);
}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* ── Print QR ────────────────────────────────────────────────────── */
@media print{
  body{background:#fff;color:#000}
  .topbar,.tabs,.table-wrap,.table-toolbar,.btn,.notify,.modal-overlay{display:none!important}
  .tab-panel{display:none!important}
}

/* ── Loading Spinner ─────────────────────────────────────────────── */
.spinner{
  display:inline-block;width:22px;height:22px;
  border:2.5px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Skeleton Loading ────────────────────────────────────────────── */
@keyframes skeletonShimmer{
  0%{background-position:-200px 0}
  100%{background-position:calc(200px + 100%) 0}
}
.skeleton{
  background:var(--skeleton-base);
  background-image:linear-gradient(90deg,var(--skeleton-base) 0,var(--skeleton-shine) 40%,var(--skeleton-base) 80%);
  background-size:200px 100%;
  background-repeat:no-repeat;
  border-radius:var(--radius-xs);
  animation:skeletonShimmer 1.5s ease-in-out infinite;
}
.skeleton-text{height:14px;margin-bottom:8px;width:80%}
.skeleton-value{height:28px;width:60%;margin-bottom:4px}
.skeleton-card{height:92px;border-radius:var(--radius)}

/* ── Bank Cards ──────────────────────────────────────────────────── */
.card-bank{position:relative;overflow:hidden}
.card-bank::after{
  content:'';position:absolute;top:-30%;right:-20%;
  width:80px;height:80px;border-radius:50%;
  background:var(--card-accent-glow);
  opacity:.5;pointer-events:none;
}
.card-bank-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bank-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-sm);
  font-weight:800;font-size:12px;color:#fff;flex-shrink:0;
  transition:transform var(--transition-fast);
  position:relative;
}
.bank-icon::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2);
  pointer-events:none;
}
.bank-sicoob{
  background:linear-gradient(145deg,#004d40,#00695c,#00897b);
  box-shadow:0 2px 10px rgba(0,77,64,.35);
}
.bank-bb{
  background:linear-gradient(145deg,#ffe033,#fce303,#f5c800);
  color:#003768!important;
  box-shadow:0 2px 10px rgba(252,227,3,.3);
}
.bank-total{
  background:linear-gradient(145deg,var(--primary),#6366f1,#818cf8);
  box-shadow:var(--shadow-primary);
}
.bank-pix{
  background:linear-gradient(145deg,#00bdae,#32bcad,#77c9b4);
  box-shadow:0 2px 10px rgba(0,189,174,.3);
}
.bank-name{font-weight:600;font-size:13px;color:var(--muted)}
.card-bank .card-value{font-size:24px}
.card-status{
  display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--muted);margin-top:7px;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--muted);display:inline-block;
  transition:all var(--transition-fast);
}
.status-dot.online{
  background:var(--green);
  box-shadow:0 0 8px rgba(46,204,113,.5);
  animation:statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.6}}
.status-dot.offline{background:var(--red);box-shadow:0 0 6px var(--red-glow)}
.card-detail{font-size:11px;color:var(--muted);margin-top:3px}
.card-total{
  border:1.5px solid var(--primary);border-left:4px solid var(--primary);
  background:var(--primary-surface);
}
.card-subtotal{
  border:1px solid var(--primary);border-left:4px solid var(--primary);
  background:var(--surface);opacity:.9;
}

/* ── NEW: Bank Logo Containers ───────────────────────────────────── */
.bank-logo-bb{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:linear-gradient(145deg,#ffe033,#fce303,#f5c800);
  color:#003768;font-weight:800;font-size:11px;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(252,227,3,.25);
  position:relative;
}
.bank-logo-bb::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3);pointer-events:none;
}
.bank-logo-sicoob{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:linear-gradient(145deg,#004d40,#00695c,#00897b);
  color:#fff;font-weight:800;font-size:11px;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,77,64,.3);
  position:relative;
}
.bank-logo-sicoob::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2);pointer-events:none;
}

/* ── Dashboard Group Selector ────────────────────────────────────── */
.dash-group-selector{
  display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;
  border:1.5px solid var(--border);margin-bottom:14px;width:fit-content;
  box-shadow:var(--shadow-sm);
}
.dash-group-btn{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;background:var(--surface);
  color:var(--text);border:none;font-size:13px;
  font-weight:500;cursor:pointer;
  transition:all var(--transition-fast);
  position:relative;
}
.dash-group-btn:hover{background:var(--card-hover)}
.dash-group-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;
  box-shadow:var(--shadow-primary);
}
.dash-group-section{margin-bottom:6px}
.dash-group-label{
  font-size:12px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;
  margin:0 0 8px;padding-left:2px;
}

/* ── Bank Selector ──────────────────────────────────────────────── */
.bank-selector{
  display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.bank-btn{
  display:flex;align-items:center;gap:9px;
  padding:10px 20px;background:var(--surface);
  color:var(--text);border:none;border-radius:0;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:all var(--transition-fast);
}
.bank-btn:hover{background:var(--card-hover)}
.bank-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;
}
.bank-btn .bank-icon{width:24px;height:24px;font-size:10px;border-radius:6px}

/* ── Quick Filters (segmented control) ───────────────────────────── */
.quick-filters{
  display:inline-flex;gap:0;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-xs);
  padding:3px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.btn-quick{
  padding:5px 13px!important;font-size:12px!important;
  background:transparent;border:none;
  border-radius:4px;color:var(--text);
  transition:all var(--transition-fast);
  font-weight:500;
}
.btn-quick:hover{background:var(--table-hover);color:var(--primary)}
.btn-quick.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;
  box-shadow:0 1px 4px var(--primary-glow);
}

/* ── Boleto Status Checkboxes ─────────────────────────────────────── */
.boleto-status-filters{
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;flex-wrap:wrap;
}
.boleto-status-filters label{
  display:flex;align-items:center;gap:5px;
  font-size:13px;cursor:pointer;user-select:none;
  color:var(--text);transition:color var(--transition-fast);
  font-weight:500;
}
.boleto-status-filters label:hover{color:var(--primary)}
.boleto-status-filters input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--primary);cursor:pointer;
  border-radius:4px;
}
.boleto-status-filters .filter-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  color:var(--muted);letter-spacing:.7px;
}

/* ── Boleto Footer Totals ─────────────────────────────────────────── */
.boleto-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);font-size:13px;
}
.boleto-footer .footer-count{color:var(--muted);font-weight:500}
.boleto-footer .footer-total{
  font-family:var(--font-data);font-weight:700;
  font-size:15px;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
}

/* ── Boleto Detail Modal ──────────────────────────────────────────── */
.modal-boleto{width:620px}
.boleto-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.boleto-header .boleto-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:var(--radius);
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.boleto-header .boleto-title{flex:1}
.boleto-header .boleto-title h2{margin:0;font-size:18px}
.boleto-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px 18px;margin-bottom:18px;
}
.boleto-grid .bg-item{
  padding:10px 0;border-bottom:1px solid var(--border-subtle);
}
.boleto-grid .bg-label{
  font-size:10px;text-transform:uppercase;color:var(--muted);
  letter-spacing:.6px;font-weight:600;
}
.boleto-grid .bg-value{
  font-size:14px;font-weight:500;margin-top:3px;word-break:break-all;
}
.boleto-grid .bg-full{grid-column:1/-1}
.boleto-linhadig{
  font-family:var(--font-data);font-size:13px;
  background:var(--card);padding:12px 14px;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  word-break:break-all;line-height:1.6;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.boleto-linhadig .ld-text{flex:1}
.boleto-linhadig .ld-copy{
  padding:7px 12px;border-radius:var(--radius-xs);
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;cursor:pointer;border:none;font-size:12px;
  white-space:nowrap;font-weight:500;
  transition:all var(--transition-fast);
}
.boleto-linhadig .ld-copy:hover{filter:brightness(1.1);transform:translateY(-1px)}
.boleto-timeline{margin:14px 0;padding-left:18px;border-left:2px solid var(--border)}
.boleto-timeline .bt-item{
  position:relative;padding:7px 0 7px 14px;font-size:12px;
  transition:color var(--transition-fast);
}
.boleto-timeline .bt-item::before{
  content:'';position:absolute;left:-23px;top:11px;
  width:10px;height:10px;border-radius:50%;
  background:var(--muted);border:2px solid var(--surface);
  transition:all var(--transition-fast);
}
.boleto-timeline .bt-item.active::before{
  background:var(--green);
  box-shadow:0 0 8px var(--green-glow);
}
.boleto-timeline .bt-date{color:var(--muted)}

/* ── CP Status Filters ────────────────────────────────────────────── */
.cp-status-filters{
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;flex-wrap:wrap;
}
.cp-status-filters label{
  display:flex;align-items:center;gap:5px;
  font-size:13px;cursor:pointer;user-select:none;
  color:var(--text);font-weight:500;
  transition:color var(--transition-fast);
}
.cp-status-filters label:hover{color:var(--primary)}
.cp-status-filters input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--primary);cursor:pointer;
}
.cp-status-filters .filter-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  color:var(--muted);letter-spacing:.7px;
}

/* ── CP Empresa Filter ───────────────────────────────────────────── */
.cp-empresa-filter{
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;padding:10px 14px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.cp-empresa-filter label{
  display:flex;align-items:center;gap:5px;
  font-size:13px;cursor:pointer;user-select:none;
  color:var(--text);white-space:nowrap;font-weight:500;
  transition:color var(--transition-fast);
}
.cp-empresa-filter label:hover{color:var(--primary)}
.cp-empresa-filter input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--primary);cursor:pointer;
}
.cp-empresa-filter .filter-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  color:var(--muted);letter-spacing:.7px;
}

/* ── SVG Icons ────────────────────────────────────────────────────── */
.svg-icon{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;
}
.svg-icon svg{width:16px;height:16px}
.tab .svg-icon{margin-right:5px}
.tab .svg-icon svg{width:14px;height:14px}

/* ── Inline date input utility ───────────────────────────────────── */
.input-date{
  padding:5px 10px;border:1.5px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-size:13px;
  transition:all var(--transition-fast);
}
.input-date:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.label-muted{font-size:12px;color:var(--muted);font-weight:500}

/* ── CP Search Input ─────────────────────────────────────────────── */
.cp-search-input{
  background:var(--input-bg);border:1.5px solid var(--border);
  border-radius:var(--radius-xs);
  color:var(--text);padding:7px 14px;font-size:13px;width:240px;
  font-family:var(--font-body);
  transition:border var(--transition-fast),width var(--transition-med),box-shadow var(--transition-fast);
}
.cp-search-input:focus{
  border-color:var(--primary);outline:none;width:300px;
  box-shadow:0 0 0 3px var(--primary-glow);
}
.cp-search-input::placeholder{color:var(--muted);opacity:.6}

/* ── CP Source Divider ──────────────────────────────────────────── */
.cp-source-divider{
  width:1px;height:30px;
  background:linear-gradient(180deg,transparent,var(--border),transparent);
  margin:0 4px;align-self:center;
}

/* ── Bank Config (Admin) ────────────────────────────────────────── */
#bankConfigBody select{
  padding:5px 10px;font-size:13px;border:1.5px solid var(--border);
  background:var(--input-bg);color:var(--text);border-radius:var(--radius-xs);
  transition:border var(--transition-fast);
}
#bankConfigBody select:focus{border-color:var(--primary)}
#bankConfigBody td{padding:8px 12px;vertical-align:middle}

/* ====================================================================
   NEW CLASSES
   ==================================================================== */

/* ── NEW: Company Filter Pills ───────────────────────────────────── */
.empresa-filter{
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;flex-wrap:wrap;
}
.empresa-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);
  transition:all var(--transition-fast);
  user-select:none;
}
.empresa-pill:hover{
  border-color:var(--primary);
  background:var(--primary-surface);
  transform:translateY(-1px);
}
.empresa-pill.active{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:#fff;
  box-shadow:0 2px 8px var(--primary-glow);
}
.empresa-pill::before{
  content:'';display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--muted);flex-shrink:0;
  transition:background var(--transition-fast);
}
.empresa-pill.active::before{background:#fff}
.empresa-pill[data-color="blue"]::before{background:#3b82f6}
.empresa-pill[data-color="green"]::before{background:#22c55e}
.empresa-pill[data-color="orange"]::before{background:#f97316}
.empresa-pill[data-color="purple"]::before{background:#a855f7}
.empresa-pill[data-color="red"]::before{background:#ef4444}

/* ── NEW: Protest Warning Banner ─────────────────────────────────── */
.sort-arrow{font-size:10px;color:var(--primary);margin-left:2px}
th[data-bolsort]:hover{color:var(--primary)}
tr.row-selected{background:rgba(59,130,246,.08) !important}
tr.row-selected td{border-color:rgba(59,130,246,.2)}
#boletosBody tr{cursor:pointer;transition:background .15s}
#boletosBody tr:hover{background:rgba(255,255,255,.03)}
.selection-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;margin-bottom:8px;
  background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(99,102,241,.08));
  border:1.5px solid rgba(59,130,246,.3);
  border-radius:var(--radius);
  color:var(--text);font-size:13px;
  animation:protestSlideIn .3s var(--ease-out-expo);
}
.protest-alert{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(234,88,12,.08));
  border:1.5px solid rgba(239,68,68,.3);
  border-radius:var(--radius);
  color:var(--text);font-size:13px;font-weight:500;
  position:relative;overflow:hidden;
  animation:protestSlideIn .4s var(--ease-out-expo);
}
@keyframes protestSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.protest-alert::before{
  content:'';display:block;width:10px;height:10px;border-radius:50%;
  background:var(--red);flex-shrink:0;
  box-shadow:0 0 10px var(--red-glow);
  animation:protestPulse 1.5s ease-in-out infinite;
}
@keyframes protestPulse{
  0%,100%{opacity:1;box-shadow:0 0 6px var(--red-glow)}
  50%{opacity:.5;box-shadow:0 0 16px rgba(239,68,68,.4)}
}
.protest-alert .protest-text{flex:1;line-height:1.4}
.protest-alert .protest-count{
  font-family:var(--font-data);font-size:20px;font-weight:700;
  color:var(--red);white-space:nowrap;
}
.protest-alert .protest-dismiss{
  background:transparent;border:1px solid rgba(239,68,68,.3);
  color:var(--muted);padding:4px 10px;border-radius:var(--radius-xs);
  font-size:11px;cursor:pointer;transition:all var(--transition-fast);
}
.protest-alert .protest-dismiss:hover{
  border-color:var(--red);color:var(--red);background:var(--red-glow);
}

/* ── NEW: Days Overdue Indicator ─────────────────────────────────── */
.days-overdue{
  display:inline-flex;align-items:center;
  padding:2px 10px;border-radius:20px;
  font-family:var(--font-data);font-size:11px;font-weight:700;
  white-space:nowrap;
}
.days-overdue.low{
  background:linear-gradient(135deg,rgba(245,185,66,.18),rgba(245,185,66,.08));
  color:var(--yellow);border:1px solid rgba(245,185,66,.2);
}
.days-overdue.medium{
  background:linear-gradient(135deg,rgba(237,137,54,.2),rgba(237,137,54,.08));
  color:var(--orange);border:1px solid rgba(237,137,54,.25);
}
.days-overdue.high{
  background:linear-gradient(135deg,rgba(240,96,112,.22),rgba(240,96,112,.08));
  color:var(--red);border:1px solid rgba(240,96,112,.25);
}
.days-overdue.critical{
  background:linear-gradient(135deg,rgba(185,28,28,.25),rgba(127,29,29,.12));
  color:#fca5a5;border:1px solid rgba(185,28,28,.35);
  animation:overduePulse 2s ease-in-out infinite;
}
@keyframes overduePulse{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 8px var(--red-glow)}
}

/* ── NEW: Data refresh shimmer ───────────────────────────────────── */
@keyframes dataRefresh{
  0%{opacity:1}
  50%{opacity:.5}
  100%{opacity:1}
}
.data-refreshing{animation:dataRefresh .8s ease-in-out}

/* ── Utility: Glass Panel ────────────────────────────────────────── */
.glass{
  background:var(--topbar-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border:1px solid var(--border);
}

/* ── Utility: Fade-in animation ──────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .3s var(--ease-out-expo)}

/* ── Utility: Subtle card glow on success/error ──────────────────── */
.card-flash-success{animation:flashGreen .6s ease-out}
@keyframes flashGreen{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.4)}
  100%{box-shadow:var(--shadow)}
}
.card-flash-error{animation:flashRed .6s ease-out}
@keyframes flashRed{
  0%{box-shadow:0 0 0 0 rgba(240,96,112,.4)}
  100%{box-shadow:var(--shadow)}
}

/* ── Utility: Empty state ────────────────────────────────────────── */
.empty-state{
  text-align:center;padding:48px 24px;color:var(--muted);
  font-size:14px;
}
.empty-state-icon{font-size:36px;margin-bottom:12px;opacity:.4}
.empty-state-text{font-weight:500}

/* ── Utility: Truncate ───────────────────────────────────────────── */
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* ── Utility: Tooltip ────────────────────────────────────────────── */
[data-tooltip]{position:relative}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%) scale(.9);
  background:var(--surface);color:var(--text);
  padding:5px 10px;border-radius:var(--radius-xs);
  font-size:11px;white-space:nowrap;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  opacity:0;pointer-events:none;
  transition:all var(--transition-fast);
  z-index:50;
}
[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

/* ====================================================================
   AGING BARS (CR)
   ==================================================================== */
.aging-bar{display:flex;gap:4px;margin:8px 0}
.aging-band{flex:1;padding:10px;border-radius:8px;text-align:center}
.aging-band.band-30{background:rgba(245,158,11,.15);color:#d97706}
.aging-band.band-60{background:rgba(249,115,22,.15);color:#ea580c}
.aging-band.band-90{background:rgba(239,68,68,.15);color:#dc2626}
.aging-band.band-120{background:rgba(190,18,60,.15);color:#be123c}
.aging-band.band-plus{background:rgba(127,29,29,.15);color:#991b1b}
.aging-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.aging-value{font-size:18px;font-weight:700;margin-top:4px}
.aging-qty{font-size:11px;opacity:.7}

/* ====================================================================
   CONCILIATION STYLES
   ==================================================================== */
.conciliacao-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.conciliacao-section{background:var(--card);border-radius:var(--radius);padding:16px;border:1px solid var(--border)}
.match-candidate{padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.match-candidate:hover{border-color:var(--green);background:rgba(16,185,129,.05)}
.match-candidate.selected{border-color:var(--green);background:rgba(16,185,129,.1)}
.match-score{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--green);color:#fff;font-weight:600}

/* ====================================================================
   ALERT BELL
   ==================================================================== */
.alert-bell{position:relative;cursor:pointer;padding:6px;border-radius:8px;transition:background .2s}
.alert-bell:hover{background:rgba(255,255,255,.1)}
.alert-count{position:absolute;top:0;right:0;background:var(--red, #ef4444);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.alert-dropdown{position:absolute;top:100%;right:0;width:320px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:100;max-height:400px;overflow-y:auto}
.alert-item{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px}
.alert-item.unread{background:rgba(59,130,246,.05)}
.alert-item .alert-time{font-size:10px;color:var(--muted)}

/* ====================================================================
   FLUXO DE CAIXA CHART
   ==================================================================== */
.fluxo-chart{display:flex;align-items:flex-end;gap:3px;height:200px;padding:10px 0}
.fluxo-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.fluxo-bar{width:100%;border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.fluxo-bar.entrada{background:var(--green, #10b981)}
.fluxo-bar.saida{background:var(--red, #ef4444)}
.fluxo-label{font-size:9px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.fluxo-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:11px}
.fluxo-legend-item{display:flex;align-items:center;gap:4px}
.fluxo-legend-dot{width:10px;height:10px;border-radius:50%}

/* ====================================================================
   EXPORT BUTTON
   ==================================================================== */
.btn-export{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:11px;background:rgba(16,185,129,.1);color:var(--green, #10b981);border:1px solid rgba(16,185,129,.3);border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s}
.btn-export:hover{background:rgba(16,185,129,.2)}

/* ====================================================================
   FINANCIAL SUMMARY CARDS (DASHBOARD)
   ==================================================================== */
.fin-summary{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px;margin-bottom:16px}
.fin-card{padding:14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);text-align:center}
.fin-card .fin-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.fin-card .fin-value{font-size:22px;font-weight:700;margin-top:4px}
.fin-card.positive .fin-value{color:var(--green)}
.fin-card.negative .fin-value{color:var(--red)}
.fin-card.neutral .fin-value{color:var(--primary)}

/* ====================================================================
   TAB BADGE
   ==================================================================== */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;margin-left:4px}
.tab-badge:empty{display:none}

/* ====================================================================
   MOBILE RESPONSIVE
   ==================================================================== */
@media (max-width: 768px) {
  .content{padding:14px}
  .topbar{
    padding:10px 14px;flex-wrap:wrap;gap:8px;
    position:sticky;top:0;
  }
  .logo{font-size:16px}
  .topbar-right{gap:8px}
  .user-info{font-size:11px}
  .tabs{
    padding:0 10px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:9px 14px;font-size:12px;white-space:nowrap}
  .tab.active::after{left:8px;right:8px}
  .cards{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;margin-bottom:14px;
  }
  .card{padding:15px 17px;border-radius:var(--radius-sm)}
  .card-value{font-size:20px}
  .card-bank .card-value{font-size:18px}
  .table-toolbar{gap:6px}
  .table-toolbar input[type="date"]{width:120px;font-size:12px;padding:6px 8px}
  .quick-filters{gap:2px}
  .btn-quick{padding:4px 9px!important;font-size:11px!important}
  .bank-selector{flex-wrap:wrap}
  .bank-btn{padding:8px 12px;font-size:12px}
  .section-title{font-size:14px}

  /* Tables to stacked cards on mobile */
  .table-wrap table thead{display:none}
  .table-wrap table tbody tr{
    display:block;margin-bottom:10px;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:14px;background:var(--card);
    box-shadow:var(--shadow-sm);
  }
  .table-wrap table tbody td{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;border:none;font-size:13px;
  }
  .table-wrap table tbody td::before{
    content:attr(data-label);font-weight:600;color:var(--muted);
    font-size:11px;text-transform:uppercase;flex-shrink:0;margin-right:10px;
    letter-spacing:.4px;
  }
  .table-wrap table tbody td:empty{display:none}
  .table-wrap table tbody tr:hover{background:var(--card)}
  .td-money{text-align:left}

  /* Buttons: touch-friendly */
  .btn{min-height:44px;padding:10px 16px}
  .btn-sm{min-height:36px;padding:6px 12px}
  .btn-login{min-height:48px}
  .btn-logout{min-height:36px}

  /* Modals: fullscreen on mobile */
  .modal{
    width:100vw;max-width:100vw;
    border-radius:16px 16px 0 0;max-height:95vh;
    padding:22px;
  }
  .modal-boleto{width:100vw}
  .modal-qr{width:100vw}
  .boleto-grid{grid-template-columns:1fr}

  /* Cards mobile divider */
  .cards{gap:8px}
  .card{min-height:auto}

  /* Boleto/CP filters */
  .boleto-status-filters,.cp-status-filters{gap:8px}
  .boleto-status-filters label,.cp-status-filters label{font-size:12px}

  /* Stagger animation off on mobile (performance) */
  .tab-panel.active .card{animation:none}
  .tab-panel.active .table-wrap{animation:none}

  /* Login */
  .login-box{width:95vw;padding:28px 22px;border-radius:14px}
  .login-box h1{font-size:20px}

  /* Company pills mobile */
  .empresa-filter{gap:6px}
  .empresa-pill{padding:4px 10px;font-size:11px}

  /* Protest banner mobile */
  .protest-alert{flex-wrap:wrap;padding:12px 14px}
  .protest-alert .protest-count{font-size:16px}

  /* CP filter */
  .cp-empresa-filter{padding:8px 10px;gap:8px}
  .cp-search-input{width:100%}
  .cp-search-input:focus{width:100%}

  /* Conciliation grid: stack on mobile */
  .conciliacao-grid{grid-template-columns:1fr}

  /* Aging bands: wrap on mobile */
  .aging-bar{flex-wrap:wrap}
  .aging-band{min-width:calc(50% - 4px);flex:none}
  .aging-value{font-size:15px}

  /* Fin summary: 2 cols on mobile */
  .fin-summary{grid-template-columns:repeat(2,1fr)}
  .fin-card .fin-value{font-size:17px}
}

/* ── Small mobile (< 480px) ──────────────────────────────────────── */
/* ── Dashboard Financeiro Avançado ────────────────────────────────── */
.kpi-grid{grid-template-columns:repeat(4,1fr)}
.kpi-trend{font-size:11px;margin-top:2px;font-family:var(--font-data)}
.kpi-trend.up{color:var(--red)}
.kpi-trend.down{color:var(--green)}
.kpi-trend.up-good{color:var(--green)}
.kpi-trend.down-bad{color:var(--red)}
.kpi-trend.neutral{color:var(--muted)}
.fin-sub{font-size:10px;color:var(--muted);margin-top:2px}

.stacked-bar-wrap{position:relative}
.stacked-bar{display:flex;height:32px;border-radius:6px;overflow:hidden;width:100%}
.stacked-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:600;cursor:default;transition:opacity .2s;min-width:2px}
.stacked-seg:hover{opacity:.85}
.stacked-labels{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.stacked-label{font-size:10px;color:var(--text-secondary);display:flex;align-items:center;gap:4px}
.stacked-label .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

.mini-table{width:100%;border-collapse:collapse;font-size:12px}
.mini-table th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--border-subtle);font-weight:600}
.mini-table td{padding:5px 8px;border-bottom:1px solid var(--border-subtle)}
.mini-table tr:last-child td{border-bottom:none}

.badge-red{background:var(--red);color:#fff;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;margin-left:6px}
.badge-green{background:var(--green);color:#fff;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;margin-left:6px}

.fluxo-toggle{display:inline-flex;gap:4px;margin-left:12px;vertical-align:middle}
.fluxo-line-chart{width:100%;min-height:220px;position:relative}
.fluxo-alert{padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;margin-bottom:10px}
.fluxo-alert-danger{background:rgba(var(--red-rgb,239,68,68),.12);color:var(--red);border:1px solid rgba(var(--red-rgb,239,68,68),.25)}
.fluxo-alert-ok{background:rgba(var(--green-rgb,34,197,94),.10);color:var(--green);border:1px solid rgba(var(--green-rgb,34,197,94),.2)}

.cobranca-table{width:100%;border-collapse:collapse;font-size:12px}
.cobranca-table th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border-subtle);font-weight:600;white-space:nowrap}
.cobranca-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.cobranca-table tr:hover{background:var(--surface-hover)}
.cobranca-nivel{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}
.cobranca-nivel.lembrete{background:rgba(var(--yellow-rgb,234,179,8),.15);color:var(--yellow)}
.cobranca-nivel.cobranca{background:rgba(var(--orange-rgb,249,115,22),.15);color:var(--orange)}
.cobranca-nivel.protesto{background:rgba(var(--red-rgb,239,68,68),.15);color:var(--red)}
.btn-whatsapp{background:#25D366;color:#fff;border:none;padding:5px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}
.btn-whatsapp:hover{background:#1da851}

@media (max-width: 768px) {
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 480px) {
  .content{padding:10px}
  .topbar{padding:8px 10px}
  .cards{grid-template-columns:1fr 1fr;gap:8px}
  .card{padding:12px 14px}
  .card-value{font-size:18px}
  .card-label{font-size:10px;letter-spacing:.5px}
  .bank-selector{gap:0}
  .bank-btn{padding:6px 10px;font-size:11px;gap:5px}
  .modal{padding:18px;border-radius:14px 14px 0 0}
  .boleto-footer{padding:10px 12px;font-size:12px}
  .boleto-footer .footer-total{font-size:13px}
}

/* ── Landscape mobile ────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .login-wrap{min-height:auto;padding:20px 0}
  .login-box{padding:20px 24px}
  .modal{max-height:98vh}
}

/* ── Large screens (1600px+) ─────────────────────────────────────── */
@media (min-width: 1600px) {
  .content{max-width:1560px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
}

/* ── Reduce motion (accessibility) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}