/* ====================================================================
   Caixa-Sicoob  |  CARBON Design System
   v4.0 - Industrial Precision x Fintech Elegance
   ==================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#fff}

:root{
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-med: 0.2s ease;
  --transition-slow: 0.3s ease;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --gradient-1: linear-gradient(135deg, #19c6a6 0%, #6d76bf 100%);
  --gradient-2: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}

/* DARK (CARBON) — paleta refinada 2026-05-30: neutros ricos, 1 acento, cor só com significado, glows suaves */
[data-theme="dark"]{
  --bg:#0b0d12;--bg-subtle:#0f1117;--surface:#13161f;--surface-hover:#191d28;
  --card:#13161f;--card-hover:#191d28;
  --border:rgba(255,255,255,0.07);--border-subtle:rgba(255,255,255,0.045);
  --text:#e9edf5;--text-secondary:#98a2b3;--muted:#586173;
  --primary:#19c6a6;--primary-hover:#15ad90;
  --primary-glow:rgba(25,198,166,0.12);--primary-surface:rgba(25,198,166,0.05);
  --accent:#19c6a6;--accent-2:#7e86c6;
  --green:#41b07f;--green-glow:rgba(65,176,127,.10);
  --red:#e05766;--red-glow:rgba(224,87,102,.09);
  --yellow:#d6a13c;--yellow-glow:rgba(214,161,60,.10);
  --orange:#df7d48;
  --input-bg:#0b0d12;--input-border:rgba(255,255,255,0.08);
  --topbar-bg:rgba(11,13,18,0.85);
  --badge-blue-bg:rgba(126,134,198,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);--shadow-xl:0 8px 32px rgba(0,0,0,.7);
  --shadow-primary:0 2px 12px rgba(25,198,166,.12);
  --card-accent:#19c6a6;--card-accent-glow:rgba(25,198,166,.05);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.04);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(255,255,255,.08);--scrollbar-thumb-hover:rgba(255,255,255,.16);
  --skeleton-base:#191d28;--skeleton-shine:rgba(255,255,255,.04);
}

/* LIGHT — paleta refinada 2026-05-30: casa com o dark (teal calmo, índigo dessat, cor só com significado) */
[data-theme="light"]{
  --bg:#f5f7fa;--bg-subtle:#eceff4;--surface:#ffffff;--surface-hover:#f7f9fc;
  --card:#ffffff;--card-hover:#f7f9fc;
  --border:rgba(15,23,42,0.08);--border-subtle:rgba(15,23,42,0.05);
  --text:#1a2236;--text-secondary:#475067;--muted:#6b7589;
  --primary:#10a98c;--primary-hover:#0c8f76;
  --primary-glow:rgba(16,169,140,.10);--primary-surface:rgba(16,169,140,.05);
  --accent:#10a98c;--accent-2:#6b73c4;
  --green:#15784f;--green-glow:rgba(21,120,79,.08);
  --red:#d23a57;--red-glow:rgba(210,58,87,.07);
  --yellow:#b9802a;--yellow-glow:rgba(185,128,42,.08);
  --orange:#c2510c;
  --input-bg:#ffffff;--input-border:rgba(15,23,42,0.12);
  --topbar-bg:rgba(255,255,255,0.9);
  --badge-blue-bg:rgba(107,115,196,.10);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow:0 2px 8px rgba(15,23,42,.07);
  --shadow-lg:0 4px 16px rgba(15,23,42,.09);--shadow-xl:0 8px 32px rgba(15,23,42,.12);
  --shadow-primary:0 2px 8px rgba(16,169,140,.12);
  --card-accent:#10a98c;--card-accent-glow:rgba(16,169,140,.05);
  --table-stripe:rgba(15,23,42,.015);--table-hover:rgba(15,23,42,.03);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(15,23,42,.12);--scrollbar-thumb-hover:rgba(15,23,42,.2);
  --skeleton-base:#eceff4;--skeleton-shine:rgba(255,255,255,.7);
}

/* MIDNIGHT */
[data-theme="midnight"]{
  --bg:#08090d;--bg-subtle:#0d0f15;--surface:#13151d;--surface-hover:#1a1d28;
  --card:#13151d;--card-hover:#1a1d28;
  --border:rgba(255,255,255,0.06);--border-subtle:rgba(255,255,255,0.04);
  --text:#eef0f6;--text-secondary:#9da4b4;--muted:#5c6478;
  --primary:#818cf8;--primary-hover:#6366f1;
  --primary-glow:rgba(129,140,248,.12);--primary-surface:rgba(129,140,248,.06);
  --accent:#818cf8;--accent-2:#a855f7;
  --green:#34d399;--green-glow:rgba(52,211,153,.08);
  --red:#f87171;--red-glow:rgba(248,113,113,.08);
  --yellow:#fbbf24;--yellow-glow:rgba(251,191,36,.08);
  --orange:#fb923c;
  --input-bg:#0d0f15;--input-border:rgba(255,255,255,0.08);
  --topbar-bg:rgba(8,9,13,0.85);
  --badge-blue-bg:rgba(129,140,248,.1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);--shadow-xl:0 8px 32px rgba(0,0,0,.7);
  --shadow-primary:0 2px 8px rgba(129,140,248,.12);
  --card-accent:#818cf8;--card-accent-glow:rgba(129,140,248,.06);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.04);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(255,255,255,.08);--scrollbar-thumb-hover:rgba(255,255,255,.16);
  --skeleton-base:#13151d;--skeleton-shine:rgba(255,255,255,.04);
}

/* OCEAN */
[data-theme="ocean"]{
  --bg:#0a1020;--bg-subtle:#0e1628;--surface:#141e34;--surface-hover:#1a2840;
  --card:#141e34;--card-hover:#1a2840;
  --border:rgba(255,255,255,0.06);--border-subtle:rgba(255,255,255,0.04);
  --text:#e2e8f0;--text-secondary:#94a3b8;--muted:#64748b;
  --primary:#38bdf8;--primary-hover:#0ea5e9;
  --primary-glow:rgba(56,189,248,.12);--primary-surface:rgba(56,189,248,.06);
  --accent:#38bdf8;--accent-2:#2dd4bf;
  --green:#2dd4bf;--green-glow:rgba(45,212,191,.08);
  --red:#fb7185;--red-glow:rgba(251,113,133,.08);
  --yellow:#facc15;--yellow-glow:rgba(250,204,21,.08);
  --orange:#fb923c;
  --input-bg:#0e1628;--input-border:rgba(255,255,255,0.08);
  --topbar-bg:rgba(10,16,32,0.85);
  --badge-blue-bg:rgba(56,189,248,.1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,.5);--shadow-xl:0 8px 32px rgba(0,0,0,.6);
  --shadow-primary:0 2px 8px rgba(56,189,248,.12);
  --card-accent:#38bdf8;--card-accent-glow:rgba(56,189,248,.06);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.035);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(255,255,255,.08);--scrollbar-thumb-hover:rgba(255,255,255,.16);
  --skeleton-base:#141e34;--skeleton-shine:rgba(255,255,255,.04);
}

/* CREAM */
[data-theme="cream"]{
  --bg:#faf8f5;--bg-subtle:#f0ede7;--surface:#ffffff;--surface-hover:#faf8f5;
  --card:#ffffff;--card-hover:#fcfaf7;
  --border:rgba(0,0,0,0.06);--border-subtle:rgba(0,0,0,0.04);
  --text:#1c1917;--text-secondary:#44403c;--muted:#78716c;
  --primary:#b45309;--primary-hover:#92400e;
  --primary-glow:rgba(180,83,9,.1);--primary-surface:rgba(180,83,9,.04);
  --accent:#b45309;--accent-2:#a16207;
  --green:#15803d;--green-glow:rgba(21,128,61,.06);
  --red:#b91c1c;--red-glow:rgba(185,28,28,.06);
  --yellow:#a16207;--yellow-glow:rgba(161,98,7,.06);
  --orange:#c2410c;
  --input-bg:#faf8f5;--input-border:rgba(0,0,0,0.1);
  --topbar-bg:rgba(255,255,255,0.9);
  --badge-blue-bg:rgba(180,83,9,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow:0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:0 4px 12px rgba(0,0,0,.07);--shadow-xl:0 8px 24px rgba(0,0,0,.1);
  --shadow-primary:0 2px 8px rgba(180,83,9,.08);
  --card-accent:#b45309;--card-accent-glow:rgba(180,83,9,.04);
  --table-stripe:rgba(0,0,0,.015);--table-hover:rgba(0,0,0,.03);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(0,0,0,.1);--scrollbar-thumb-hover:rgba(0,0,0,.18);
  --skeleton-base:#f0ede7;--skeleton-shine:rgba(255,255,255,.5);
}

/* Scrollbars */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}

/* Body */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  min-height:100vh;
  line-height:1.5;
  -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-sm);
  padding:8px 16px;
  transition:all var(--transition-fast);
}

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

: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}

/* 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);
}
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:1px 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);
}
.login-wrap::before{display:none}
.login-box{
  background:var(--surface);
  backdrop-filter:blur(20px);
  padding:44px 40px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  width:400px;
  text-align:center;
  box-shadow:var(--shadow-xl);
  animation:loginAppear .4s var(--ease-out);
}
@keyframes loginAppear{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.login-box h1{
  font-size:24px;margin-bottom:4px;font-weight:800;letter-spacing:-.5px;
  background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.login-box p{color:var(--muted);margin-bottom:28px;font-size:14px;font-weight:500}
.field{margin-bottom:16px;text-align:left}
.field label{
  display:block;font-size:11px;color:var(--muted);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.6px;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:12px;
  background:var(--gradient-1);
  color:#fff;font-weight:700;font-size:14px;
  border-radius:var(--radius-xs);margin-top:10px;
  transition:all var(--transition-fast);
  box-shadow:0 4px 14px rgba(0,212,170,.25);
}
.btn-login:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,212,170,.3)}
.btn-login:active{transform:translateY(0);opacity:.85}

/* Topbar */
.app{display:none}.app.active{display:block}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;
  background:var(--topbar-bg);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  transition:background var(--transition-slow);
}
.logo{
  font-weight:800;font-size:18px;letter-spacing:-.5px;
  display:flex;align-items:center;gap:2px;
}
.logo span{
  background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:600;
}
.topbar-right{display:flex;align-items:center;gap:12px}
.user-info{font-size:13px;font-weight:500}
.btn-logout{
  padding:6px 14px;background:transparent;
  border:1px solid var(--border);color:var(--muted);font-size:12px;
  border-radius:20px;font-weight:500;
  transition:all var(--transition-fast);
}
.btn-logout:hover{border-color:var(--red);color:var(--red)}
.btn-theme{
  background:transparent;border:1px solid var(--border);
  color:var(--muted);padding:6px 10px;font-size:16px;line-height:1;
  border-radius:20px;
  transition:all var(--transition-fast);
}
.btn-theme:hover{border-color:var(--primary);color:var(--primary)}

/* Tabs */
.tabs{
  display:flex;gap:2px;padding:0 20px;
  background:var(--topbar-bg);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  position:sticky;top:45px;z-index:99;
  transition:background var(--transition-slow);
}
.tab{
  padding:10px 16px;cursor:pointer;
  font-size:13px;font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:all var(--transition-fast);
  position:relative;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--radius-xs) var(--radius-xs) 0 0;
}
.tab:hover{color:var(--text);background:var(--surface-hover)}
.tab.active{
  color:var(--text);
  font-weight:600;
  border-bottom:2px solid transparent;
  background:transparent;
}
.tab.active::after{
  content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;
  background:var(--gradient-1);border-radius:2px 2px 0 0;
}

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

/* Staggered Animation */
@keyframes slideUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.tab-panel.active .card{animation:slideUp .3s var(--ease-out) 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 .3s var(--ease-out) .1s both}
.tab-panel.active .section-title{animation:slideUp .25s var(--ease-out) both}
.tab-panel.active .table-toolbar{animation:slideUp .25s var(--ease-out) .05s both}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin-bottom:20px;
}
.card{
  background:var(--card);
  backdrop-filter:blur(20px);
  padding:20px 22px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  min-height:88px;
  transition:all var(--transition-med);
  position:relative;
  overflow:hidden;
}
.card::before{display:none}
.card:hover{
  border-color:rgba(255,255,255,0.12);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.card-label{
  font-size:11px;text-transform:uppercase;color:var(--muted);
  letter-spacing:.6px;margin-bottom:8px;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.card-label::before{display:none}
.card-value{
  font-family:var(--font-data);font-size:28px;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:4px}
/* [28/07] Cards do extrato: valor de 6 digitos (R$ 395.928,36) estourava os 28px
   fixos e o numero saia cortado pela borda do card. Escopado ao extrato. */
#extEntradas,#extSaidas,#extSaldo,#extTarifas,#extBancoSaldo{font-size:clamp(17px,1.55vw,28px);white-space:nowrap}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.orange{color:var(--orange)}

/* Card accent variants */
.card--danger{border-left:3px solid var(--red)}
.card--danger .card-label::before{display:none}
.card--danger::before{display:none}
.card--warning{border-left:3px solid var(--yellow)}
.card--warning .card-label::before{display:none}
.card--warning::before{display:none}
.card--success{border-left:3px solid var(--green)}
.card--success .card-label::before{display:none}
.card--success::before{display:none}
.card--info{border-left:3px solid var(--primary)}
.card--info .card-label::before{display:none}

/* Table Wrap */
.table-wrap{
  overflow-x:auto;background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
}
.table-toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;flex-wrap:wrap;
}
.section-title{
  font-size:15px;font-weight:700;margin-bottom:12px;
  padding-left:12px;border-left:3px solid var(--primary);
  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 */
/* ── Sistema de botões premium unificado ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:600;line-height:1;
  border-radius:var(--radius-sm);
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),filter var(--transition-fast),color var(--transition-fast);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn-primary{
  background:var(--gradient-1);color:#fff;border:none;
  box-shadow:0 3px 12px var(--primary-glow);
}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 5px 18px var(--primary-glow)}
.btn-primary:active{filter:brightness(.97)}
.btn-secondary{
  background:var(--surface);color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-secondary:hover{border-color:var(--primary);color:var(--text);background:var(--card-hover)}
.btn-success{background:var(--green);color:#fff;border:none}
.btn-success:hover{filter:brightness(1.07)}
.btn-danger{background:var(--red-glow);color:var(--red);border:1px solid transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-warn{background:var(--yellow-glow);color:var(--yellow);border:1px solid transparent}
.btn-warn:hover{background:var(--yellow);color:#13151e}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid transparent}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text)}
.btn-sm{padding:5px 10px;font-size:11px;border-radius:var(--radius-xs)}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:var(--radius-xs);font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary)}
.btn-xs:hover{border-color:var(--primary);color:var(--text)}

/* WhatsApp Button */
.btn-whatsapp{
  background:#25D366;color:#fff;font-weight:600;
  padding:8px 16px;border-radius:var(--radius-xs);
  transition:all var(--transition-fast);
  display:inline-flex;align-items:center;gap:6px;
}
.btn-whatsapp:hover{background:#1da851}
.btn-whatsapp:active{opacity:.9}
.btn-whatsapp::before{
  content:'';display:inline-block;width:16px;height:16px;
  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;
}
.badge-green{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.badge-red{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.badge-yellow{background:rgba(245,158,11,.1);color:var(--yellow);border:1px solid rgba(245,158,11,.15)}
.badge-gray{background:rgba(136,136,136,.1);color:var(--muted);border:1px solid rgba(136,136,136,.12)}
.badge-blue{background:var(--badge-blue-bg);color:var(--primary);border:1px solid rgba(99,102,241,.15)}
.badge-purple{background:rgba(168,85,247,.1);color:#a78bfa;border:1px solid rgba(168,85,247,.15)}

/* Import Status Badges */
.badge-importada{background:rgba(34,197,94,.1);color:var(--green);font-size:10px;padding:3px 8px;border-radius:20px;border:1px solid rgba(34,197,94,.15);font-weight:600}
.badge-nao-importada{background:rgba(136,136,136,.08);color:var(--muted);font-size:10px;padding:3px 8px;border-radius:20px;border:1px solid rgba(136,136,136,.1);font-weight:600}

/* Notify */
.notify{
  position:fixed;top:-60px;left:50%;transform:translateX(-50%);
  padding:12px 28px;border-radius:var(--radius);
  font-weight:600;z-index:9999;
  transition:top .3s var(--ease-out);
  font-size:13px;
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-lg);
}
.notify.show{top:16px}
.notify-info{background:var(--primary);color:#fff;border-color:var(--primary)}
.notify-success{background:var(--green);color:#fff;border-color:var(--green)}
.notify-error{background:var(--red);color:#fff;border-color:var(--red)}

/* Modals */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  z-index:1000;align-items:center;justify-content:center;
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--surface);
  backdrop-filter:blur(20px);
  border-radius:var(--radius);
  padding:28px;
  width:440px;max-width:95vw;max-height:90vh;
  overflow-y:auto;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xl);
  animation:modalAppear .25s var(--ease-out);
}
@keyframes modalAppear{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  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:8px;margin-top:18px}

/* QR Modal */
.modal-qr{width:480px}
.qr-header{text-align:center;margin-bottom:12px}
.qr-header h2{margin-bottom:8px}
.qr-order-info{
  background:var(--card);border-radius:var(--radius-sm);
  padding:12px 14px;text-align:left;
  border:1px solid var(--border);
}
.qr-info-row{
  display:flex;justify-content:space-between;
  padding:3px 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:12px 0}
.pix-valor{
  font-family:var(--font-data);font-size:34px;font-weight:700;
  color:var(--green);margin-bottom:12px;
  letter-spacing:.5px;font-variant-numeric:tabular-nums;
}
.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:8px;padding:8px;background:var(--card);
  border-radius:var(--radius-xs);cursor:pointer;
  border:1px solid var(--border);
  transition:border-color var(--transition-fast);
}
.pix-copia-cola:hover{border-color:var(--primary)}
.qr-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.qr-whatsapp{
  background:var(--card);border-radius:var(--radius-sm);
  padding:12px;margin:10px 0;border:1px solid var(--border);
}
.qr-wa-title{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--green)}
.qr-phone-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.qr-phone-btn{
  padding:6px 12px;border-radius:20px;
  background:var(--surface);border:1px 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(34,197,94,.06)}
.qr-phone-btn .wa-tag{color:var(--green);font-weight:700;margin-left:4px;font-size:10px}

/* Auto PIX */
.modal-auto-pix{border:2px solid var(--green)}
@keyframes autoPixPulse{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 0 4px var(--green-glow)}
}
.auto-pix-badge{
  position:absolute;top:-8px;right:-8px;
  background:var(--red);color:#fff;border-radius:50%;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* Live Refresh Animations */
@keyframes liveRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes liveRowOut{from{opacity:1;max-height:80px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-color:transparent}}
@keyframes liveHighlight{0%{background:rgba(59,130,246,.12)}100%{background:transparent}}
@keyframes liveCardPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

.live-row-in{animation:liveRowIn .35s var(--ease-out) forwards}
.live-row-out{animation:liveRowOut .35s ease forwards;pointer-events:none;overflow:hidden}
.live-row-changed{animation:liveHighlight 1.2s ease forwards}
.live-card-pulse{animation:liveCardPulse .3s ease}

table tbody tr{transition:opacity .25s ease,background .3s ease}
.card-value{transition:opacity .2s ease,transform .2s ease}
.card-value.live-updating{opacity:.5;transform:scale(.97)}

.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px;animation:liveDotPulse 2s ease infinite}
@keyframes liveDotPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Print */
@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:20px;height:20px;
  border:2px 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:88px;border-radius:var(--radius)}

/* Bank Cards */
.card-bank{position:relative;overflow:hidden}
.card-bank::after{display:none}
.card-bank-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bank-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-sm);
  font-weight:800;font-size:11px;color:#fff;flex-shrink:0;
}
.bank-icon::after{display:none}
.bank-sicoob{background:var(--surface)}
.bank-bb{background:var(--surface)}
.bank-total{background:var(--primary)}
.bank-pix{background:#00bdae}
.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:6px;font-size:11px;color:var(--muted);margin-top:6px}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);display:inline-block;
}
.status-dot.online{background:var(--green)}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.6}}
.status-dot.offline{background:var(--red)}
.card-detail{font-size:11px;color:var(--muted);margin-top:3px}
.card-total{border:1px solid var(--primary);background:var(--primary-surface)}
.card-subtotal{border:1px solid var(--primary);background:var(--surface);opacity:.9}

/* Bank Logo Containers */
.bank-logo-bb{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-sm);
  background:#fce303;color:#003768;font-weight:800;font-size:10px;flex-shrink:0;
}
.bank-logo-bb::after{display:none}
.bank-logo-sicoob{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-sm);
  background:#00695c;color:#fff;font-weight:800;font-size:10px;flex-shrink:0;
}
.bank-logo-sicoob::after{display:none}

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

/* Bank Selector */
.bank-selector{
  display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--border);
}
.bank-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;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:var(--primary);color:#fff}
.bank-btn .bank-icon{width:22px;height:22px;font-size:9px;border-radius:4px}

/* Quick Filters */
.quick-filters{
  display:inline-flex;gap:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:2px;flex-wrap:wrap;
}
.btn-quick{
  padding:5px 12px!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:var(--primary);color:#fff}

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

/* Boleto Footer */
.boleto-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;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:600px}
.boleto-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.boleto-header .boleto-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--border);
}
.boleto-header .boleto-title{flex:1}
.boleto-header .boleto-title h2{margin:0;font-size:17px}
.boleto-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:16px}
.boleto-grid .bg-item{padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.boleto-grid .bg-label{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;font-weight:600}
.boleto-grid .bg-value{font-size:14px;font-weight:500;margin-top:2px;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:10px 12px;
  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:12px;
}
.boleto-linhadig .ld-text{flex:1}
.boleto-linhadig .ld-copy{
  padding:6px 10px;border-radius:var(--radius-xs);
  background:var(--primary);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{background:var(--primary-hover)}
.boleto-timeline{margin:12px 0;padding-left:16px;border-left:2px solid var(--border)}
.boleto-timeline .bt-item{
  position:relative;padding:6px 0 6px 12px;font-size:12px;
}
.boleto-timeline .bt-item::before{
  content:'';position:absolute;left:-21px;top:10px;
  width:8px;height:8px;border-radius:50%;
  background:var(--muted);border:2px solid var(--surface);
}
.boleto-timeline .bt-item.active::before{background:var(--green)}
.boleto-timeline .bt-date{color:var(--muted)}

/* CP Status Filters */
.cp-status-filters{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cp-status-filters label{display:flex;align-items:center;gap:4px;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:15px;height:15px;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:.5px}

/* CP Empresa Filter */
.cp-empresa-filter{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);flex-wrap:wrap;
  backdrop-filter:blur(20px);
}
.cp-empresa-filter label{display:flex;align-items:center;gap:4px;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:15px;height:15px;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:.5px}

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

/* Date input */
.input-date{
  padding:5px 10px;border:1px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-size:13px;
  transition:border-color 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 */
.cp-search-input{
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-xs);
  color:var(--text);padding:7px 12px;font-size:13px;width:240px;
  font-family:var(--font-body);
  transition:border var(--transition-fast),width var(--transition-med);
}
.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:28px;background:var(--border);margin:0 4px;align-self:center}

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

/* Company Filter Pills */
.empresa-filter{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.empresa-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  transition:all var(--transition-fast);user-select:none;
}
.empresa-pill:hover{border-color:var(--primary);color:var(--primary)}
.empresa-pill.active{
  border-color:var(--primary);
  background:var(--primary);color:#fff;
}
.empresa-pill::before{
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--muted);flex-shrink:0;
}
.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}

/* Sort + Selection */
.sort-arrow{font-size:10px;color:var(--primary);margin-left:2px}
th[data-bolsort]:hover{color:var(--primary)}
tr.row-selected{background:rgba(0,212,170,.06)!important}
tr.row-selected td{border-color:rgba(0,212,170,.15)}
#boletosBody tr{cursor:pointer;transition:background .15s}
#boletosBody tr:hover{background:var(--table-hover)}
.selection-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;margin-bottom:8px;
  background:var(--primary-surface);
  border:1px solid rgba(0,212,170,.2);
  border-radius:var(--radius);
  color:var(--text);font-size:13px;
  backdrop-filter:blur(20px);
}

/* Protest Alert */
.protest-alert{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;margin-bottom:14px;
  background:var(--red-glow);
  border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius);
  color:var(--text);font-size:13px;font-weight:500;
  animation:protestSlideIn .3s var(--ease-out);
  backdrop-filter:blur(20px);
}
@keyframes protestSlideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.protest-alert::before{
  content:'';display:block;width:8px;height:8px;border-radius:50%;
  background:var(--red);flex-shrink:0;
}
.protest-alert .protest-text{flex:1;line-height:1.4}
.protest-alert .protest-count{
  font-family:var(--font-data);font-size:18px;font-weight:700;
  color:var(--red);white-space:nowrap;
}
.protest-alert .protest-dismiss{
  background:transparent;border:1px solid rgba(239,68,68,.2);
  color:var(--muted);padding:3px 8px;border-radius:20px;
  font-size:11px;cursor:pointer;transition:all var(--transition-fast);
}
.protest-alert .protest-dismiss:hover{border-color:var(--red);color:var(--red)}

/* Days Overdue */
.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:rgba(245,158,11,.1);color:var(--yellow);border:1px solid rgba(245,158,11,.15)}
.days-overdue.medium{background:rgba(249,115,22,.12);color:var(--orange);border:1px solid rgba(249,115,22,.15)}
.days-overdue.high{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.days-overdue.critical{background:rgba(185,28,28,.15);color:#fca5a5;border:1px solid rgba(185,28,28,.2)}
@keyframes overduePulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px var(--red-glow)}}

/* Data refresh */
@keyframes dataRefresh{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}
.data-refreshing{animation:dataRefresh .6s ease}

/* Glass utility */
.glass{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(20px)}

/* Utility */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .2s ease}
.card-flash-success{animation:flashGreen .4s ease-out}
@keyframes flashGreen{0%{box-shadow:0 0 0 2px var(--green-glow)}100%{box-shadow:none}}
.card-flash-error{animation:flashRed .4s ease-out}
@keyframes flashRed{0%{box-shadow:0 0 0 2px var(--red-glow)}100%{box-shadow:none}}
.empty-state{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px}
.empty-state-icon{font-size:32px;margin-bottom:10px;opacity:.4}
.empty-state-text{font-weight:500}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* Tooltip */
[data-tooltip]{position:relative}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) scale(.95);
  background:var(--surface);color:var(--text);
  padding:4px 8px;border-radius:var(--radius-xs);
  font-size:11px;white-space:nowrap;
  border:1px solid var(--border);
  opacity:0;pointer-events:none;
  transition:opacity var(--transition-fast);
  z-index:50;box-shadow:var(--shadow);
}
[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:var(--radius-sm);text-align:center}
.aging-band.band-30{background:rgba(245,158,11,.1);color:#d97706}
.aging-band.band-60{background:rgba(249,115,22,.1);color:#ea580c}
.aging-band.band-90{background:rgba(239,68,68,.1);color:#dc2626}
.aging-band.band-120{background:rgba(190,18,60,.1);color:#be123c}
.aging-band.band-plus{background:rgba(127,29,29,.1);color:#991b1b}
.aging-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.aging-value{font-size:18px;font-weight:700;margin-top:4px}
.aging-qty{font-size:11px;opacity:.7}

/* Conciliation */
.conciliacao-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.conciliacao-section{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid var(--border);backdrop-filter:blur(20px)}
.match-candidate{padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;transition:all .15s}
.match-candidate:hover{border-color:var(--green);background:rgba(34,197,94,.04)}
.match-candidate.selected{border-color:var(--green);background:rgba(34,197,94,.06)}
.match-score{font-size:10px;padding:2px 6px;border-radius:10px;background:var(--green);color:#fff;font-weight:600}

/* Alert Bell */
.alert-bell{position:relative;cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:background .15s}
.alert-bell:hover{background:var(--table-hover)}
.alert-count{position:absolute;top:0;right:0;background:var(--red);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);z-index:100;max-height:400px;overflow-y:auto;box-shadow:var(--shadow-xl);backdrop-filter:blur(20px)}
.alert-item{padding:10px 12px;border-bottom:1px solid var(--border-subtle);font-size:12px}
.alert-item.unread{background:var(--primary-surface)}
.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)}
.fluxo-bar.saida{background:var(--red)}
.fluxo-label{font-size:9px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.fluxo-legend{display:flex;gap:14px;justify-content:center;margin-top:8px;font-size:11px}
.fluxo-legend-item{display:flex;align-items:center;gap:4px}
.fluxo-legend-dot{width:8px;height:8px;border-radius:50%}

/* Export Button */
.btn-export{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:11px;background:rgba(34,197,94,.08);color:var(--green);border:1px solid rgba(34,197,94,.15);border-radius:20px;cursor:pointer;font-weight:600;transition:all .15s}
.btn-export:hover{background:rgba(34,197,94,.14)}

/* Financial Summary */
.fin-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.fin-card{padding:14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);text-align:center;backdrop-filter:blur(20px);transition:all var(--transition-med)}
.fin-card:hover{border-color:rgba(255,255,255,0.12);transform:translateY(-1px)}
.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:20px;font-weight:700;margin-top:4px;font-family:var(--font-data)}
.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}

/* KPI Grid */
.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:28px;border-radius:var(--radius-xs);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 .15s;min-width:2px}
.stacked-seg:hover{opacity:.85}
.stacked-labels{display:flex;gap:10px;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:6px;height:6px;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:.4px;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:2px 8px;border-radius:20px;font-size:11px;font-weight:600;margin-left:4px}
.badge-green{background:var(--green);color:#fff;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;margin-left:4px}

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

.cobranca-table{width:100%;border-collapse:collapse;font-size:12px}
.cobranca-table th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;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(--table-hover)}
.cobranca-nivel{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap}
.cobranca-nivel.lembrete{background:rgba(245,158,11,.1);color:var(--yellow)}
.cobranca-nivel.cobranca{background:rgba(249,115,22,.1);color:var(--orange)}
.cobranca-nivel.protesto{background:rgba(239,68,68,.1);color:var(--red)}

/* UTILITY CLASSES */

/* Typography */
.text-xs{font-size:10px}.text-sm{font-size:12px}.text-md{font-size:14px}.text-lg{font-size:16px}
.text-muted{color:var(--muted)}.text-secondary{color:var(--text-secondary)}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-primary{color:var(--primary)}
.text-right{text-align:right}.text-center{text-align:center}
.font-mono{font-family:var(--font-data)}.font-bold{font-weight:700}.font-medium{font-weight:500}
.font-tabular{font-variant-numeric:tabular-nums}

/* Spacing */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.ml-auto{margin-left:auto}
.p-0{padding:0}.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}

/* Flex */
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.flex-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.inline-flex{display:inline-flex}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

/* Display */
.hidden{display:none!important}
.block{display:block}
.sub-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}

/* Standard Inputs */
.input-standard{
  width:100%;padding:7px 10px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);font-size:13px;
  transition:border-color var(--transition-fast);
}
.input-standard:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.input-sm{padding:4px 8px;font-size:12px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--input-bg);color:var(--text)}
.input-sm:focus{border-color:var(--primary)}
.select-sm{padding:4px 8px;font-size:12px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--input-bg);color:var(--text)}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 4px;align-self:center;flex-shrink:0}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}

/* Section */
.section{margin-top:20px}
.section:first-child{margin-top:0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

/* Chat Panel */
.chat-layout{display:flex;height:calc(100vh - 140px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chat-sidebar{width:320px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}
.chat-sidebar-header{padding:12px;border-bottom:1px solid var(--border)}
.chat-sidebar-list{flex:1;overflow-y:auto}
.chat-conv{padding:10px 12px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--transition-fast)}
.chat-conv:hover{background:var(--table-hover)}
.chat-conv.active{background:var(--primary-surface);border-left:2px solid var(--primary)}
.chat-conv-name{font-weight:600;font-size:13px}
.chat-conv-preview{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-time{font-size:10px;color:var(--muted)}
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--bg)}
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:10px}
.chat-messages{flex:1;overflow-y:auto;padding:16px}
.chat-msg{max-width:70%;margin-bottom:8px;padding:8px 12px;border-radius:var(--radius);font-size:13px;line-height:1.5}
.chat-msg.incoming{background:var(--card);border:1px solid var(--border);align-self:flex-start}
.chat-msg.outgoing{background:var(--primary);color:#fff;align-self:flex-end;margin-left:auto}
.chat-msg-time{font-size:10px;color:var(--muted);margin-top:2px}
.chat-input-area{padding:12px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px}
.chat-input{flex:1;resize:none;min-height:38px;max-height:120px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--input-bg);color:var(--text);font-size:13px}
.chat-input:focus{border-color:var(--primary)}
.chat-send{padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-xs);font-weight:600;cursor:pointer}
.chat-send:hover{background:var(--primary-hover)}

/* Status Indicator */
.status-indicator{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500}
.status-indicator::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.status-indicator.online::before{background:var(--green)}
.status-indicator.offline::before{background:var(--red)}
.status-indicator.pending::before{background:var(--yellow)}

/* Divider */
.divider{height:1px;background:var(--border);margin:16px 0}
.divider-subtle{height:1px;background:var(--border-subtle);margin:8px 0}

/* Card variants */
.card-padded{padding:16px}
.card-compact{padding:12px}
.card-clickable{cursor:pointer}
.card-clickable:hover{border-color:var(--primary)}

/* Progress Bar */
.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-bar-fill{height:100%;border-radius:2px;transition:width .3s ease}

/* Pill Tags */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid}
.pill-green{background:rgba(34,197,94,.08);color:var(--green);border-color:rgba(34,197,94,.15)}
.pill-red{background:rgba(239,68,68,.08);color:var(--red);border-color:rgba(239,68,68,.15)}
.pill-yellow{background:rgba(245,158,11,.08);color:var(--yellow);border-color:rgba(245,158,11,.15)}
.pill-blue{background:var(--primary-surface);color:var(--primary);border-color:rgba(0,212,170,.15)}

/* Load More */
.bol-load-more td{border-bottom:none}
.bol-load-more button{font-weight:500}

/* Stats grid (Cartoes) */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center;backdrop-filter:blur(20px);transition:all var(--transition-med)}
.stat-card:hover{border-color:rgba(255,255,255,0.12);transform:translateY(-1px)}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}
.stat-value{font-size:20px;font-weight:700;font-family:var(--font-data)}
.table-footer{padding:8px 12px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* Modal header/footer/close/body */
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-header h3{margin:0;font-size:17px;font-weight:700}
.modal-close{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;padding:4px;transition:color .15s;line-height:1}
.modal-close:hover{color:var(--text)}
.modal-body{margin-bottom:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:16px;border-top:1px solid var(--border)}

/* Toast Notifications */
.toast-container{
  position:fixed;bottom:20px;right:20px;z-index:10000;
  display:flex;flex-direction:column-reverse;gap:8px;
  pointer-events:none;max-height:calc(100vh - 40px);overflow:hidden;
}
.toast{
  pointer-events:auto;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px;min-width:320px;max-width:400px;
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  opacity:0;transform:translateX(100%);
  animation:toast-in .3s var(--ease-out) forwards;
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(20px);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.toast-out{animation:toast-out .25s ease forwards}
.toast-icon{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;margin-top:1px;
}
.toast-icon.success{background:var(--green)}
.toast-icon.info{background:var(--primary)}
.toast-icon.warning{background:var(--yellow)}
.toast-icon.error{background:var(--red)}
.toast-icon.pix{background:#32BCAD}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:2px}
.toast-msg{font-size:12px;color:var(--text-secondary);line-height:1.4;white-space:pre-line;word-break:break-word}
.toast-close{
  flex-shrink:0;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 4px;opacity:.5;transition:opacity .15s;
}
.toast-close:hover{opacity:1}
.toast-progress{
  position:absolute;bottom:0;left:0;height:2px;
  background:var(--gradient-1);
  border-radius:0 0 var(--radius) var(--radius);
  animation:toast-progress 5s linear forwards;
}
.toast.toast-pix{border-left:3px solid #32BCAD}
.toast.toast-success{border-left:3px solid var(--green)}
.toast.toast-error{border-left:3px solid var(--red)}

@keyframes toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
@keyframes toast-progress{from{width:100%}to{width:0}}

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

/* WhatsApp Chat Layout */

/* Chat bubbles */
.chat-msg-row{display:flex;padding:1px 0}
.chat-bubble-out,.chat-bubble-in{max-width:75%;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.45;word-wrap:break-word;position:relative}
.chat-bubble-out{background:#005c4b;color:#e9edef;border-top-right-radius:3px;margin-left:auto}
.chat-bubble-in{background:#202c33;color:#e9edef;border-top-left-radius:3px}
[data-theme="light"] .chat-bubble-out,[data-theme="cream"] .chat-bubble-out{background:#d9fdd3;color:#111b21}
[data-theme="light"] .chat-bubble-in,[data-theme="cream"] .chat-bubble-in{background:white;color:#111b21;border:none;box-shadow:0 1px 1px rgba(0,0,0,.06)}
[data-theme="ocean"] .chat-bubble-in{background:var(--card)}
.chat-text{white-space:pre-wrap}
.chat-time{font-size:10px;color:rgba(255,255,255,.45);text-align:right;margin-top:3px;letter-spacing:.3px}
.chat-bubble-in .chat-time{color:rgba(255,255,255,.35)}
[data-theme="light"] .chat-bubble-out .chat-time,[data-theme="cream"] .chat-bubble-out .chat-time{color:rgba(0,0,0,.35)}
[data-theme="light"] .chat-bubble-in .chat-time,[data-theme="cream"] .chat-bubble-in .chat-time{color:rgba(0,0,0,.35)}
.chat-att-img{margin-bottom:6px}
.chat-att-img img{max-width:320px;min-width:200px;max-height:360px;border-radius:10px;cursor:pointer;display:block}
.chat-att-audio{margin-bottom:6px}
.chat-att-audio audio{width:100%;min-width:240px;max-width:320px;height:42px;border-radius:21px}
.chat-att-video{margin-bottom:6px}
.chat-att-video video{max-width:320px;min-width:200px;border-radius:10px}
.chat-att-file{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.08);border-radius:10px;margin-bottom:6px;text-decoration:none;color:inherit;transition:background .15s;border:1px solid rgba(255,255,255,.08);min-width:220px}
.chat-att-file:hover{background:rgba(255,255,255,.1)}
[data-theme="light"] .chat-att-file,[data-theme="cream"] .chat-att-file{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .chat-att-file:hover,[data-theme="cream"] .chat-att-file:hover{background:rgba(0,0,0,.08)}
.chat-att-file-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:#00a884;color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.chat-att-file-name{flex:1;font-size:13px;word-break:break-all;line-height:1.3}
.chat-att-file svg{width:18px;height:18px;opacity:.5;flex-shrink:0}

/* Email Tab - 3 Column Layout */
.email-layout{display:flex;height:calc(100vh - 120px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
/* [21/09] subabas de fonte (Gmail x caixas HostGator) — a barra come 42px da altura */
.email-fontes{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 0 10px}
.email-fonte-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;line-height:1;cursor:pointer}
.email-fonte-btn:hover{filter:brightness(0.97)}
.email-fonte-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:600}
.email-fonte-nota{font-size:11px;color:var(--muted);margin-left:auto;max-width:60%;text-align:right}
.email-layout.com-fontes{height:calc(100vh - 162px)}
/* [21/09] detector de spam: selo na linha e chips de classe */
.em-selo{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-right:4px;vertical-align:middle;white-space:nowrap}
.email-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--border)}
.email-chip{font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.email-chip.ativo{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:600}
.email-folders{width:200px;min-width:180px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px 0}
.email-compose-btn{margin:0 12px 12px;padding:10px 16px;font-size:13px;font-weight:600;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:6px}
.email-folder-nav{flex:1;overflow-y:auto}
.email-folder-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:13px;color:var(--text);transition:background .15s;border-radius:0 20px 20px 0;margin-right:8px}
.email-folder-item:hover{background:var(--bg-subtle)}
.email-folder-item.active{background:var(--primary-surface);color:var(--primary);font-weight:600}
.ef-icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.email-folder-item.active .ef-icon{opacity:1}
.ef-label{flex:1}
.ef-badge{font-size:11px;font-weight:600;min-width:18px;text-align:center;color:var(--primary)}
.ef-badge:empty{display:none}
.ef-section-title{padding:12px 16px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-top:4px}
.ef-alias-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.email-account-info{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.email-acct{display:flex;align-items:center;gap:6px}
.email-acct .svg-icon{width:14px;height:14px;opacity:.5}
.email-list-col{width:360px;min-width:300px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.email-list-toolbar{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:6px;align-items:center}
.email-search-input{flex:1;padding:7px 12px;border-radius:20px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:12px;outline:none}
.email-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.email-refresh-btn{padding:6px 8px!important}
.email-refresh-btn .svg-icon,.email-refresh-btn svg{width:16px;height:16px}
.email-list-body{flex:1;overflow-y:auto}
.email-list-footer{padding:6px 10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px}
.email-page-info{font-size:11px;color:var(--muted)}
.email-empty-state{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
.email-empty-state .svg-icon,.email-empty-state svg{width:48px;height:48px}
.em-row{display:flex;gap:8px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border-subtle);transition:background .12s;align-items:flex-start}
.em-row:hover{background:var(--bg-subtle)}
.em-row.em-selected{background:var(--primary-surface);border-left:3px solid var(--primary);padding-left:9px}
.em-dot{width:10px;flex-shrink:0;padding-top:5px}
.em-dot span{display:block;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.em-content{flex:1;min-width:0}
.em-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1px}
.em-from{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.em-from small{font-size:10px;color:var(--muted);font-weight:400}
.em-date{font-size:10px;color:var(--muted);white-space:nowrap;margin-left:8px}
.em-subject{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-snippet{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.em-attach{font-size:10px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:3px}
.em-attach svg,.em-attach .svg-icon{width:12px;height:12px}
.em-unread .em-from,.em-unread .em-subject{font-weight:600}
.email-view-col{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0}
.email-view-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.ev-header{padding:20px 24px;border-bottom:1px solid var(--border);background:var(--surface)}
.ev-subject{font-size:20px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:8px}
.ev-labels{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.ev-label{display:inline-block;padding:2px 10px;font-size:10px;border-radius:20px;border:1px solid;font-weight:500;letter-spacing:.3px}
.ev-meta{display:flex;gap:12px;align-items:flex-start}
.ev-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.ev-meta-info{flex:1;min-width:0}
.ev-from-line{font-size:13px;color:var(--text)}
.ev-from-line strong{font-weight:600}
.ev-email{font-size:11px;color:var(--muted);margin-left:4px}
.ev-to-line{font-size:11px;color:var(--muted);margin-top:2px}
.ev-date{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.ev-actions{padding:10px 24px;border-bottom:1px solid var(--border);display:flex;gap:8px}
.ev-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.ev-btn svg,.ev-btn .svg-icon{width:14px;height:14px}
.ev-body{padding:20px 24px;flex:1}
.ev-iframe{width:100%;border:none;min-height:200px;background:white;border-radius:var(--radius-sm)}
.ev-text{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0;font-size:13px;line-height:1.6}
.ev-attachments{margin:0 24px 20px;padding:16px;background:var(--bg-subtle);border-radius:var(--radius);border:1px solid var(--border)}
.ev-attach-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ev-attach-title svg,.ev-attach-title .svg-icon{width:16px;height:16px;opacity:.6}
.ev-attach-list{display:flex;flex-wrap:wrap;gap:8px}
.ev-attach-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-radius:var(--radius-sm);border:1px solid var(--border);min-width:160px;cursor:default;transition:all .15s;text-decoration:none}
.ev-attach-item:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)}
.ev-attach-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ev-attach-icon svg,.ev-attach-icon .svg-icon{width:18px;height:18px}
.ev-attach-name{font-size:12px;font-weight:500;color:var(--text);word-break:break-all;line-height:1.3}
.ev-attach-size{font-size:10px;color:var(--muted);margin-top:1px}
.ev-attach-dl{width:20px;height:20px;opacity:0;transition:opacity .15s;color:var(--primary);margin-left:auto;flex-shrink:0}
.ev-attach-dl svg{width:18px;height:18px}
.ev-attach-item:hover .ev-attach-dl{opacity:1}
.ec-wrap{padding:20px 24px;display:flex;flex-direction:column;flex:1}
.ec-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ec-header h3{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.ec-form{display:flex;flex-direction:column;gap:8px;flex:1}
.ec-field{display:flex;align-items:center;gap:8px}
.ec-field label{font-size:12px;color:var(--muted);width:50px;text-align:right;flex-shrink:0;font-weight:500}
.ec-input{flex:1;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:13px;outline:none;font-family:inherit}
.ec-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.ec-body{flex:1;min-height:200px;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:13px;resize:none;font-family:inherit;line-height:1.6;outline:none}
.ec-body:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.ec-quote-toggle{margin-top:4px;font-size:12px;color:var(--muted)}
.ec-quote-toggle summary{cursor:pointer;padding:4px 0}
.ec-quote{margin-top:8px;max-height:200px;overflow-y:auto;font-size:12px;border-radius:var(--radius-sm);border:1px solid var(--border);padding:12px;background:var(--card)}
.ec-quote img{max-width:100%;height:auto}
.ec-footer{display:flex;justify-content:flex-end;padding-top:8px;gap:8px}
.ec-send-btn{padding:10px 28px!important;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;border-radius:20px}
.ec-send-btn svg,.ec-send-btn .svg-icon{width:16px;height:16px}

/* Context Menu */
.ctx-menu{position:fixed;z-index:10000;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xl);padding:4px 0;animation:ctxFadeIn .12s ease;backdrop-filter:blur(20px)}
@keyframes ctxFadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--text);transition:background .1s}
.ctx-item:hover{background:var(--primary);color:#fff}
.ctx-item:hover .ctx-icon{color:#fff}
.ctx-danger{color:var(--red)!important}
.ctx-danger:hover{background:var(--red)!important;color:#fff!important}
.ctx-icon{width:16px;height:16px;color:var(--muted);flex-shrink:0;display:flex;align-items:center}
.ctx-icon svg{width:14px;height:14px}
.ctx-divider{height:1px;background:var(--border);margin:4px 0}

/* Contact Info Modal */
.ctx-modal-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:ctxFadeIn .15s ease}
.ctx-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;min-width:360px;max-width:480px;box-shadow:var(--shadow-xl)}
.ctx-info-grid{display:flex;flex-direction:column;gap:8px}
.ctx-info-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-subtle)}
.ctx-info-row:last-child{border-bottom:none}
.ctx-info-label{font-size:12px;color:var(--muted);font-weight:500}
.ctx-info-val{font-size:13px;color:var(--text);font-weight:500}

/* WhatsApp Conversation List */

/* Email responsive - tablet */
@media(max-width:1200px){.email-folders{width:60px;min-width:60px}.ef-label,.email-compose-btn span:last-child,.email-account-info,.ef-section-title{display:none}.email-compose-btn{padding:10px!important;border-radius:50%!important;width:40px;height:40px;margin:0 10px 10px}.email-folder-item{padding:10px;justify-content:center;margin:0;border-radius:8px}.ef-icon{width:20px;height:20px}.ef-alias-dot{width:12px;height:12px}}
@media(max-width:900px){.email-list-col{width:280px;min-width:240px}}

/* RESPONSIVE */
@media (max-width: 768px){
  .content{padding:14px}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .logo{font-size:16px}
  .topbar-right{gap:8px}
  .user-info{font-size:11px}
  .tabs{padding:0 10px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:8px 12px;font-size:12px;white-space:nowrap}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
  .card{padding:14px 16px;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 8px!important;font-size:11px!important}
  .bank-selector{flex-wrap:wrap}
  .bank-btn{padding:7px 10px;font-size:12px}
  .section-title{font-size:14px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .table-wrap table thead{display:none}
  .table-wrap table tbody tr{
    display:block;margin-bottom:8px;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:12px;background:var(--card);
  }
  .table-wrap table tbody td{
    display:flex;justify-content:space-between;align-items:center;
    padding:4px 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}
  .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}
  .modal{width:100vw;max-width:100vw;border-radius:var(--radius) var(--radius) 0 0;max-height:95vh;padding:20px}
  .modal-boleto{width:100vw}
  .modal-qr{width:100vw}
  .boleto-grid{grid-template-columns:1fr}
  .cards{gap:8px}
  .card{min-height:auto}
  .boleto-status-filters,.cp-status-filters{gap:8px}
  .boleto-status-filters label,.cp-status-filters label{font-size:12px}
  .tab-panel.active .card{animation:none}
  .tab-panel.active .table-wrap{animation:none}
  .login-box{width:95vw;padding:24px 20px;border-radius:var(--radius)}
  .login-box h1{font-size:20px}
  .empresa-filter{gap:4px}
  .empresa-pill{padding:3px 8px;font-size:11px}
  .protest-alert{flex-wrap:wrap;padding:10px 12px}
  .protest-alert .protest-count{font-size:16px}
  .cp-empresa-filter{padding:8px 10px;gap:8px}
  .cp-search-input{width:100%}
  .cp-search-input:focus{width:100%}
  .conciliacao-grid{grid-template-columns:1fr}
  .aging-bar{flex-wrap:wrap}
  .aging-band{min-width:calc(50% - 4px);flex:none}
  .aging-value{font-size:15px}
  .fin-summary{grid-template-columns:repeat(2,1fr)}
  .fin-card .fin-value{font-size:17px}

  /* Email mobile */
  .email-layout{flex-direction:column;height:auto;min-height:calc(100vh - 120px)}
  .email-layout.com-fontes{height:auto;min-height:calc(100vh - 162px)}
  .email-fonte-nota{display:none}
  .email-folders{width:100%!important;min-width:100%!important;flex-direction:row;padding:0;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .email-folder-nav{display:flex;flex-direction:row;overflow-x:auto;padding:6px 8px;gap:4px;scrollbar-width:none;-ms-overflow-style:none}
  .email-folder-nav::-webkit-scrollbar{display:none}
  .email-compose-btn{margin:6px 8px!important;padding:8px 14px!important;border-radius:20px!important;width:auto!important;height:auto!important;white-space:nowrap;font-size:12px}
  .email-compose-btn span:last-child{display:inline!important}
  .email-folder-item{padding:6px 12px;margin:0;border-radius:16px;white-space:nowrap;flex-shrink:0;gap:6px;font-size:12px}
  .ef-icon{width:16px;height:16px}
  .ef-label{display:inline!important}
  .ef-badge{font-size:10px}
  .ef-section-title{display:none}
  .email-account-info{display:none}
  .email-list-col{width:100%!important;min-width:100%!important;max-height:45vh;border-right:none;border-bottom:1px solid var(--border)}
  .email-view-col{min-height:45vh}
  .ev-header{padding:12px 14px}
  .ev-subject{font-size:16px}
  .ev-actions{padding:8px 14px;flex-wrap:wrap}
  .ev-body{padding:12px 14px}
  .ev-attachments{margin:0 14px 12px}
  .ec-wrap{padding:12px 14px}
  .ec-field{flex-direction:column;gap:4px}
  .ec-field label{width:auto;text-align:left}
  .ec-body{min-height:120px}

  /* WA mobile */
  .chat-bubble-out,.chat-bubble-in{max-width:85%;font-size:14px}
  .chat-att-img img{max-width:240px;min-width:150px}
  .chat-att-audio audio{min-width:180px;max-width:260px}
  .chat-att-video video{max-width:240px;min-width:150px}
  .chat-att-file{min-width:180px;padding:8px 10px}
  .ctx-modal{min-width:280px;max-width:90vw;padding:20px}

  /* Tabs scrollable mobile */
  .tabs{gap:0;padding:0 4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;padding:8px 10px;font-size:11px;flex-shrink:0}
  .tab .svg-icon,.tab svg{width:14px;height:14px}
  .topbar{padding:6px 10px}
  .logo{font-size:15px}
  .logo span{display:none}
  .user-info strong{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
  .content{padding:8px}
}

@media (max-width: 600px){
  /* Email stacked view (phone) */
  .email-layout{position:relative}
  .email-list-col{max-height:none;height:auto;min-height:auto}
  .email-view-col{display:none}
  .email-view-col.email-view-open{display:flex;position:absolute;inset:0;z-index:60;background:var(--bg)}
  .email-list-col.email-list-hidden{display:none}
  .em-from{max-width:140px}
  .em-subject,.em-snippet{font-size:11px}

  /* WhatsApp stacked view (phone) */

  /* Toast & notifications */
  .toast-container{bottom:10px;right:10px;left:10px}
  .toast{min-width:auto;max-width:100%}
  .ctx-menu{max-width:calc(100vw - 20px)}
  .alert-dropdown{right:-40px;width:90vw;max-width:360px}
}

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

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

@media (min-width: 1600px){
  .content{max-width:1560px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
}

/* ── CP Source Buttons (dinâmicos) ────────────────────────────── */
#cpSourceSelector .bank-btn,
#cpSourceSelector + .cp-source-divider + .bank-selector .bank-btn{
  transition:all .2s ease;border:1px solid transparent;border-radius:8px;padding:6px 12px;font-size:12px
}
#cpSourceSelector .bank-btn:hover,
#cpSourceSelector + .cp-source-divider + .bank-selector .bank-btn:hover{
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.25)
}
/* Cor de fundo sutil quando ativo — usa a cor do ícone */
.bank-btn.active[data-cpsrc="financeiro"]{background:rgba(16,185,129,.15)!important;border-color:rgba(16,185,129,.4)!important;color:#10b981}
.bank-btn.active[data-cpsrc="mapa"]{background:rgba(59,130,246,.15)!important;border-color:rgba(59,130,246,.4)!important;color:#3b82f6}

/* ── CP Financeiro: Action buttons na tabela ──────────────────── */
#finBody .btn-xs{
  padding:3px 8px;font-size:11px;border-radius:6px;font-weight:500;
  transition:all .15s ease;border:1px solid var(--border)
}
#finBody .btn-xs:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.2)}
#finBody .btn-xs.btn-primary{background:#10b981;border-color:#10b981;color:#fff}
#finBody .btn-xs.btn-primary:hover{background:#059669;border-color:#059669}

/* Botão Venc */
#finBody .btn-xs[title="Editar Vencimento"]{color:#f59e0b;border-color:rgba(245,158,11,.3)}
#finBody .btn-xs[title="Editar Vencimento"]:hover{background:rgba(245,158,11,.15);border-color:#f59e0b}

/* Botão Valor */
#finBody .btn-xs[title="Editar Valor"]{color:#3b82f6;border-color:rgba(59,130,246,.3)}
#finBody .btn-xs[title="Editar Valor"]:hover{background:rgba(59,130,246,.15);border-color:#3b82f6}

/* Botão Detalhes */
#finBody .btn-xs[title="Detalhes"]{color:#8b5cf6;border-color:rgba(139,92,246,.3)}
#finBody .btn-xs[title="Detalhes"]:hover{background:rgba(139,92,246,.15);border-color:#8b5cf6}

/* Botão Anexar */
#finBody .btn-xs[title="Anexar Comprovante"]{color:#0ea5e9;border-color:rgba(14,165,233,.3)}
#finBody .btn-xs[title="Anexar Comprovante"]:hover{background:rgba(14,165,233,.15);border-color:#0ea5e9}

/* Botão Estornar */
#finBody .btn-xs[title="Estornar"]{color:#ef4444;border-color:rgba(239,68,68,.3)}
#finBody .btn-xs[title="Estornar"]:hover{background:rgba(239,68,68,.15);border-color:#ef4444}

/* ── CR Source Buttons ────────────────────────────────────────── */
.bank-btn.active[data-crsrc="financeiro"]{background:rgba(16,185,129,.15)!important;border-color:rgba(16,185,129,.4)!important;color:#10b981}
.bank-btn.active[data-crsrc="conciliador"]{background:rgba(245,158,11,.15)!important;border-color:rgba(245,158,11,.4)!important;color:#f59e0b}
.bank-btn.active[data-crsrc="aging"]{background:rgba(139,92,246,.15)!important;border-color:rgba(139,92,246,.4)!important;color:#8b5cf6}

/* CR action buttons */
#crFinBody .btn-xs{padding:3px 8px;font-size:11px;border-radius:6px;font-weight:500;transition:all .15s ease;border:1px solid var(--border)}
#crFinBody .btn-xs:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* CR View toggle */
#btnCrPendentes.active{background:#10b981!important;border-color:#10b981!important;color:#fff!important}
#btnCrPagas.active{background:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important}
#btnCrVencidos.active{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important}

/* CR Cards hover */
#crViewFinanceiro .card{transition:all .2s ease;cursor:pointer;border:1px solid transparent}
#crViewFinanceiro .card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* ── CP Financeiro: View toggle buttons ──────────────────────── */
#btnFinPendentes,#btnFinPagas,#btnFinVencidos{
  transition:all .15s ease;border-radius:6px;font-weight:500
}
#btnFinPendentes.active{background:#10b981!important;border-color:#10b981!important;color:#fff!important}
#btnFinPagas.active{background:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important}
#btnFinVencidos.active{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important}

/* ── CP Cards hover ──────────────────────────────────────────── */
#cpViewFinanceiro .card{transition:all .2s ease;cursor:pointer;border:1px solid transparent}
#cpViewFinanceiro .card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
#cpViewFinanceiro .card[style*="outline"]{border-color:var(--accent)!important}

/* ── Cobrança: Source buttons ─────────────────────────────────── */
.bank-btn.active[data-cobsrc="clientes"]{background:rgba(239,68,68,.15)!important;border-color:rgba(239,68,68,.4)!important;color:#ef4444}
.bank-btn.active[data-cobsrc="historico"]{background:rgba(107,114,128,.15)!important;border-color:rgba(107,114,128,.4)!important;color:#9ca3af}
.bank-btn.active[data-cobsrc="templates"]{background:rgba(139,92,246,.15)!important;border-color:rgba(139,92,246,.4)!important;color:#8b5cf6}

/* Cobrança expand suave */
.cob-expand-row{display:none}
.cob-expand-row.active{display:table-row;animation:fadeIn .2s ease}
.cob-expand-content{padding:12px 16px!important;background:var(--bg-secondary)!important}
.cob-action-bar{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.cob-titulos-list table{font-size:12px;width:100%}
.cob-titulos-list th{font-size:11px;color:var(--text-secondary);padding:4px 8px}
.cob-titulos-list td{padding:4px 8px}

/* ── Financeiro: Sortable columns ─────────────────────────────── */
th[data-sort]{user-select:none;position:relative;padding-right:18px!important}
th[data-sort]:hover{background:var(--bg-tertiary)}
th[data-sort]::after{content:'⇅';position:absolute;right:4px;top:50%;transform:translateY(-50%);opacity:.3;font-size:10px}
th.sort-asc::after{content:'▲';opacity:.8;color:var(--accent)}
th.sort-desc::after{content:'▼';opacity:.8;color:var(--accent)}
.filter-row td{padding:2px 4px!important}
.filter-row input,.filter-row select{box-sizing:border-box}

/* ── Financeiro Redesign ─────────────────────────────── */

/* Empresa chips */
.emp-chip{cursor:pointer;user-select:none}
.emp-chip-inner{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);color:var(--muted);background:transparent;transition:all .15s}
.emp-chip input:checked+.emp-chip-inner{
  background:var(--emp-color,var(--primary));color:#fff;border-color:var(--emp-color,var(--primary));
  box-shadow:0 2px 8px color-mix(in srgb,var(--emp-color) 30%,transparent)}
.emp-chip:hover .emp-chip-inner{border-color:var(--emp-color,var(--primary));color:var(--emp-color,var(--primary))}

/* KPI Cards */
.fin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.fin-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);transition:all .15s;position:relative;overflow:hidden}
.fin-kpi:hover{border-color:var(--primary);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.fin-kpi.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,var(--card))}
.fin-kpi-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;background:var(--red);flex-shrink:0}
.fin-kpi-body{flex:1;min-width:0}
.fin-kpi-value{font-size:24px;font-weight:800;line-height:1;color:var(--text)}
.fin-kpi-label{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.fin-kpi-sub{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.fin-kpi--danger .fin-kpi-sub{color:var(--red)}
.fin-kpi--warning .fin-kpi-sub{color:var(--yellow)}
.fin-kpi--danger{border-left:3px solid var(--red)}
.fin-kpi--success{border-left:3px solid var(--green)}
.fin-kpi--success .fin-kpi-sub{color:var(--green)}
.fin-kpi--warning{border-left:3px solid var(--yellow)}
.fin-kpi--info{border-left:3px solid var(--primary)}
@media(max-width:768px){.fin-kpis{grid-template-columns:repeat(2,1fr)}}

/* Toolbar */
.fin-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;padding:6px 0}
.fin-tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:2px;overflow:hidden}
.fin-tab{padding:6px 16px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:6px;transition:all .15s;white-space:nowrap}
.fin-tab.active{background:var(--primary);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.fin-tab:not(.active):hover{color:var(--text);background:var(--bg-secondary)}
.fin-toolbar-sep{width:1px;height:24px;background:var(--border);flex-shrink:0}
.fin-search{padding:6px 12px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:12px;border-radius:8px;width:220px;transition:all .2s}
.fin-search:focus{border-color:var(--primary);outline:none;width:300px;box-shadow:0 0 0 3px var(--primary-glow)}
.fin-date-range{display:flex;align-items:center;gap:4px}
.fin-date-range input[type="date"]{padding:5px 8px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:11px;border-radius:6px;width:125px}

/* Tabela enxuta */
.fin-table td{padding:10px 12px;vertical-align:middle}
.fin-table .fin-row-overdue{border-left:3px solid var(--red);background:color-mix(in srgb,var(--red) 4%,transparent)}
.fin-table .fin-row-today{border-left:3px solid var(--yellow);background:color-mix(in srgb,var(--yellow) 4%,transparent)}
.fin-table .fin-row-paid{border-left:3px solid var(--green);background:color-mix(in srgb,var(--green) 4%,transparent)}
.fin-table .fin-row-ok{border-left:3px solid transparent}
.fin-fornecedor{font-weight:600;font-size:13px;color:var(--text);line-height:1.3}
.fin-fornecedor-emp{font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;color:#fff;margin-right:4px;vertical-align:1px}
.fin-descricao{font-size:12px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-valor{font-size:14px;font-weight:700;text-align:right;white-space:nowrap;font-family:var(--font-data,'JetBrains Mono',monospace)}
.fin-venc{text-align:center;white-space:nowrap}
.fin-venc-date{font-size:12px;font-weight:600;color:var(--text)}
.fin-venc-dias{font-size:10px;font-weight:700;display:block;margin-top:1px}
.fin-status{text-align:center}
.fin-actions{text-align:right;white-space:nowrap}
.fin-btn-baixar{padding:5px 14px;font-size:11px;font-weight:700;border:none;border-radius:6px;cursor:pointer;
  background:var(--primary);color:#fff;transition:all .15s}
.fin-btn-baixar:hover{opacity:.85;transform:translateY(-1px)}
.fin-btn-conciliar{padding:3px 8px;font-size:10px;font-weight:700;border:none;border-radius:4px;cursor:pointer;
  color:#fff;margin-right:4px;transition:all .15s}
.fin-btn-more{padding:4px 8px;font-size:14px;border:none;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:4px;line-height:1}
.fin-btn-more:hover{background:var(--surface);color:var(--text)}

/* ── CP Sidebar fixa (desktop) ─────────────────────────────────────── */
/* Layout 2-col só em telas >= 1100px. Em mobile fica empilhado normal. */
@media (min-width: 1100px) {
  /* Quando o CP está ativo, libera largura total da tela e remove padding/scroll
     da área externa. O layout fica "app-like": sidebar e topo estáticos, só a
     tabela é scrollável. */
  body.cp-fullwidth {
    overflow: hidden;
  }
  body.cp-fullwidth .content {
    max-width: none;
    padding: 8px 14px;
    height: calc(100vh - 56px);  /* abaixo do header global */
    overflow: hidden;
  }
  body.cp-fullwidth #panelCp.active {
    height: 100%;
  }
  #panelCp.cp-layout-active.active {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
  }
  #panelCp.cp-layout-active.active .cp-sidebar {
    align-self: stretch;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px 24px 12px;  /* padding-bottom extra pra ver último item */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    scroll-behavior: smooth;
  }
  /* Coluna direita: flex column com altura fixa, só a tabela rola */
  #panelCp.cp-layout-active.active .cp-content {
    display: flex;
    flex-direction: column;
    min-height: 0;  /* permite flex children scrollarem */
    overflow: hidden;
  }
  /* Cada view (Financeiro, Fiscais, etc) também é flex column ocupando altura toda */
  #panelCp.cp-layout-active.active .cp-content > div[id^="cpView"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  /* Tudo dentro NÃO rola, exceto .table-container ou .table-wrap (DDA usa
     o segundo) que ocupa o resto */
  #panelCp.cp-layout-active.active .cp-content > div[id^="cpView"] > *:not(.table-container):not(.table-wrap) {
    flex-shrink: 0;
  }
  #panelCp.cp-layout-active.active .cp-content .table-container,
  #panelCp.cp-layout-active.active .cp-content .table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  /* SEFAZ bar no topo da .cp-content também não rola */
  #panelCp.cp-layout-active.active .cp-content > #cpSefazNfeBar {
    flex-shrink: 0;
    margin-top: 0;
  }
  #panelCp.cp-layout-active.active .cp-sidebar::-webkit-scrollbar { width: 6px; }
  #panelCp.cp-layout-active.active .cp-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  #panelCp.cp-layout-active.active .cp-sidebar .filter-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 8px; }
  /* Empresas e sections em coluna vertical */
  #panelCp.cp-layout-active.active #cpEmpresaFilter {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
    border: 0;
  }
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip {
    margin: 0;
    width: 100%;
  }
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip-inner {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  /* Busca + botões agem como bloco abaixo das empresas */
  #panelCp.cp-layout-active.active #cpEmpresaFilter > div:last-child {
    margin: 8px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  #panelCp.cp-layout-active.active #cpEmpresaFilter #cpSearchInput {
    width: 100% !important;
  }
  /* Section selector vira lista vertical destacada */
  #panelCp.cp-layout-active.active #cpSourceSelector {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 8px;
  }
  #panelCp.cp-layout-active.active #cpSourceSelector .bank-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all .15s;
  }
  #panelCp.cp-layout-active.active #cpSourceSelector .bank-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
  }
  #panelCp.cp-layout-active.active #cpSourceSelector .bank-btn.active {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
  }
  #panelCp.cp-layout-active.active #cpSourceSelector .bank-btn .bank-icon {
    width: 22px; height: 22px;
    margin-right: 8px;
  }
  /* Esconde a busca duplicada da sidebar — a toolbar de cada view já tem
     sua própria barra de busca + filtros. */
  #panelCp.cp-layout-active.active #cpEmpresaFilter #cpSearchInput {
    display: none;
  }
  /* Separador entre grupos de empresas (linha horizontal sutil) */
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-group-sep {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }
  /* "A.R. Elias — todas" — destaque como cabeçalho de grupo (uppercase tiny) */
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip-group .emp-chip-inner {
    font-size: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px dashed var(--border);
  }
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip-group input:checked + .emp-chip-inner {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
    border-style: solid;
    border-color: var(--text-secondary);
  }
  /* Sublojas A.R. Elias ficam identadas pra mostrar hierarquia */
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip[style*="font-size:11px"] {
    padding-left: 14px;
    position: relative;
  }
  #panelCp.cp-layout-active.active #cpEmpresaFilter .emp-chip[style*="font-size:11px"]::before {
    content: '└';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 10px;
    opacity: 0.6;
  }
  /* Tabs (Pendentes/Pagas) destacadas */
  #panelCp.cp-layout-active.active .fin-toolbar .fin-tabs .fin-tab.active {
    background: var(--primary);
    color: #fff;
  }
  /* Esconde o footer-padding global da .content quando CP ativo */
  body.cp-fullwidth .content::after { display: none; }
}
/* Botoes individuais de ação — slots fixos, mesma largura, alinhamento perfeito */
.fin-btn-icon{
  width:32px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;font-size:14px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);cursor:pointer;border-radius:6px;line-height:1;
  transition:all .15s;flex-shrink:0;
}
.fin-btn-icon:hover:not(:disabled){background:var(--surface-hover);transform:translateY(-1px);border-color:var(--primary)}
/* Estado desabilitado: aparece mas com baixa opacidade — preserva alinhamento entre linhas */
.fin-btn-icon-off,
.fin-btn-icon:disabled{
  opacity:.22;cursor:not-allowed;
  background:transparent;border-color:transparent;color:var(--text-secondary)!important;
  filter:grayscale(1);
}
.fin-btn-icon-off:hover,
.fin-btn-icon:disabled:hover{transform:none;background:transparent;border-color:transparent}
/* td com display:flex quebra o layout da tabela (a célula transborda por cima da
   coluna Status). td volta a ser table-cell; botões alinham via inline-flex. */
.fin-actions{
  text-align:right;
}
.fin-actions .fin-btn-icon,.fin-actions .fin-btn-baixar{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin:2px 1px}
td.fin-status{min-width:70px}
.fin-btn-baixar{margin-right:6px}
/* More menu dropdown */
.fin-more-menu{position:absolute;right:0;top:100%;z-index:50;background:var(--card);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;min-width:160px;display:none}
.fin-more-menu.show{display:block}
.fin-more-menu button{display:block;width:100%;text-align:left;padding:8px 12px;font-size:12px;border:none;
  background:transparent;color:var(--text);cursor:pointer;border-radius:4px;font-weight:500}
.fin-more-menu button:hover{background:var(--surface)}

/* ── Automação Financeira: cards de jobs + config agrupada ─────────── */
.finauto-jobs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;margin-bottom:14px;
}
.finauto-job{
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:var(--radius-sm, 8px);
  padding:11px 13px;
  transition:transform .15s ease, border-color .15s ease;
}
.finauto-job:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)}
.finauto-job.ok{border-left-color:var(--green)}
.finauto-job.erro{border-left-color:var(--red);background:linear-gradient(135deg, rgba(239,68,68,.05), var(--card))}
.finauto-job.neutral{border-left-color:var(--muted)}
.finauto-job-head{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.finauto-job-ico{font-size:16px;line-height:1}
.finauto-job-title{font-size:12px;font-weight:700;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finauto-job-status{font-size:13px;line-height:1}
.finauto-job-schedule{font-size:10px;color:var(--muted);margin-left:23px;margin-bottom:4px}
.finauto-job-last{font-size:10px;color:var(--muted);margin-left:23px;font-family:var(--font-data);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finauto-job-actions{margin-top:8px;margin-left:23px}
.finauto-job-actions .btn-sm{font-size:10px;padding:3px 8px}

.finauto-config{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 8px);
  padding:14px 16px;
  margin-bottom:14px;
}
.finauto-config-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.06))}
.finauto-config-section:last-of-type{border-bottom:none;margin-bottom:8px;padding-bottom:0}
.finauto-config-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:700;margin-bottom:10px;
}
.finauto-config-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px 16px;
}
.finauto-field label{
  display:block;font-size:10px;color:var(--muted);font-weight:600;
  margin-bottom:4px;letter-spacing:.2px;
}
.finauto-field input, .finauto-field select{
  width:100%;padding:6px 10px;border-radius:5px;
  border:1px solid var(--border);
  background:var(--bg-subtle, var(--surface));
  color:var(--text);font-size:12px;
  font-family:inherit;
}
.finauto-field input:focus, .finauto-field select:focus{
  outline:none;border-color:var(--primary);
}
.finauto-save{margin-top:6px;width:100%}

/* ── Alertas: dashboard recentes + dropdown do sino ────────────────── */
.dash-alertas-list{display:flex;flex-direction:column;gap:6px}
.dash-alerta{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;padding:9px 12px;
  background:var(--surface, rgba(255,255,255,.03));
  border:1px solid var(--border-subtle, rgba(255,255,255,.06));
  border-left:3px solid var(--border);
  border-radius:6px;
  transition:background .15s ease, border-color .15s ease;
}
.dash-alerta:hover{background:rgba(255,255,255,.05)}
.dash-alerta.info{border-left-color:var(--primary, #3b82f6)}
.dash-alerta.warning{border-left-color:var(--yellow, #eab308)}
.dash-alerta.danger{border-left-color:var(--red)}
.dash-alerta.critical{border-left-color:var(--red);background:rgba(239,68,68,.06)}
.dash-alerta.unread{background:rgba(59,130,246,.06)}
.dash-alerta-ico{font-size:16px;line-height:1;flex-shrink:0}
.dash-alerta-content{min-width:0;flex:1}
.dash-alerta-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-alerta-msg{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-alerta-time{font-size:10px;color:var(--muted);font-family:var(--font-data);white-space:nowrap;flex-shrink:0}

/* Dropdown do sino — refinos pra título + mensagem + tempo */
.alert-item{padding:10px 14px;border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.05));display:flex;flex-direction:column;gap:3px;font-size:12px}
.alert-item:last-child{border-bottom:none}
.alert-item.unread{background:rgba(59,130,246,.05)}
.alert-item-head{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.alert-item-msg{color:var(--muted);font-size:11px;margin-left:22px}
.alert-time{font-size:10px;color:var(--muted);margin-left:22px;font-family:var(--font-data)}

/* ── Fluxo de Caixa Inteligente: hero + mini-cards + médias ───────── */
.fluxo-hero{
  background:linear-gradient(135deg, var(--primary-surface, #1a2540), var(--card));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 22px;margin-bottom:14px;
  position:relative;overflow:hidden;
  transition:border-color .2s ease;
}
.fluxo-hero.positive{border-left:4px solid var(--green)}
.fluxo-hero.warning{border-left:4px solid var(--yellow, #eab308)}
.fluxo-hero.negative{border-left:4px solid var(--red);background:linear-gradient(135deg, rgba(239,68,68,.08), var(--card))}
.fluxo-hero-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.fluxo-hero-label{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.fluxo-hero-period{font-size:14px;font-weight:600;color:var(--text);margin-top:2px;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.fluxo-hero-status{font-size:24px;line-height:1}
.fluxo-hero-saldo{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.06));
}
.fluxo-hero-saldo-label{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:600;letter-spacing:.6px}
.fluxo-hero-saldo-val{font-family:var(--font-data);font-size:32px;font-weight:700;letter-spacing:-.6px;line-height:1.05;font-variant-numeric:tabular-nums}
.fluxo-hero-saldo-gap{font-size:12px;color:var(--red);font-family:var(--font-data);font-weight:600}
.fluxo-hero-flow{display:flex;gap:24px;font-family:var(--font-data);font-size:14px;font-weight:600;margin-bottom:10px;font-variant-numeric:tabular-nums}
.flow-up{color:var(--green)}
.flow-down{color:var(--red)}
.fluxo-hero-detail{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px 16px;font-size:12px;color:var(--muted);
}
.fluxo-hero-detail-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.fluxo-hero-detail-item strong{color:var(--text);font-family:var(--font-data);font-weight:700;font-variant-numeric:tabular-nums}
.fluxo-emoji{font-size:14px}
.fluxo-fonte{font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}

.fluxo-section-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;margin-bottom:8px;padding-left:2px;
}
.fluxo-mini-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;margin-bottom:14px;
}
.fluxo-mini-card{
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:var(--radius-sm, 8px);
  padding:11px 13px;
  transition:transform .15s ease, border-color .15s ease;
  cursor:default;
}
.fluxo-mini-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)}
.fluxo-mini-card.positive{border-left-color:var(--green)}
.fluxo-mini-card.warning{border-left-color:var(--yellow, #eab308)}
.fluxo-mini-card.negative{border-left-color:var(--red);background:linear-gradient(135deg, rgba(239,68,68,.05), var(--card))}
.fluxo-mini-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:6px}
.fluxo-mini-period{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-family:var(--font-data)}
.fluxo-mini-ico{font-size:13px;line-height:1}
.fluxo-mini-saldo{font-family:var(--font-data);font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--text)}
.fluxo-mini-card.negative .fluxo-mini-saldo{color:var(--red)}
.fluxo-mini-card.positive .fluxo-mini-saldo{color:var(--green)}
.fluxo-mini-flow{
  display:flex;justify-content:space-between;gap:6px;margin-top:6px;
  font-size:10px;font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600;
}

.fluxo-medias{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 14px;background:var(--surface, rgba(255,255,255,.03));
  border:1px solid var(--border-subtle, rgba(255,255,255,.06));
  border-radius:var(--radius-sm, 8px);
  font-size:12px;
}
.fluxo-medias-label{color:var(--muted);font-weight:600}
.fluxo-media-item{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.fluxo-media-item strong{color:var(--text);font-family:var(--font-data);font-weight:700;font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .fluxo-hero{padding:14px 16px}
  .fluxo-hero-saldo-val{font-size:24px}
  .fluxo-hero-flow{gap:14px;font-size:12px}
  .fluxo-hero-detail{font-size:11px}
  .fluxo-mini-cards{grid-template-columns:repeat(2, 1fr)}
  .fluxo-mini-saldo{font-size:15px}
}

/* Ícone "?" com tooltip explicativo (KPIs, Resumo Financeiro) */
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:var(--surface, rgba(255,255,255,.05));
  color:var(--muted);font-size:9px;font-weight:700;
  cursor:help;margin-left:4px;
  border:1px solid var(--border, rgba(255,255,255,.1));
  vertical-align:middle;line-height:1;
  font-family:system-ui,sans-serif;text-transform:none;letter-spacing:0;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.info-icon:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.info-icon[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  background:#0a0a0a;color:#fff;
  padding:9px 12px;border-radius:6px;
  font-size:11px;font-weight:400;letter-spacing:0;
  white-space:normal;min-width:240px;max-width:280px;
  text-align:left;line-height:1.45;
  z-index:1000;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
}
.info-icon[data-tooltip]:hover::before{
  content:'';position:absolute;bottom:calc(100% + 2px);left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0a0a0a;
  z-index:1001;pointer-events:none;
}
/* Garante que fin-card não corte o tooltip */
.fin-card{overflow:visible !important}

/* ── Dashboard: cards por grupo (PIX Hoje, Boletos a Receber) ────── */
.dash-group-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:12px;margin-bottom:18px;
}
.dash-group-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  transition:border-color .15s ease, transform .15s ease;
  overflow:hidden;min-width:0;
}
.dash-group-card:hover{border-color:rgba(255,255,255,.12)}
.dash-group-card-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.06));
}
.dash-group-card-rows{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.dash-group-card-rows-4{grid-template-columns:repeat(4, 1fr)}
.dash-group-card-row{
  position:relative;padding-left:8px;
  border-left:2px solid var(--border);
  min-width:0;
}
.dash-group-card-row.green{border-left-color:var(--green)}
.dash-group-card-row.yellow{border-left-color:var(--yellow,#eab308)}
.dash-group-card-row.red{border-left-color:var(--red)}
.dash-group-card-row.orange{border-left-color:var(--orange,#f97316)}
.dash-group-card-row-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:600;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-group-card-row-val{
  font-family:var(--font-data);font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.15;
}
.dash-group-card-row.green .dash-group-card-row-val{color:var(--green)}
.dash-group-card-row.yellow .dash-group-card-row-val{color:var(--yellow,#eab308)}
.dash-group-card-row.red .dash-group-card-row-val{color:var(--red)}
.dash-group-card-row.orange .dash-group-card-row-val{color:var(--orange,#f97316)}
.dash-group-card-row-sub{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:600px){
  .dash-group-cards{grid-template-columns:1fr;gap:10px}
  .dash-group-card-rows-4{grid-template-columns:repeat(2,1fr)}
  .dash-group-card-row-val{font-size:16px}
}

/* Toggle inline ao lado de section-title (ex: Inadimplência) */
.dash-toggle-inline{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--muted);
  cursor:pointer;user-select:none;
  text-transform:none;letter-spacing:0;
  padding:4px 9px;border-radius:5px;
  background:var(--surface, rgba(255,255,255,.04));
  border:1px solid var(--border-subtle, rgba(255,255,255,.06));
  transition:border-color .15s ease, color .15s ease;
}
.dash-toggle-inline:hover{border-color:var(--border);color:var(--text)}
.dash-toggle-inline input[type=checkbox]{
  width:13px;height:13px;cursor:pointer;margin:0;accent-color:var(--primary);
}

/* ── Dashboard: Resumo das Contas (grid de mini-cards, escala p/ 20+ contas) ── */
.dash-hero{
  background:linear-gradient(135deg, var(--primary-surface,#1a2540), var(--card));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 22px;margin-bottom:14px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.dash-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 240px at 88% -40%, var(--primary-glow), transparent 70%);
}
.dash-hero-row{position:relative;z-index:1}
.dash-hero-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dash-hero-left{flex:1;min-width:0}
.dash-hero-label{
  font-size:10px;text-transform:uppercase;color:var(--muted);
  letter-spacing:.7px;font-weight:600;margin-bottom:4px;
}
.dash-hero-value{
  font-family:var(--font-data);font-size:30px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
  line-height:1.1;
}
.dash-hero-right{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.dash-hero-detail-label{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.6px;font-weight:600}
.dash-hero-detail-value{font-size:16px;font-weight:600;color:var(--text);margin-top:2px}
/* Split bar BS / A.R. Elias no hero (dados reais via groupSaldos) */
.dash-hero-split{margin-top:12px;position:relative;z-index:1;max-width:520px}
.dash-split-bar{height:8px;border-radius:8px;overflow:hidden;display:flex;background:var(--bg-subtle)}
.dash-split-bar i{display:block;height:100%;transition:width var(--transition-slow) var(--ease-out)}
.dash-split-legend{display:flex;gap:18px;margin-top:8px;font-size:12px;flex-wrap:wrap}
.dash-split-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary)}
.dash-split-legend b{font-family:var(--font-data);color:var(--text);font-variant-numeric:tabular-nums}
.dash-split-dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex-shrink:0}

/* Header de grupo: rótulo (tag) + subtotal destacado */
.dash-group-section{margin-bottom:16px}
.dash-group-section:last-child{margin-bottom:8px}
.dash-group-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 10px;padding:0 2px 8px;
  border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.07));
  flex-wrap:wrap;
}
.dash-group-header-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--text-secondary);font-weight:700;
  padding:4px 12px;border-radius:20px;
  background:var(--surface, rgba(255,255,255,.04));
  border:1px solid var(--border);
}
.dash-group-header-sub{
  font-size:13px;color:var(--text);
  font-family:var(--font-data);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:8px;
}
.dash-group-header-sub-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:600;font-family:inherit;
}
.dash-group-header-sub strong{
  font-weight:700;font-size:17px;letter-spacing:-.3px;
}
.dash-group-header-sub .muted{color:var(--muted);font-size:12px;font-weight:500}

/* Grid denso de mini-cards: auto-fill com 180px mínimo (nomes legíveis) */
.dash-mini-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.dash-mini-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius, 12px);
  padding:13px 15px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position:relative;
  overflow:hidden;
  min-height:86px;
  display:flex;flex-direction:column;
  cursor:default;
}
.dash-mini-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--card-accent, var(--primary));
  opacity:0;transition:opacity var(--transition-fast);
}
.dash-mini-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.dash-mini-card:hover::after{opacity:.8}
.dash-mini-head{display:flex;align-items:flex-start;gap:7px;margin-bottom:6px}
.dash-mini-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:7px;
  background:var(--bg-subtle);padding:3px;
  flex-shrink:0;overflow:hidden;margin-top:0;
}
.dash-mini-icon img{width:100%;height:100%;object-fit:contain}
.dash-mini-name{
  font-size:12px;font-weight:700;color:var(--text);
  letter-spacing:.1px;line-height:1.25;
  flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.dash-mini-status{flex-shrink:0;display:inline-flex;align-items:center;margin-top:4px}
.dash-mini-status .status-dot{width:8px;height:8px}
.dash-mini-saldo{
  font-family:var(--font-data);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.15;
  margin-top:auto;
}
.dash-mini-meta{
  font-size:10px;color:var(--muted);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-mini-limite{
  font-size:10px;color:var(--muted);margin-top:2px;
  font-family:var(--font-data);font-variant-numeric:tabular-nums;
  opacity:.85;cursor:help;
}

/* Animação ao entrar */
.tab-panel.active .dash-hero{animation:slideUp .3s var(--ease-out, ease) both}
.tab-panel.active .dash-group-section{animation:slideUp .3s var(--ease-out, ease) both}
.tab-panel.active .dash-group-section:nth-child(2){animation-delay:60ms}
.tab-panel.active .dash-group-section:nth-child(3){animation-delay:120ms}

/* Responsivo */
@media (max-width:900px){
  .dash-mini-cards{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:8px}
  .dash-hero-value{font-size:26px}
}
@media (max-width:600px){
  .dash-hero{padding:12px 14px}
  .dash-hero-value{font-size:22px}
  .dash-hero-detail-value{font-size:13px}
  .dash-mini-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .dash-mini-card{padding:10px 12px;min-height:70px}
  .dash-mini-saldo{font-size:16px}
  .dash-mini-name{font-size:10px}
}
@media (max-width:380px){
  .dash-mini-cards{grid-template-columns:1fr}
}

/* ── Documentos Fiscais (filtros chips) ───────────────────────── */
.fiscais-filters .fi-grupo { font-size: 11px }
.fi-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 12px;
  background: var(--muted);
  color: white; font-size: 11px; font-weight: 600;
  cursor: pointer; user-select: none;
  opacity: .45; transition: opacity .15s ease;
  white-space: nowrap;
}
.fi-chip:has(input:checked) { opacity: 1 }
.fi-chip:hover { opacity: .85 }
.fi-chip:has(input:checked):hover { opacity: 1 }

/* Linhas de documento fiscal */
.fiscais-row[data-dup="0"] {
  background: rgba(6, 182, 212, 0.04);
  border-left: 3px solid #06b6d4;
}
.fiscais-row[data-cancelada="1"] {
  opacity: .55;
  text-decoration: line-through;
}
.tipo-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  color: white; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; min-width: 38px; text-align: center;
}
.tipo-badge.nfe { background: #8b5cf6 }
.tipo-badge.nfse { background: #0ea5e9 }
.tipo-badge.cte { background: #10b981 }

/* SEFAZ NFe topo CP */
#cpSefazNfeBar .sefaz-emp-mini {
  padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.08); color: #cbd5e1;
  white-space: nowrap;
}
#cpSefazNfeBar .sefaz-emp-mini.bloqueado { background: #ef4444; color: white }
#cpSefazNfeBar .sefaz-emp-mini.cert-missing { background: #f59e0b; color: white }
#cpSefazNfeBar .sefaz-emp-mini.cooldown { background: rgba(59,130,246,.22); color: #93c5fd }
#cpSefazNfeBar .sefaz-emp-mini[onclick]:hover { background: #3b82f6; color: white }

/* ═══════════════════════════════════════════════════════════════════════
   CR Sidebar fixa (desktop) — espelha o layout CP. Mobile usa as mesmas
   regras gerais do CP (max-width:1099px reset) abaixo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  body.cr-fullwidth { overflow: hidden; }
  body.cr-fullwidth .content {
    max-width: none; padding: 8px 14px;
    height: calc(100vh - 56px); overflow: hidden;
  }
  body.cr-fullwidth #panelCr.active { height: 100%; }
  #panelCr.cr-layout-active.active {
    display: grid; grid-template-columns: 220px 1fr; gap: 14px;
    align-items: stretch; height: 100%; overflow: hidden;
  }
  #panelCr.cr-layout-active.active .cr-sidebar {
    align-self: stretch; max-height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 12px 24px 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; scroll-behavior: smooth;
  }
  #panelCr.cr-layout-active.active .cr-content {
    display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
  }
  #panelCr.cr-layout-active.active .cr-content > div[id^="crView"] {
    display: flex; flex-direction: column; flex: 1;
    min-height: 0; overflow: hidden;
  }
  #panelCr.cr-layout-active.active .cr-content > div[id^="crView"] > *:not(.table-container):not(.table-wrap) { flex-shrink: 0; }
  #panelCr.cr-layout-active.active .cr-content .table-container,
  #panelCr.cr-layout-active.active .cr-content .table-wrap {
    flex: 1; min-height: 0; overflow: auto;
    border: 1px solid var(--border); border-radius: 8px;
  }
  #panelCr.cr-layout-active.active .cr-sidebar::-webkit-scrollbar { width: 6px; }
  #panelCr.cr-layout-active.active .cr-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  #panelCr.cr-layout-active.active .cr-sidebar .filter-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 8px; }
  #panelCr.cr-layout-active.active #crEmpresaFilter {
    flex-direction: column; align-items: stretch; gap: 5px;
    padding: 0; margin-bottom: 16px; background: transparent; border: 0;
  }
  #panelCr.cr-layout-active.active #crEmpresaFilter .emp-chip { margin: 0; width: 100%; }
  #panelCr.cr-layout-active.active #crEmpresaFilter .emp-chip-inner { width: 100%; text-align: center; box-sizing: border-box; }
  #panelCr.cr-layout-active.active #crEmpresaFilter > div:last-child {
    margin: 8px 0 0 0; flex-direction: column;
    align-items: stretch; gap: 6px; width: 100%;
  }
  #panelCr.cr-layout-active.active #crEmpresaFilter #crSearchInput { width: 100% !important; }
  #panelCr.cr-layout-active.active #crSourceSelector {
    flex-direction: column; align-items: stretch; gap: 4px;
    border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px;
  }
  #panelCr.cr-layout-active.active #crSourceSelector .bank-btn {
    width: 100%; justify-content: flex-start;
    padding: 10px 14px; font-size: 13px; font-weight: 600;
    border-radius: 8px; background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; transition: all .15s;
  }
  #panelCr.cr-layout-active.active #crSourceSelector .bank-btn:hover { background: var(--surface-hover); color: var(--text); }
  #panelCr.cr-layout-active.active #crSourceSelector .bank-btn.active {
    background: var(--surface-hover); color: var(--text);
    border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary);
  }
  #panelCr.cr-layout-active.active #crSourceSelector .bank-btn .bank-icon { width: 22px; height: 22px; margin-right: 8px; }
  /* A.R. Elias chip grupo */
  #panelCr.cr-layout-active.active #crEmpresaFilter .emp-chip[style*="font-size:11px"] { padding-left: 14px; position: relative; }
  #panelCr.cr-layout-active.active #crEmpresaFilter .emp-chip[style*="font-size:11px"]::before { content: '└'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 10px; opacity: 0.6; }
  body.cr-fullwidth .content::after { display: none; }
}

/* CR Mobile — reset layout app-like, mesma lógica do CP mobile */
@media (max-width: 1099px) {
  body.cr-fullwidth { overflow: auto; }
  body.cr-fullwidth .content { max-width: none; padding: 8px; height: auto; overflow: visible; }
  body.cr-fullwidth #panelCr.active,
  #panelCr.cr-layout-active.active { display: block; height: auto; overflow: visible; grid-template-columns: none; }
  #panelCr.cr-layout-active.active .cr-sidebar { position: relative; max-height: none; overflow: visible; padding: 8px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
  #panelCr.cr-layout-active.active .cr-content { display: block; overflow: visible; }
  #panelCr.cr-layout-active.active .cr-content > div[id^="crView"] { display: block; overflow: visible; flex: none; }
  #panelCr.cr-layout-active.active .cr-content .table-container,
  #panelCr.cr-layout-active.active .cr-content .table-wrap { flex: none; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
}

@media (max-width: 900px) {
  #panelCr.cr-layout-active.active #crEmpresaFilter,
  #crEmpresaFilter {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px !important; gap: 6px !important; margin-bottom: 8px !important;
  }
  #crEmpresaFilter .filter-label { display: none; }
  #crEmpresaFilter .emp-chip { flex-shrink: 0; margin: 0 !important; width: auto !important; }
  #crEmpresaFilter .emp-chip-inner { width: auto !important; padding: 6px 10px !important; font-size: 11px !important; white-space: nowrap; }
  #crEmpresaFilter > div:last-child { margin: 0 !important; width: 100% !important; flex-direction: row !important; gap: 6px !important; }
  #crEmpresaFilter #crSearchInput { display: block !important; width: 100% !important; flex: 1; }
  #crSourceSelector { display: flex !important; flex-direction: row !important; overflow-x: auto; gap: 4px !important; padding: 4px !important; border-top: 0 !important; margin-top: 8px !important; background: var(--bg-subtle); border-radius: 8px; }
  #crSourceSelector .bank-btn { flex: 1 0 auto; min-width: 0; justify-content: center !important; padding: 8px 10px !important; font-size: 12px !important; white-space: nowrap; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text-secondary) !important; }
  #crSourceSelector .bank-btn.active { background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
}

/* CR table vira card list em telinha (mesma regra do CP, escopo crFinTable) */
@media (max-width: 700px) {
  #crFinTable thead { display: none; }
  #crFinTable, #crFinTable tbody, #crFinTable tr, #crFinTable td { display: block; width: 100%; }
  #crFinTable tr {
    border: 1px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    background: var(--surface);
  }
  #crFinTable td {
    padding: 4px 0 !important; border: 0 !important;
    text-align: left !important; max-width: none !important;
    white-space: normal !important;
  }
  #crFinTable td::before {
    content: attr(data-label); display: block;
    font-size: 9px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .5px;
    font-weight: 700; margin-bottom: 2px; opacity: .7;
  }
}

/* ── Mini-status SEFAZ NFe na sidebar (compacto, sempre visível) ─── */
.sefaz-mini {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  transition: background .15s;
}
.sefaz-mini:hover { background: var(--surface-hover, var(--surface)); }
.sefaz-mini-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.sefaz-mini-label {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sefaz-mini-info {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   CP MOBILE — abaixo de 1100px desliga o layout app-like e empilha tudo.
   Card list pra tabelas, KPIs 2x2, toolbar vertical, sidebar compacta no topo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099px) {
  /* Reset do modo fullwidth: deixa scroll natural da página */
  body.cp-fullwidth { overflow: auto; }
  body.cp-fullwidth .content {
    max-width: none; padding: 8px;
    height: auto; overflow: visible;
  }
  body.cp-fullwidth #panelCp.active,
  #panelCp.cp-layout-active.active {
    display: block;
    height: auto; overflow: visible;
    grid-template-columns: none;
  }
  #panelCp.cp-layout-active.active .cp-sidebar {
    position: relative;
    max-height: none; overflow: visible;
    padding: 8px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  #panelCp.cp-layout-active.active .cp-content { display: block; overflow: visible; }
  #panelCp.cp-layout-active.active .cp-content > div[id^="cpView"] {
    display: block; overflow: visible; flex: none;
  }
  #panelCp.cp-layout-active.active .cp-content .table-container,
  #panelCp.cp-layout-active.active .cp-content .table-wrap {
    flex: none; overflow-x: auto;
    border: 1px solid var(--border); border-radius: 8px;
  }
}

@media (max-width: 900px) {
  /* ── Sidebar: empresas em row scrollável ── */
  #panelCp.cp-layout-active.active #cpEmpresaFilter,
  #cpEmpresaFilter {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  #cpEmpresaFilter::-webkit-scrollbar { height: 4px; }
  #cpEmpresaFilter::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  #cpEmpresaFilter .filter-label { display: none; }
  #cpEmpresaFilter .emp-chip { flex-shrink: 0; margin: 0 !important; width: auto !important; }
  #cpEmpresaFilter .emp-chip-inner {
    width: auto !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  #cpEmpresaFilter .emp-group-sep {
    display: inline-block;
    width: 1px; height: 22px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
  }
  /* Hide A.R. Elias todas no mobile (atalho desktop) — chips individuais já bastam */
  #cpEmpresaFilter .emp-chip-group { display: none !important; }
  /* Sublojas ARE — remove ident └ no mobile */
  #cpEmpresaFilter .emp-chip[style*="font-size:11px"] { padding-left: 0 !important; }
  #cpEmpresaFilter .emp-chip[style*="font-size:11px"]::before { display: none !important; }
  /* Busca + botões na linha de baixo, full-width */
  #cpEmpresaFilter > div:last-child {
    margin: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  #cpEmpresaFilter #cpSearchInput {
    display: block !important;
    width: 100% !important;
    flex: 1;
  }

  /* ── Source selector (Financeiro/Fiscais/DDA/Mapa) vira tabs full-width ── */
  #cpSourceSelector {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 4px !important;
    padding: 4px !important;
    border-top: 0 !important;
    margin-top: 8px !important;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-subtle);
    border-radius: 8px;
  }
  #cpSourceSelector .bank-btn {
    flex: 1 0 auto;
    min-width: 0;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
  }
  #cpSourceSelector .bank-btn.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
  }
  #cpSourceSelector .bank-btn .bank-icon {
    width: 18px !important; height: 18px !important;
    margin-right: 4px !important;
    font-size: 9px !important;
  }

  /* ── SEFAZ NFe bar empilha ── */
  #cpSefazNfeBar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  #cpSefazNfeBar > div { width: 100%; min-width: 0 !important; }
  #cpSefazNfeBar #cpSefazNfeManifest { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid #334155; padding-top: 6px; }

  /* ── KPIs 2x2 ── */
  .fin-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .fin-kpi {
    padding: 10px !important;
    gap: 8px !important;
    min-height: 0;
  }
  .fin-kpi-value { font-size: 18px !important; }
  .fin-kpi-label { font-size: 10px !important; }
  .fin-kpi-sub { font-size: 11px !important; }
  .fin-kpi-icon { width: 28px !important; height: 28px !important; font-size: 13px !important; }

  /* ── Toolbar empilhado ── */
  .fin-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .fin-toolbar > * { width: 100%; }
  .fin-toolbar-sep { display: none !important; }
  .fin-toolbar .fin-tabs { display: flex !important; width: 100%; }
  .fin-toolbar .fin-tabs .fin-tab { flex: 1; padding: 8px !important; font-size: 12px !important; }
  .fin-toolbar .fin-search,
  .fin-toolbar #finTipoDocFilter,
  .fin-toolbar #finTipoGastoFilter {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  .fin-toolbar .fin-date-range {
    display: flex; gap: 6px;
    align-items: center;
    width: 100%;
  }
  .fin-toolbar .fin-date-range input[type="date"] {
    flex: 1; min-width: 0;
    font-size: 12px;
    padding: 6px 8px;
  }
  .fin-toolbar .fin-date-range button { flex-shrink: 0; }

  /* ── Filtros do Fiscais empilham ── */
  .fiscais-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .fiscais-filters .fi-grupo {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

}

/* ── Tabela vira card list abaixo de 700px ── */
@media (max-width: 700px) {
  /* Financeiro */
  .fin-table thead,
  #cpViewFiscais table thead { display: none; }

  .fin-table,
  .fin-table tbody,
  #cpViewFiscais table,
  #cpViewFiscais table tbody { display: block; width: 100%; }

  .fin-table tr,
  #cpViewFiscais table tbody tr {
    display: block; width: 100%;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  /* Cores na lateral por status (Financeiro) */
  .fin-table tr.fin-row-overdue { border-left-color: var(--red, #ef4444); background: rgba(239,68,68,.04); }
  .fin-table tr.fin-row-today { border-left-color: var(--yellow, #f59e0b); background: rgba(245,158,11,.04); }
  .fin-table tr.fin-row-paid { border-left-color: var(--green, #10b981); opacity: .8; }

  .fin-table tr td,
  #cpViewFiscais table tbody tr td {
    display: block; width: 100%;
    padding: 4px 0 !important;
    border: 0 !important;
    text-align: left !important;
    max-width: none !important;
    white-space: normal !important;
  }
  .fin-table tr td::before,
  #cpViewFiscais table tbody tr td::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 2px;
    opacity: .7;
  }

  /* Financeiro: layout otimizado por célula ───────── */
  /* Fornecedor: hero, sem label, fonte maior */
  .fin-table tr td.fin-cell-fornecedor { padding-bottom: 8px !important; }
  .fin-table tr td.fin-cell-fornecedor::before { display: none; }
  .fin-table tr td.fin-cell-fornecedor .fin-fornecedor { font-size: 13px; font-weight: 700; }

  /* Valor: destaque, alinhado à direita visualmente via flex */
  .fin-table tr td.fin-valor {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--text);
    padding: 8px 0 6px !important;
    border-top: 1px dashed var(--border-subtle, var(--border)) !important;
    margin-top: 4px;
  }

  /* Vencimento + Status: lado a lado em flex */
  .fin-table tr td.fin-venc,
  .fin-table tr td.fin-status {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 12px 4px 0 !important;
    vertical-align: middle;
  }
  .fin-table tr td.fin-venc::before,
  .fin-table tr td.fin-status::before { display: inline; margin-right: 4px; opacity: .6; }

  /* Ações: row de botões, espaçamento confortável pra touch */
  .fin-table tr td.fin-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-subtle, var(--border)) !important;
    margin-top: 8px;
  }
  .fin-table tr td.fin-actions::before { display: none; }
  .fin-table tr td.fin-actions .fin-btn-baixar {
    flex: 1 0 auto;
    min-width: 90px;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .fin-table tr td.fin-actions .fin-btn-icon {
    width: 36px !important; height: 36px !important;
    font-size: 15px !important;
  }
  .fin-table tr td.fin-actions .fin-btn-icon-off { display: none !important; }

  /* Fiscais: agrupa CT-e/Dup/Frete num row inline */
  #cpViewFiscais table tbody tr td[data-label="Fornecedor"] { padding-bottom: 6px !important; }
  #cpViewFiscais table tbody tr td[data-label="Valor"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding-top: 6px !important;
  }
  #cpViewFiscais table tbody tr td[data-label="Ações"] {
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px !important;
    border-top: 1px solid var(--border-subtle, var(--border)) !important;
    margin-top: 6px;
  }
  #cpViewFiscais table tbody tr td[data-label="Ações"]::before { display: none; }

  /* Table footer mais compacto */
  .table-footer {
    flex-direction: column !important;
    gap: 4px;
    padding: 8px !important;
    font-size: 12px;
    text-align: center;
  }
}

/* ── KPIs 1 coluna em telinha bem pequena ── */
@media (max-width: 420px) {
  .fin-kpis { grid-template-columns: 1fr !important; }
  .fin-kpi { padding: 12px !important; }
  .fin-kpi-value { font-size: 22px !important; }
  .fin-kpi-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
}

/* ===== Preços m² (Fase 1) ===== */
#panelPrecos { padding-bottom: 40px; }
.precos-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.precos-sub { font-size:12px; color:var(--muted,#5b6470); margin-top:2px; }
.precos-sub b { color:var(--text,#1a1d21); }
.precos-cards { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:12px; margin-bottom:18px; }
.pcard { background:var(--card,#fff); border:1px solid var(--border,#e3e8ee); border-radius:12px; padding:13px 15px; }
.pcard-hero { background:linear-gradient(135deg,#0b3a63,#0b5cab); border:none; color:#fff; }
.pcard-l { font-size:11px; text-transform:uppercase; letter-spacing:.4px; opacity:.85; }
.pcard-v { font-size:24px; font-weight:800; margin-top:4px; color:#0b5cab; }
.pcard-hero .pcard-v { color:#fff; }
.pcard-s { font-size:11px; opacity:.7; margin-top:2px; }
.precos-block { margin-bottom:22px; }
.precos-bt { font-size:14px; font-weight:700; color:#0b3a63; margin:0 0 6px; padding-bottom:5px; border-bottom:2px solid var(--border,#e3e8ee); }
.precos-hint, .precos-note { font-size:11px; color:var(--muted,#6b7480); margin:6px 0; }
.precos-note b, .precos-hint b { color:#0b3a63; }
table.precos-grid { width:100%; border-collapse:collapse; font-size:12.5px; }
table.precos-grid th, table.precos-grid td { border:1px solid var(--border,#dde3ea); padding:6px 10px; text-align:right; }
table.precos-grid th { background:#0b3a63; color:#fff; font-size:11px; font-weight:600; position:sticky; top:0; }
table.precos-grid th.lbl, table.precos-grid td.lbl { text-align:left; }
table.precos-grid td.lbl { font-weight:500; }
table.precos-grid tr.sec td { background:#e8eef5; color:#0b3a63; font-weight:700; text-align:left; }
table.precos-grid td.anchor { font-weight:700; color:#0b5cab; background:#f0f7ff; }
table.precos-grid th.anchor { background:#0b5cab; }
table.precos-grid td.custo { color:#9a6500; background:#fdf6ea; }
table.precos-grid tbody tr:hover td:not(.sec) { background:#f6f9fc; }
.precos-err { color:#b42318; background:#fef3f2; border:1px solid #fecdc9; border-radius:8px; padding:12px; }
.btn-ghost { background:transparent; border:1px solid var(--border,#dde3ea); border-radius:8px; padding:7px 13px; cursor:pointer; font-size:13px; color:#0b3a63; }
.btn-ghost:hover { background:#f0f7ff; }
@media (max-width:900px){ .precos-cards{ grid-template-columns:1fr 1fr; } }
/* Preços m² no CELULAR: cada bloco rola na horizontal com o rótulo congelado */
@media (max-width:720px){
  #panelPrecos .precos-block{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }
  #panelPrecos table.precos-grid{ font-size:12px; min-width:620px; }
  #panelPrecos table.precos-grid th.lbl{ position:sticky; left:0; top:0; z-index:6; }
  #panelPrecos table.precos-grid td.lbl{ position:sticky; left:0; z-index:4; background:var(--surface); box-shadow:2px 0 6px rgba(0,0,0,.18); min-width:104px; max-width:130px; white-space:normal; }
  #panelPrecos table.precos-grid tr.sec td{ position:sticky; left:0; z-index:4; }
  #panelPrecos .precos-nav{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; padding-bottom:8px; }
  #panelPrecos .precos-nav > *{ white-space:nowrap; flex:0 0 auto; }
  #panelPrecos .pinput{ width:76px; font-size:16px; min-height:38px; }
  #panelPrecos .precos-head{ flex-wrap:wrap; gap:8px; }
}

/* ===== Preços m² — edição (Fase 2) ===== */
.precos-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-warn { background:#fff3e0; border:1px solid #f0b86b; border-radius:8px; padding:7px 13px; cursor:pointer; font-size:13px; color:#9a6500; font-weight:600; }
.btn-warn:hover { background:#ffe9c9; }
.btn-save { background:#0b8a4b; border:1px solid #0b8a4b; color:#fff; border-radius:8px; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:600; }
.btn-save:hover { background:#0a7a42; }
.btn-ghost.sm { padding:4px 9px; font-size:12px; }
td.pedit { padding:2px !important; }
input.pinput { width:70px; border:1px solid #cdd6e0; border-radius:6px; padding:5px 6px; font-size:12.5px; text-align:right; font-family:inherit; background:#fffef8; }
input.pinput:focus { outline:none; border-color:#0b5cab; box-shadow:0 0 0 2px rgba(11,92,171,.15); }
input.pinput-dirty { border-color:#0b8a4b; background:#eafaf0; font-weight:700; color:#0b6a3a; }
/* modal */
.pm-ov { position:fixed; inset:0; background:rgba(15,23,32,.55); display:flex; align-items:center; justify-content:center; z-index:9999; }
.pm-box { background:#fff; border-radius:14px; padding:22px 24px; max-width:760px; width:92%; max-height:86vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.pm-box h3 { margin:0 0 4px; color:#0b3a63; font-size:18px; }
.pm-sub { font-size:12.5px; color:#5b6470; margin:0 0 14px; }
.pm-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.pm-tbl th, .pm-tbl td { border-bottom:1px solid #eef2f6; padding:7px 9px; text-align:left; }
.pm-tbl th { color:#5b6470; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.pm-tbl td.r, .pm-tbl th.r { text-align:right; }
.pm-tbl td.novo { color:#0b8a4b; font-weight:700; }
.pm-tbl td.arr { color:#9aa3ad; }
.pm-by { color:#9aa3ad; font-size:11px; }
.pm-res { font-size:12px; color:#33404d; max-width:320px; }
.pm-undone { color:#9aa3ad; font-size:12px; font-style:italic; }
.pm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
/* toast */
.pm-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#0b3a63; color:#fff; padding:13px 20px; border-radius:10px; font-size:13.5px; box-shadow:0 8px 28px rgba(0,0,0,.25); opacity:0; transition:all .35s; z-index:10000; }
.pm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Preços m² — custo/margem + cards indústria×lojas (v3) ===== */
#precosMediaCards { display:block; }
.precos-cardrow { margin-bottom:14px; }
.precos-cardlbl { font-size:12px; font-weight:700; color:#0b3a63; margin:0 0 7px; letter-spacing:.3px; }
.precos-cardrow .precos-cards { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:10px; margin-bottom:0; }
.pcard-hero2 { background:linear-gradient(135deg,#0b6a3a,#13a05a); border:none; color:#fff; }
.pcard-hero2 .pcard-v { color:#fff; }
th.custoprod, td.custoprod { background:#f3f1fb; color:#5b3a9a; font-weight:600; text-align:right; border-color:#e0d8f3; }
th.custoprod { background:#5b3a9a; color:#fff; }
.pmarg { font-size:9.5px; font-weight:700; color:#0b8a4b; margin-top:1px; line-height:1; }
.pmarg.low { color:#c98a1a; }
.pmarg.neg { color:#c0392b; }
table.precos-grid td { vertical-align:top; }
@media (max-width:900px){ .precos-cardrow .precos-cards{ grid-template-columns:1fr 1fr; } }

/* ===== Preços m² — peso + R$/kg (v4) ===== */
th.peso, td.peso { background:#eef6f2; color:#0b6a3a; font-weight:600; text-align:right; border-color:#d6e8de; }
th.peso { background:#0b6a3a; color:#fff; }
th.peso span, th.custoprod span { font-weight:400; font-size:8.5px; opacity:.8; }
.psub { font-size:9px; font-weight:600; color:#0b8a4b; margin-top:1px; line-height:1.15; white-space:nowrap; }
.psub.low { color:#c98a1a; }
.psub.neg { color:#c0392b; }

/* ===== Preços m² — tabela média venda (v5) ===== */
table.mediatbl { margin-bottom:8px; }
table.mediatbl th.indh, table.mediatbl td.indh { background:#eef4fb; border-color:#d8e6f3; }
table.mediatbl th.indh { background:#0b5cab; color:#fff; }
table.mediatbl th.lojh, table.mediatbl td.lojh { background:#eef7f1; border-color:#d6e8de; }
table.mediatbl th.lojh { background:#0b8a4b; color:#fff; }
table.mediatbl td.b { font-weight:700; }
table.mediatbl tr.tot td { font-weight:800; background:#0b3a63; color:#fff; border-color:#0b3a63; }
table.mediatbl tr.tot td.lbl { color:#fff; }

/* ===== Preços m² — matéria-prima / simulador (v6) ===== */
.matbloco { background:#fbf9f4; border:1px solid #eee3cc; border-radius:10px; padding:12px 14px; }
table.mattbl td, table.mattbl th { font-size:12px; }
th.matc, td.matc { background:#f3f1fb; color:#5b3a9a; font-weight:700; text-align:center; border-color:#e0d8f3; font-size:10px; }
th.matc { background:#5b3a9a; color:#fff; }
.matsave { display:flex; gap:10px; align-items:center; margin-top:10px; font-size:11px; color:#6b7480; }
.matsave .btn-save { white-space:nowrap; }

/* ===== Preços m² — composição de custo + preço mínimo (v7) ===== */
.cfggrid { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:8px 0; }
.cfgcell { display:flex; flex-direction:column; gap:3px; }
.cfgcell label { font-size:9.5px; color:#6b7480; font-weight:600; text-transform:uppercase; letter-spacing:.2px; }
.cfgcell .cfgin { width:100%; text-align:right; }
.cfgcell.calc { background:#eef4fb; border:1px solid #d8e6f3; border-radius:8px; padding:5px 8px; }
.cfgcell.calc .cfgval { font-size:15px; font-weight:800; color:#0b5cab; }
th.pmin, td.pmin { background:#fdf0f4; color:#a01a4a; font-weight:800; border-color:#f3d2de; text-align:right; }
th.pmin { background:#a01a4a; color:#fff; }
th.pmin span { font-weight:400; font-size:8.5px; opacity:.85; }
@media (max-width:1100px){ .cfggrid{ grid-template-columns:repeat(4,1fr); } }

/* ===== Preços m² — subabas (v8) ===== */
.precos-subtabs{display:flex;gap:8px;margin:4px 0 14px;border-bottom:2px solid #e3e8ee;padding-bottom:0}
.psub-btn{background:transparent;border:none;border-bottom:3px solid transparent;padding:9px 16px;cursor:pointer;font-size:14px;font-weight:600;color:#6b7480;margin-bottom:-2px}
.psub-btn:hover{color:#0b3a63}
.psub-btn.active{color:#0b3a63;border-bottom-color:#0b5cab}

/* ===== Esteira produção → entrega ===== */
.est-fluxo { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.est-card { flex:1 1 130px; min-width:130px; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; cursor:pointer; background:var(--card); transition:.15s; }
.est-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.est-card.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.est-card .n { font-size:22px; font-weight:700; line-height:1.1; }
.est-card .l { font-size:11px; opacity:.75; margin-top:2px; }
.est-card .m { font-size:11px; opacity:.6; margin-top:3px; }
.est-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0;
  padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.est-bar { flex:1 1 220px; height:12px; border-radius:6px; background:rgba(128,128,128,.18); overflow:hidden; position:relative; }
.est-bar > i { display:block; height:100%; border-radius:6px; background:var(--green); transition:width .4s; }
.est-bar > u { position:absolute; top:-3px; width:2px; height:18px; background:var(--fg); opacity:.55; }
.est-aviso { margin:10px 0; padding:9px 12px; border-radius:8px; font-size:12px;
  border:1px solid rgba(234,179,8,.4); background:rgba(234,179,8,.09); }
.est-atraso { color:var(--red); font-weight:600; }

/* ===== [12/09 CM-PESSOAS] Subabas da aba Pessoas ===== */
.pes-subtabs{display:flex;gap:8px;margin:4px 0 0;flex-wrap:wrap}
.pes-sub-btn{padding:7px 14px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:13px;transition:all .2s}
.pes-sub-btn:hover{background:var(--surface-hover)}
.pes-sub-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ===== CRM de fluxo ===== */
.crm-subtabs{display:flex;gap:8px;margin:12px 0}
.crm-sub-btn{padding:8px 16px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:13px;transition:all .2s}
.crm-sub-btn:hover{background:var(--surface-hover)}
.crm-sub-btn.active{background:#0891b2;color:#fff;border-color:#0891b2}
.crm-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.crm-input{padding:6px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;font-size:13px;cursor:pointer}
.crm-tbl{width:100%;border-collapse:collapse;font-size:13px}
.crm-tbl th{text-align:left;padding:8px;border-bottom:2px solid var(--border);color:var(--text-secondary);position:sticky;top:0;background:var(--bg);white-space:nowrap}
.crm-tbl th.sort{cursor:pointer;user-select:none}
.crm-tbl th.sort:hover{color:var(--text);background:var(--surface-hover)}
.crm-muted{color:var(--text-secondary);opacity:.6}
.crm-ficha-contato{font-size:13px;color:var(--text-secondary);margin:0 0 10px;line-height:1.7}
.crm-ficha-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--text);margin:0 0 16px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.crm-filtros-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crm-colbar{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center;margin-top:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.crm-colchk{font-size:12px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.crm-colchk input{cursor:pointer}
.crm-tblwrap{overflow-x:auto}
.crm-input.active{background:#0891b2;color:#fff;border-color:#0891b2}
.crm-fybar{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;margin-top:8px;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.crm-fymes{font-size:12px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.crm-tbl td{padding:7px 8px;border-bottom:1px solid var(--border)}
.crm-tbl tr:hover td{background:var(--surface-hover)}
.crm-tier{padding:2px 8px;border-radius:10px;color:#fff;font-size:11px;font-weight:600}
.crm-rec{padding:2px 7px;border-radius:10px;color:#fff;font-size:11px}
.crm-seg{font-size:11px;color:var(--text-secondary)}
.crm-hint{font-size:12px;color:var(--text-secondary);margin:6px 0}
.crm-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.crm-modal-body{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:760px;width:92%;max-height:88vh;overflow:auto;position:relative}
.crm-fechar{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer}
.crm-ficha-head{display:flex;gap:10px;align-items:center;margin:8px 0 16px}
.crm-chart{display:flex;align-items:flex-end;gap:4px;height:160px;padding:8px;background:var(--bg-subtle);border-radius:8px}
.crm-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.crm-bar{width:70%;background:#0891b2;border-radius:3px 3px 0 0;min-height:2px}
.crm-bar-lbl{font-size:9px;color:var(--text-secondary);margin-top:4px}
.crm-mixrow{display:flex;gap:14px;flex-wrap:wrap}
.crm-mix{font-size:13px;color:var(--text)}
.crm-cfggrid{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.crm-cfggrid fieldset{border:1px solid var(--border);border-radius:8px;padding:12px}
.crm-cfggrid legend{color:var(--text-secondary);font-size:12px;font-weight:600}
.crm-cfggrid label{display:block;margin:6px 0;font-size:12px;color:var(--text-secondary)}
.crm-cfggrid input{width:90px;margin-left:8px}
.crm-save{margin-top:12px;padding:10px 20px;background:#0891b2;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}

/* ── Dashboard perf: skeleton dim + flash on change ────────────────── */
.dash-dim { opacity:.45; }
@keyframes dashFlash { 0%,15%{ background:rgba(8,145,178,.22); } 100%{ background:transparent; } }
.dash-flash{ animation:dashFlash 1.1s ease-out; border-radius:4px; }

/* ── Conciliador Cartão: bandeira logos + status ───────────────────── */
.cc-brand{display:inline-block;min-width:34px;text-align:center;padding:1px 5px;border-radius:3px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;vertical-align:middle}
.cc-pill{background:var(--surface);border:1.5px solid var(--cc,#888);color:var(--cc,#888);border-radius:14px;padding:3px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
.cc-pill:hover{filter:brightness(1.1)}
.cc-pill-off{opacity:.35;text-decoration:line-through}

/* ── Busca rápida Ctrl+K (paleta de navegação) ──────────────────────── */
.cmdk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:3000;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk{width:min(560px,92vw);background:var(--surface,#1a1f2b);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xl,0 24px 64px rgba(0,0,0,.4));overflow:hidden}
.cmdk-input{width:100%;border:none;outline:none;background:transparent;color:var(--text);font-size:16px;padding:16px 18px;border-bottom:1px solid var(--border);box-sizing:border-box}
.cmdk-list{max-height:320px;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--primary-glow,rgba(25,198,166,.14))}
.cmdk-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.cmdk-hint{font-size:11px;color:var(--muted);padding:8px 14px;border-top:1px solid var(--border)}

/* ── Skeleton loading (pulse, funciona nos 2 temas) ──────────────────── */
@keyframes skelpulse{0%,100%{opacity:.30}50%{opacity:.70}}
.skel{height:13px;border-radius:6px;background:var(--border);animation:skelpulse 1.1s ease-in-out infinite;width:80%}
.skel-row td{padding:11px 10px}
.skel-row td:nth-child(2n) .skel{width:55%}
.skel-row td:nth-child(3n) .skel{width:68%}
.skel-row td:first-child .skel{width:90%}

/* ══ DESIGN 2.0 — modais padronizados (Frente A) ══════════════════ */
/* Tamanhos: .modal-sm/.modal-lg/.modal-xl (default 440px = md) */
.modal-sm{width:360px}
.modal-lg{width:680px}
.modal-xl{width:920px}

/* Mobile: TODO modal vira bottom-sheet — desliza de baixo, largura total,
   cantos arredondados só em cima, alça de arrastar, botões em coluna cheia. */
@media (max-width: 600px){
  .modal-overlay{align-items:flex-end;justify-content:stretch;padding:0}
  .modal-overlay .modal{
    width:100%!important;max-width:100%!important;
    margin:0;border-radius:18px 18px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    max-height:92vh;padding:20px 18px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
    animation:sheetUp .28s var(--ease-out);
  }
  .modal-overlay .modal::before{
    content:"";display:block;width:42px;height:4px;border-radius:2px;
    background:var(--border);margin:0 auto 14px;
  }
  .modal-actions{flex-direction:column-reverse;gap:10px}
  .modal-actions .btn{width:100%;padding:13px;min-height:46px}
  .modal h2{font-size:17px}
}
@keyframes sheetUp{
  from{opacity:.4;transform:translateY(40%)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .modal-overlay .modal{animation:none}
}

/* ================================================================
   FASE 1 (2026-07-03) - Assinatura Belo Santo: azul da marca + logo
   Append aditivo (cascata vence os blocos originais). Verde continua
   reservado para dinheiro/status pago. Nao editar acima desta linha
   sem conferir a memoria caixa-design-padrao-fila.
   ================================================================ */
[data-theme="dark"]{
  --primary:#5f6bff;--primary-hover:#4553f5;
  --primary-glow:rgba(95,107,255,.14);--primary-surface:rgba(95,107,255,.06);
  --accent:#5f6bff;--accent-2:#969dff;
  --gradient-1:linear-gradient(135deg,#4553ff 0%,#969dff 100%);
  --shadow-primary:0 2px 12px rgba(95,107,255,.16);
}
[data-theme="light"]{
  --primary:#2a3aff;--primary-hover:#1f2ccc;
  --primary-glow:rgba(42,58,255,.10);--primary-surface:rgba(42,58,255,.05);
  --accent:#2a3aff;--accent-2:#5f6bff;
  --gradient-1:linear-gradient(135deg,#2a3aff 0%,#6d76ff 100%);
  --shadow-primary:0 2px 8px rgba(42,58,255,.14);
}
.logo-b{height:26px;width:auto;display:block;margin-right:6px;flex:0 0 auto}
.login-logo{height:60px;width:auto;display:block;margin:0 auto 16px}
.login-box p{color:var(--muted);font-size:13px;margin-bottom:22px}
/* Fase 1 (cont.): brilhos/seleções que estavam com teal cravado -> azul da marca */
.btn-login{box-shadow:0 4px 14px rgba(58,74,255,.28)}
.btn-login:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(58,74,255,.34)}
tr.row-selected{background:var(--primary-surface)!important}
tr.row-selected td{border-color:rgba(95,107,255,.18)}
.selection-bar{border-color:rgba(95,107,255,.22)}
.pill-blue{border-color:rgba(95,107,255,.16)}

/* ================================================================
   FASE 4 (2026-07-03) - UX humano: marca nos controles + mobile
   ================================================================ */
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary)}
@media (max-width:640px){
  /* grupos de filtros/abas internas quebram linha em vez de cortar */
  .fin-tabs,.table-toolbar{flex-wrap:wrap;row-gap:6px}
  .fin-tab{white-space:nowrap}
  /* Cartões: cabeçalhos de seção (flex com título+botões) empilham */
  #panelCartoes div[style*="justify-content:space-between"],
  #panelCartoes div[style*="align-items:center"]{flex-wrap:wrap;row-gap:6px}
  #panelCartoes .fin-kpi{min-width:calc(50% - 8px)}
}

/* Fase 6: menu "Mais" na barra de abas (abas de baixo uso) */
#tabMaisBtn{position:relative;cursor:pointer}
#tabMaisBtn:has(.tab.active){color:var(--primary);font-weight:700}
#tabMaisDrop{display:none;position:absolute;top:100%;left:0;min-width:190px;z-index:200;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;flex-direction:column}
#tabMaisDrop.open{display:flex}
#tabMaisDrop .tab{border-radius:8px;padding:9px 12px;white-space:nowrap;display:flex}
#tabMaisDrop .tab:hover{background:var(--primary-glow)}

/* Fase 7: dropdown do Mais fora da barra (fixed, posicionado por JS) + botão visível no mobile */
#tabMaisDrop{position:fixed}
#tabMaisBtn.mais-ativo{color:var(--primary);font-weight:700}
@media (max-width:640px){
  #tabMaisBtn{position:sticky;right:0;z-index:6;background:var(--topbar-bg);box-shadow:-10px 0 10px -8px rgba(0,0,0,.5)}
}
/* Fase 7: conciliação em largura total (metade da tela ficava vazia) */
.conciliacao-grid{display:grid;grid-template-columns:1fr !important;gap:14px}

/* Fase 7b: coluna de Ações não estoura mais a viewport — botões podem quebrar linha */
.fin-actions{white-space:normal}
td.fin-actions{max-width:230px}
td.fin-actions .fin-btn-baixar,td.fin-actions .btn{margin:2px 0}
/* Fase 7b: chip de empresa sai do arco-íris sólido -> outline discreto + dot na cor da loja
   (a cor continua servindo pra bater o olho, sem competir com vermelho=vencido etc.) */
.fin-fornecedor-emp{background:transparent !important;border:1px solid var(--border);color:var(--text-secondary,#9ca3af)}
.fin-fornecedor-emp::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--empc,#6b7280);margin-right:4px;vertical-align:0}

/* ═══ v107 (2026-07-04) — Cartões: KPIs da conferência sem sobreposição + calmaria visual ═══ */
/* .fin-kpi-sub ficava por cima do valor quando o número era longo (reporte Julio) */
#redeC6Kpis .fin-kpi{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden}
#redeC6Kpis .fin-kpi-sub{flex-basis:100%;margin-top:4px;font-size:10px;font-weight:600;white-space:normal;line-height:1.3}
#redeC6Kpis .fin-kpi-value{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* filtros dos links de pagamento: pílulas uniformes, sem texto vermelho/teal gritando */
#panelCartoes .table-toolbar .btn, #panelCartoes .btn.btn-sm{border-radius:14px}

/* v108: navegação rápida do painel Preços m² */
.precos-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.precos-nav button{background:var(--card);border:1px solid var(--border);color:var(--text-secondary);font-size:11px;font-weight:600;padding:4px 12px;border-radius:14px;cursor:pointer;transition:all .15s ease}
.precos-nav button:hover{border-color:var(--primary);color:var(--text)}

/* v109: aba 🛒 Pedido — F2 mobile */
@media (max-width: 720px) {
  #panelPedido .inp{font-size:16px} /* 16px evita o zoom automático do iOS */
  #pedEntregaBox > div{grid-template-columns:1fr !important}
  #pedPagRow{flex-direction:column;align-items:stretch}
  #pedPagRow select.inp{max-width:100% !important}
  #pedLoja,#pedTabela{max-width:48% !important;flex:1}
  #pedActions{position:sticky;bottom:8px;background:var(--surface);padding:10px 12px;border:1px solid var(--border);border-radius:10px;z-index:50;justify-content:space-between;box-shadow:var(--shadow-lg)}
  #pedObsRow{grid-template-columns:1fr}
  #pedFiscalBox{grid-template-columns:1fr}
  #panelPedido .btn-sm{min-height:40px;padding:8px 12px}
  #pedCliModal>div,#pedContatoModal>div{width:100vw;max-width:100vw;height:100dvh;margin:0;border-radius:0;overflow:auto}
  #pedEstModal>div{min-width:88vw}
  #pedProdRes{max-height:46vh}
  #pedVend{max-width:100% !important;width:100%}
  #pedLoja,#pedTabela{max-width:100% !important;width:100%}
  #pedCarrinho td{font-size:12px}
  #pedCarrinho input.inp{font-size:14px}
}

/* ══════════ 💬 Aba WhatsApp — atendimento (F1) ══════════ */
.wat-wrap{display:grid;grid-template-columns:340px 1fr;gap:0;height:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.wat-lista{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.wat-filtros{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.wat-filtro{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}
.wat-filtro.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.wat-badge{font-size:9px;font-weight:800}
#watConvList{flex:1;overflow-y:auto;min-height:0}
.wat-conv{padding:10px 12px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--transition-fast)}
.wat-conv:hover{background:var(--card-hover)}
.wat-conv.sel{background:var(--surface)}
.wat-conv-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.wat-conv-nome{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wat-conv-hora{font-size:10px;color:var(--muted);white-space:nowrap}
.wat-conv-bot{display:flex;align-items:center;gap:6px;margin-top:2px}
.wat-conv-prev{flex:1;font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wat-unread{background:var(--green);color:#fff;font-size:9px;font-weight:800;border-radius:10px;padding:1px 6px}
.wat-chip{font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;white-space:nowrap}
.wat-chip-fila{background:var(--yellow-glow,rgba(245,158,11,.15));color:var(--yellow)}
.wat-chip-atd{background:var(--badge-blue-bg,rgba(59,130,246,.15));color:var(--accent)}
.wat-chip-ok{background:var(--green-glow,rgba(16,185,129,.15));color:var(--green)}
.wat-chat{display:flex;flex-direction:column;min-height:0;position:relative}
.wat-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:34px;gap:6px}
.wat-chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.wat-voltar{display:none;background:transparent;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:4px 8px}
.wat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--bg)}
.wat-msg{max-width:72%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.wat-msg.in{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
.wat-msg.out{align-self:flex-end;background:var(--gradient-1,var(--primary));color:#fff;border-bottom-right-radius:4px}
.wat-msg.out .wat-msg-meta{color:rgba(255,255,255,.75)}
/* [17/07 #49 F3] nota interna no thread do Desk (só o time vê) */
.wat-msg.nota{align-self:center;max-width:86%;background:var(--card);background:color-mix(in srgb, var(--yellow) 14%, var(--card));border:1px dashed var(--yellow);color:var(--text);font-size:12px}
.wat-msg.nota .wat-msg-meta{color:var(--muted)}
.wat-autor{display:block;font-size:9px;font-weight:800;opacity:.85;margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px}
.wat-msg-meta{font-size:9px;color:var(--muted);margin-top:3px;text-align:right}
.wat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);align-items:flex-end}
.wat-input textarea{flex:1;resize:none;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-xs);color:var(--text);padding:9px 12px;font-size:13px;font-family:var(--font-body);max-height:110px}
.wat-input textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow,rgba(0,212,170,.15))}
.wat-btn-puxar{flex:1;background:var(--gradient-1,var(--primary));color:#fff;font-weight:700;border:none;padding:10px}
@media (max-width: 860px){
  .wat-wrap{grid-template-columns:1fr}
  /* [19/07 Julio] conversa aberta = TELA CHEIA de verdade: 100dvh respeita a barra do navegador
     e cobre a bottom-nav (z 400 > 220). O ← devolve pra lista. */
  .wat-chat{display:none;background:var(--card)}
  .wat-chat.aberto{display:flex;position:fixed;inset:0;z-index:400;height:100vh;height:100dvh}
  .wat-voltar{display:block}
  #watRoot{height:calc(100vh - 148px) !important;height:calc(100dvh - 148px) !important}
  .wat-msg{max-width:88%;font-size:14px}
  .wat-conv-nome{font-size:14.5px}
  .wat-conv-prev{font-size:12.5px}
  .wat-conv-hora{font-size:11px}
  /* cabeçalho em 2 linhas: identidade em cima, status+ações embaixo — sub NUNCA quebra em pé */
  .wat-chat-head{flex-wrap:wrap;row-gap:6px;padding:8px 10px}
  .wat-chat-head::after{content:"";flex-basis:100%;order:9;height:0}
  #watChatSub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #watJanela{order:10}
  .wat-chat-head .btn{order:11;padding:5px 8px}
  .wat-input{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}

/* F2: busca da lista + painel do cliente */
.wat-busca{margin:8px;padding:7px 10px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-xs);color:var(--text);font-size:12px}
.wat-busca:focus{outline:none;border-color:var(--primary)}
.wat-cli{display:none;border-left:1px solid var(--border);flex-direction:column;min-height:0;overflow-y:auto;background:var(--surface)}
.wat-wrap.cli-aberto{grid-template-columns:340px 1fr 320px}
.wat-wrap.cli-aberto .wat-cli{display:flex}
.wat-cli-head{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800}
.wat-cli-body{padding:12px 14px;overflow-y:auto}
.wat-cli-alerta{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-size:11px;font-weight:700;padding:8px 10px;border-radius:8px;margin-bottom:10px}
.wat-cli-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wat-cli-grid > div{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.wat-cli-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.wat-cli-grid b{font-size:13px;font-family:var(--font-data,monospace)}
.wat-cli-grid i{font-size:9px;color:var(--muted);font-style:normal}
.wat-cli-sec{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:12px 0 6px}
.wat-cli-ped{display:flex;align-items:center;gap:8px;font-size:11px;padding:5px 0;border-bottom:1px solid var(--border-subtle)}
.wat-cli-ped span:first-child{font-weight:700;min-width:56px}
.wat-cli-ped span:nth-child(3){flex:1;text-align:right;font-family:var(--font-data,monospace)}
@media (max-width: 860px){
  .wat-wrap.cli-aberto{grid-template-columns:1fr}
  .wat-cli{position:absolute;inset:0;z-index:8}
}

/* v20: respostas rápidas do atendimento */
.wat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface)}
.wat-qr{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:16px;padding:5px 12px;font-size:11px;cursor:pointer;transition:all var(--transition-fast);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wat-qr:hover{border-color:var(--primary);color:var(--primary)}

/* v22: mídia no chat */
.wat-media-img{max-width:240px;max-height:280px;border-radius:8px;cursor:pointer;display:block}
.wat-msg audio{height:36px}

/* ═══════════ v32: aba WhatsApp com cara de WhatsApp Web ═══════════ */
.wat-conv{display:flex;gap:10px;align-items:center}
.wat-conv-mid{flex:1;min-width:0}
.wat-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0;user-select:none;letter-spacing:.5px}
.wat-av-wrap{position:relative;flex-shrink:0;display:inline-flex}
.wat-av-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--card)}
.wat-conv-nome{font-size:13.5px}
.wat-msgs{background-image:radial-gradient(var(--border-subtle) 1px,transparent 1.3px);background-size:22px 22px;gap:6px;padding:16px 8%}
.wat-dia{align-self:center;margin:10px 0 4px}
.wat-dia span{background:var(--surface);border:1px solid var(--border-subtle);color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 12px;border-radius:8px;box-shadow:var(--shadow-sm)}
.wat-msg{position:relative;border-radius:10px;box-shadow:var(--shadow-sm);padding:6px 10px 8px}
.wat-msg.grp{margin-top:-3px}
.wat-msg.in.first{border-top-left-radius:2px}
.wat-msg.out.first{border-top-right-radius:2px}
.wat-msg.in.first::before{content:'';position:absolute;left:-7px;top:0;border:7px solid transparent;border-top-color:var(--card);border-right-color:var(--card);border-left-width:0}
.wat-msg.out.first::after{content:'';position:absolute;right:-7px;top:0;border:7px solid transparent;border-top-color:var(--primary);border-left-color:var(--primary);border-right-width:0}
.wat-msg-meta{float:right;margin:10px 0 0 10px;font-size:9.5px;line-height:1;white-space:nowrap}
.wat-input{gap:6px}
.wat-input textarea{border-radius:22px;padding:10px 16px}
.wat-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--gradient-1,var(--primary));color:#fff;font-size:15px;cursor:pointer;flex-shrink:0;align-self:flex-end;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm)}
.wat-send:hover{transform:scale(1.08)}
.wat-input .btn.btn-sm{border:none;background:transparent;font-size:17px;padding:7px;border-radius:50%}
.wat-input .btn.btn-sm:hover{background:var(--card-hover)}
.wat-chat-head{box-shadow:var(--shadow-sm);z-index:2}
@media (max-width:860px){.wat-msgs{padding:14px 10px}}

/* ═══ v34: filtros de gente grande ═══ */
.wat-filtros{gap:6px;padding:10px 10px 6px;border-bottom:none}
.wat-filtros.wat-refinos{padding:2px 10px 10px;border-bottom:1px solid var(--border)}
.wat-filtro{padding:8px 14px;font-size:12.5px;min-height:36px}
.wat-filtros.wat-refinos .wat-filtro{padding:5px 11px;font-size:11px;min-height:30px}
.wat-filtro .wat-badge{font-size:10px}
.wat-filtro:hover{border-color:var(--primary);color:var(--text)}
@media (max-width:860px){
  .wat-filtro{padding:10px 16px;font-size:13.5px;min-height:44px}
  .wat-filtros.wat-refinos .wat-filtro{padding:8px 13px;font-size:12px;min-height:38px}
  .wat-busca{padding:11px 14px;font-size:14px}
}

/* v35.1: mobile — cabeçalho e barra de digitação NUNCA são esmagados pelo flex */
.wat-chat-head{flex-shrink:0}
.wat-input{flex-shrink:0}
.wat-quick{flex-shrink:0}
#watChatBox{min-height:0}

/* ═══ v39: WhatsApp Desktop — título, zoom de leitura e tela cheia (08/07) ═══ */
.wat-titulo{display:flex;align-items:center;gap:8px;padding:10px 12px 2px;font-size:16px;font-weight:800;letter-spacing:-.3px}
.wat-titulo .wat-filtro{min-height:26px;padding:3px 9px;font-size:11px}
body.wat-fs .wat-wrap{position:fixed;inset:0;z-index:600;height:100vh;border-radius:0;border:none}
body.wat-fs{overflow:hidden}
.wat-wrap[data-zoom="1"] .wat-msg{font-size:14.5px}
.wat-wrap[data-zoom="2"] .wat-msg{font-size:16.5px;line-height:1.5}
.wat-wrap[data-zoom="1"] .wat-conv-nome{font-size:14px}
.wat-wrap[data-zoom="2"] .wat-conv-nome{font-size:15px}
.wat-wrap[data-zoom="1"] .wat-conv-prev{font-size:12.5px}
.wat-wrap[data-zoom="2"] .wat-conv-prev{font-size:13.5px}
.wat-wrap[data-zoom="1"] .wat-busca{font-size:14px}
.wat-wrap[data-zoom="2"] .wat-busca{font-size:15px}
.wat-filtros .wat-filtro.active{background:var(--primary);border-color:var(--primary);color:#fff}
/* v39.1: mobile — a lista não pode estourar o grid (preview nowrap forçava min-content 878px) */
.wat-lista{min-width:0;overflow-x:hidden}
.wat-conv-prev{min-width:0}

/* v49: ações da lista de orçamentos — botões maiores e mais fáceis de acertar */
#pedListaBody .btn-sm{min-width:36px;min-height:34px;font-size:17px;padding:4px 9px;margin:1px 2px;border-radius:8px}
#pedListaBody .btn-sm:hover{transform:translateY(-1px);border-color:var(--primary)}

/* v49.1: página mais larga no desktop + coluna de ações da lista sem cortar botão */
.content{max-width:1720px}
#pedListaBody td:last-child{white-space:normal;min-width:230px}
#pedListaBody td:last-child .btn-sm{display:inline-flex;align-items:center;justify-content:center;margin:2px}

/* ═══ v50 (09/07): Meus orçamentos remodelado — toolbar de filtros, tabela legível, menu ⋯, cards mobile ═══ */
.ped-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.ped-toolbar .inp{margin:0}
#pedListaQ{min-width:210px;flex:1;max-width:340px}
#pedListaEmp{max-width:200px}
#pedListaSt{max-width:180px}
.ped-date{max-width:148px}
.ped-periodo{display:flex;gap:4px}
.ped-periodo .btn{padding:6px 11px;min-width:0}
.ped-periodo .btn.on{background:var(--primary);color:#fff;border-color:var(--primary)}
#pedListaInfo{font-size:11px;color:var(--muted);margin-left:auto}
#pedListaTbl{font-size:13px}
#pedListaTbl td{padding:9px 10px;vertical-align:middle}
#pedListaTbl tbody tr:hover{background:var(--table-hover)}
.ped-cli-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ped-acts-td{text-align:right;white-space:normal;min-width:290px}
#pedListaBody .btn-sm.ped-act,.ped-card-acts .btn-sm.ped-act{display:inline-flex;align-items:center;gap:4px;font-size:13px;min-width:0;min-height:36px;padding:7px 12px;margin:2px;white-space:nowrap}
.ped-menu{position:fixed;z-index:900;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;min-width:255px}
.ped-menu-hd{font-size:11px;color:var(--muted);font-weight:700;padding:5px 12px 7px;border-bottom:1px solid var(--border-subtle,var(--border));margin-bottom:4px}
.ped-menu-it{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.ped-menu-it:hover{background:var(--card-hover,var(--card))}
.ped-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.ped-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ped-card-num{font-family:var(--font-data);font-weight:800;font-size:15px}
.ped-card-cli{font-weight:700;font-size:14px;margin:4px 0 2px}
.ped-card-sub{font-size:11px;color:var(--muted);line-height:1.5}
.ped-card-tot{font-family:var(--font-data);font-weight:800;font-size:17px;margin:6px 0 8px}
.ped-card-acts{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:720px){
  .ped-toolbar{padding:8px;gap:6px}
  #pedListaQ{min-width:100%;max-width:none;order:-1}
  #pedListaEmp,#pedListaSt{max-width:none;flex:1}
  .ped-date{flex:1;max-width:none}
  #pedListaInfo{margin-left:0;width:100%}
  .ped-card-acts .btn-sm.ped-act{min-height:42px;flex:1;justify-content:center}
}

/* ================================================================
   T0 REFORMA VISUAL 2026-07-11 — 4 temas premium (fusao com os
   modelos do Julio: Executivo Noturno / Banca Clara / Cockpit + Papel).
   APPEND-ONLY (agente concorrente). Mesmo contrato de vars do dark/light.
   dark/light = tema "Belo Santo" e seguem intocados.
   ================================================================ */
[data-theme="executivo"]{
  --bg:#0b0d13;--bg-subtle:#0d0f16;--surface:#12151e;--surface-hover:#171b26;
  --card:#12151e;--card-hover:#171b26;
  --border:#23252d;--border-subtle:#1c1f28;
  --text:#f2f2ef;--text-secondary:#9a9da6;--muted:#6d707a;
  --primary:#c8a24a;--primary-hover:#d7b25c;
  --primary-glow:rgba(200,162,74,.14);--primary-surface:rgba(200,162,74,.07);
  --accent:#c8a24a;--accent-2:#e3c887;
  --green:#4fae7c;--green-glow:rgba(79,174,124,.10);
  --red:#e08a8a;--red-glow:rgba(224,138,138,.09);
  --yellow:#d99a4e;--yellow-glow:rgba(217,154,78,.10);
  --orange:#df7d48;
  --input-bg:#14171f;--input-border:#2a2d37;
  --topbar-bg:rgba(11,13,19,.85);
  --badge-blue-bg:rgba(227,200,135,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);--shadow-xl:0 8px 32px rgba(0,0,0,.7);
  --shadow-primary:0 2px 12px rgba(200,162,74,.16);
  --card-accent:#c8a24a;--card-accent-glow:rgba(200,162,74,.05);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.04);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(255,255,255,.08);--scrollbar-thumb-hover:rgba(255,255,255,.16);
  --skeleton-base:#171b26;--skeleton-shine:rgba(255,255,255,.04);
  --gradient-1:linear-gradient(135deg,#b8923e 0%,#e3c887 100%);
}
[data-theme="banca"]{
  --bg:#f4f3f0;--bg-subtle:#edece7;--surface:#ffffff;--surface-hover:#f8f7f3;
  --card:#ffffff;--card-hover:#f8f7f3;
  --border:#e4e2dc;--border-subtle:#efede8;
  --text:#171e30;--text-secondary:#4c5265;--muted:#7a7d86;
  --primary:#2f4d8f;--primary-hover:#26407a;
  --primary-glow:rgba(47,77,143,.12);--primary-surface:rgba(47,77,143,.06);
  --accent:#2f4d8f;--accent-2:#8fa4cf;
  --green:#2c7a53;--green-glow:rgba(44,122,83,.08);
  --red:#a8442e;--red-glow:rgba(168,68,46,.08);
  --yellow:#b0762e;--yellow-glow:rgba(176,118,46,.08);
  --orange:#c2510c;
  --input-bg:#ffffff;--input-border:#d8d5cd;
  --topbar-bg:rgba(255,255,255,.9);
  --badge-blue-bg:rgba(47,77,143,.10);
  --shadow-sm:0 1px 2px rgba(23,30,48,.05);--shadow:0 2px 8px rgba(23,30,48,.07);
  --shadow-lg:0 4px 16px rgba(23,30,48,.09);--shadow-xl:0 8px 32px rgba(23,30,48,.12);
  --shadow-primary:0 2px 8px rgba(47,77,143,.14);
  --card-accent:#2f4d8f;--card-accent-glow:rgba(47,77,143,.05);
  --table-stripe:rgba(23,30,48,.015);--table-hover:rgba(23,30,48,.03);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(23,30,48,.12);--scrollbar-thumb-hover:rgba(23,30,48,.2);
  --skeleton-base:#edece7;--skeleton-shine:rgba(255,255,255,.7);
  --gradient-1:linear-gradient(135deg,#2f4d8f 0%,#101725 100%);
}
[data-theme="cockpit"]{
  --bg:#0e1412;--bg-subtle:#101815;--surface:#121a17;--surface-hover:#16201b;
  --card:#121a17;--card-hover:#16201b;
  --border:#1c2620;--border-subtle:#16201b;
  --text:#edf2ef;--text-secondary:#9fb0a8;--muted:#5f6b66;
  --primary:#35a08a;--primary-hover:#2c8a76;
  --primary-glow:rgba(53,160,138,.14);--primary-surface:rgba(53,160,138,.06);
  --accent:#35a08a;--accent-2:#7fd6c0;
  --green:#5abf8f;--green-glow:rgba(90,191,143,.10);
  --red:#e88f7d;--red-glow:rgba(232,143,125,.09);
  --yellow:#e0b568;--yellow-glow:rgba(224,181,104,.10);
  --orange:#df7d48;
  --input-bg:#121a17;--input-border:#223029;
  --topbar-bg:rgba(14,20,18,.85);
  --badge-blue-bg:rgba(127,214,192,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);--shadow-xl:0 8px 32px rgba(0,0,0,.7);
  --shadow-primary:0 2px 12px rgba(53,160,138,.16);
  --card-accent:#35a08a;--card-accent-glow:rgba(53,160,138,.05);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.04);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(255,255,255,.08);--scrollbar-thumb-hover:rgba(255,255,255,.16);
  --skeleton-base:#16201b;--skeleton-shine:rgba(255,255,255,.04);
  --gradient-1:linear-gradient(135deg,#2c8a76 0%,#7fd6c0 100%);
}
[data-theme="papel"]{
  --bg:#f4efe6;--bg-subtle:#eee8da;--surface:#fdfbf5;--surface-hover:#f8f5ec;
  --card:#fdfbf5;--card-hover:#f8f5ec;
  --border:#e0d8c6;--border-subtle:#eae3d2;
  --text:#2d2a22;--text-secondary:#5c574a;--muted:#9a917d;
  --primary:#1e3a5f;--primary-hover:#162c49;
  --primary-glow:rgba(30,58,95,.10);--primary-surface:rgba(30,58,95,.05);
  --accent:#1e3a5f;--accent-2:#8a6d2f;
  --green:#1d7a3e;--green-glow:rgba(29,122,62,.08);
  --red:#b3261e;--red-glow:rgba(179,38,30,.07);
  --yellow:#8f6a10;--yellow-glow:rgba(143,106,16,.08);
  --orange:#a3541c;
  --input-bg:#faf7ef;--input-border:#d5cbb4;
  --topbar-bg:rgba(251,248,241,.92);
  --badge-blue-bg:rgba(30,58,95,.10);
  --shadow-sm:0 1px 2px rgba(60,50,30,.06);--shadow:0 2px 8px rgba(60,50,30,.08);
  --shadow-lg:0 4px 16px rgba(60,50,30,.10);--shadow-xl:0 8px 32px rgba(60,50,30,.13);
  --shadow-primary:0 2px 8px rgba(30,58,95,.14);
  --card-accent:#1e3a5f;--card-accent-glow:rgba(30,58,95,.05);
  --table-stripe:rgba(60,50,30,.02);--table-hover:rgba(60,50,30,.045);
  --scrollbar-track:transparent;--scrollbar-thumb:rgba(60,50,30,.14);--scrollbar-thumb-hover:rgba(60,50,30,.24);
  --skeleton-base:#eee8da;--skeleton-shine:rgba(255,255,255,.7);
  --gradient-1:linear-gradient(135deg,#1e3a5f 0%,#3a5a85 100%);
}
/* botao primario nos temas de acento claro: tinta escura (contraste AA, igual aos mockups) */
[data-theme="executivo"] .btn-primary,[data-theme="executivo"] .btn-login{color:#14120a}
[data-theme="cockpit"] .btn-primary,[data-theme="cockpit"] .btn-login{color:#071210}
/* superficie do chat WhatsApp nos temas novos (mesma regra dos temas antigos) */
[data-theme="banca"] .chat-bubble-out,[data-theme="papel"] .chat-bubble-out{background:#d9fdd3;color:#111b21}
[data-theme="banca"] .chat-bubble-in,[data-theme="papel"] .chat-bubble-in{background:white;color:#111b21;border:none;box-shadow:0 1px 1px rgba(0,0,0,.06)}
[data-theme="banca"] .chat-bubble-out .chat-time,[data-theme="papel"] .chat-bubble-out .chat-time{color:rgba(0,0,0,.35)}
[data-theme="banca"] .chat-bubble-in .chat-time,[data-theme="papel"] .chat-bubble-in .chat-time{color:rgba(0,0,0,.35)}
[data-theme="banca"] .chat-att-file,[data-theme="papel"] .chat-att-file{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06)}
[data-theme="banca"] .chat-att-file:hover,[data-theme="papel"] .chat-att-file:hover{background:rgba(0,0,0,.08)}

/* [T1 2026-07-11] icones SVG no lugar de emoji (chrome): tamanho compacto p/ labels */
.si-sm{margin-right:5px;vertical-align:-2px}
.si-sm svg{width:13px;height:13px}
.stat-label .svg-icon{vertical-align:-2px}

/* ================================================================
   [T2 2026-07-11] SHELL DE BANCO — sidebar agrupada (desktop >980px)
   + bottom-nav de app (mobile <=640px). Escape: body sem .shell-side
   (localStorage caixa_shell=classic) = layout classico intacto.
   ================================================================ */
.tab-glabel{display:none}
@media (min-width:981px){
  body.shell-side .tabs{position:fixed;left:0;top:46px;bottom:0;width:216px;flex-direction:column;gap:1px;padding:10px 10px 24px;overflow-y:auto;overflow-x:hidden;border-bottom:none;border-right:1px solid var(--border);align-items:stretch;z-index:98}
  body.shell-side .tab{display:flex;align-items:center;border-bottom:none;border-radius:var(--radius-xs);padding:8px 12px;font-size:13px;white-space:nowrap}
  body.shell-side .tab.active{background:var(--primary-surface);color:var(--primary)}
  body.shell-side .tab.active::after{display:none}
  body.shell-side .tab .tab-badge{margin-left:auto}
  body.shell-side .tab-glabel{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px}
  body.shell-side .content{margin-left:216px;max-width:none}
  body.shell-side #tabMaisBtn{display:none!important}
  body.shell-side .tabs .tab[data-tab="hoje"]{order:1}
  body.shell-side .tabs .tab[data-tab="dashboard"]{order:2}
  body.shell-side .tabs .tab[data-tab="extratos"]{order:3}
  body.shell-side .tabs .tab[data-tab="pix"]{order:11}
  body.shell-side .tabs .tab[data-tab="boletos"]{order:12}
  body.shell-side .tabs .tab[data-tab="cr"]{order:13}
  body.shell-side .tabs .tab[data-tab="cobranca"]{order:14}
  body.shell-side .tabs .tab[data-tab="cartoes"]{order:15}
  body.shell-side .tabs .tab[data-tab="cp"]{order:21}
  body.shell-side .tabs .tab[data-tab="conciliacao"]{order:22}
  body.shell-side .tabs .tab[data-tab="pedido"]{order:23}
  body.shell-side .tabs .tab[data-tab="compras"]{order:24}
  body.shell-side .tabs .tab[data-tab="fechamento"]{order:25}
  body.shell-side .tabs .tab[data-tab="tms"]{order:26}
  body.shell-side .tabs .tab[data-tab="precos"]{order:27}
  body.shell-side .tabs .tab[data-tab="whats"]{order:31}
  body.shell-side .tabs .tab[data-tab="chat"]{order:32}
  body.shell-side .tabs .tab[data-tab="email"]{order:33}
  body.shell-side .tabs .tab[data-tab="crm"]{order:34}
  body.shell-side .tabs .tab[data-tab="ia"]{order:35}
  body.shell-side .tabs .tab[data-tab="pessoas"]{order:36} /* [08/09 PESSOAS] sem order a aba pulava pro topo da sidebar */
  body.shell-side .tabs .tab[data-tab="admin"]{order:41}
}
@media (max-width:640px){
  body.shell-side .tabs{display:none!important}
  body.shell-side .content{padding:14px 12px 92px}
  body.shell-side{overflow-x:hidden}
  body.shell-side .topbar{padding:8px 12px;gap:8px}
  body.shell-side .topbar-right{gap:6px;min-width:0;flex:1 1 auto;justify-content:flex-end}
  body.shell-side .user-info strong{display:none}
  body.shell-side #viewAsSel{max-width:100px;font-size:11px;padding:4px 6px}
  body.shell-side .btn-logout{padding:6px 10px;font-size:12px}
  #bottomNav{position:fixed;left:0;right:0;bottom:0;z-index:220;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--topbar-bg);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:6px 4px calc(7px + env(safe-area-inset-bottom,0px))}
  #bottomNav .bn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:4px 2px;cursor:pointer}
  #bottomNav .bn .svg-icon svg{width:20px;height:20px}
  #bottomNav .bn.active{color:var(--primary)}
  #maisSheetOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:218;display:none}
  #maisSheetOverlay.open{display:block}
  #maisSheet{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:219;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0;box-shadow:var(--shadow-xl);padding:14px 12px 12px;display:none;grid-template-columns:repeat(4,1fr);gap:6px;max-height:55vh;overflow-y:auto}
  #maisSheet.open{display:grid}
  #maisSheet .ms-it{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 6px;color:var(--text-secondary);font-family:var(--font-body);font-size:10.5px;font-weight:600;cursor:pointer}
  #maisSheet .ms-it .svg-icon svg{width:20px;height:20px}
}
@media (min-width:641px){#bottomNav,#maisSheet,#maisSheetOverlay{display:none!important}}

/* [T3.1 2026-07-11] chips de empresa disciplinadas: identidade = dot, seleção = marca */
.emp-chip-inner{position:relative;padding:4px 12px 4px 24px}
.emp-chip-inner::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--emp-color,var(--muted));transition:all .15s}
.emp-chip input:checked+.emp-chip-inner{background:var(--primary-surface);color:var(--primary);border-color:var(--primary);box-shadow:none}
.emp-chip:hover .emp-chip-inner{border-color:var(--primary);color:var(--text)}
.wat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
/* [T3.1] topbar mobile: respiro logo/sino */
@media (max-width:640px){
  body.shell-side .logo{font-size:15px;gap:1px}
  body.shell-side .logo-b{height:22px;margin-right:4px}
}

/* [T3.2 2026-07-11] acoes por linha do CP: svg no lugar de emoji + badges neutros do submenu */
.fin-btn-icon svg{width:14px;height:14px;vertical-align:-2px}
.fin-btn-icon .si-sm{margin:0}
.bank-icon-neutro{background:var(--bg-subtle)!important;color:var(--text-secondary)!important;border:1px solid var(--border)}
.bank-btn.active .bank-icon-neutro{background:var(--primary-surface)!important;color:var(--primary)!important;border-color:var(--primary)}

/* [T3.4 2026-07-11] dots de status (fim dos 🟢🟡🔴⚪ emoji) */
.dot-st{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px}

/* ================================================================
   [T4 2026-07-11] TIPOGRAFIA PREMIUM SELF-HOSTED (fusao dos mockups):
   Space Grotesk = display (titulos/valores-destaque) · Instrument Sans =
   corpo · IBM Plex Mono = dados. Sem CDN (privacidade+velocidade+offline).
   ================================================================ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/instrument-sans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/instrument-sans-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/instrument-sans-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700.woff2') format('woff2')}
:root{
  --font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-data:'IBM Plex Mono','Fira Code','Courier New',monospace;
  --font-display:'Space Grotesk',var(--font-body);
}
.section-title,.logo{font-family:var(--font-display);letter-spacing:-.2px}
.stat-value{font-family:var(--font-display);font-feature-settings:'tnum' 1;letter-spacing:-.3px}

/* [T3.6 2026-07-11] Plex Mono 700 (bold real nos valores) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-mono-700.woff2') format('woff2')}

/* ================================================================
   [REV-mobile 2026-07-12] Correções de layout no celular
   ================================================================ */
/* (A) BUG: no mobile .wat-chat é position:absolute;inset:0 — sem um ancestral
   posicionado ele se ancorava no VIEWPORT (top:0) e o cabeçalho da conversa
   (voltar/próxima/resolver) ficava ATRÁS da topbar sticky. Ancorar no .wat-wrap. */
.wat-wrap{position:relative}

/* (B) Topbar do celular em UMA linha enxuta (era 2 linhas com o badge do sino
   sobrepondo o logo). Ver-como e nome do usuário saem no mobile (power-user = desktop). */
@media (max-width:768px){
  .topbar{flex-wrap:nowrap}
  .topbar-right{gap:6px;flex-shrink:0}
  .logo{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #viewAsSel{display:none!important}
  .user-info strong{display:none}
  .user-info .badge{margin-left:0!important}
}

/* ================================================================
   [REFORMA-CPCR 2026-07-12] Usabilidade real (feedback Julio)
   ================================================================ */
/* Desktop: linha densa (era 256px pelos botões empilhados) */
.fin-table td{padding:7px 10px;vertical-align:middle}
.fin-cell-fornecedor .fin-fornecedor{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fin-actions{white-space:nowrap;text-align:right}
.fin-more-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left}
.fin-more-menu .svg-icon svg{width:13px;height:13px}

/* Mobile ≤700px: LINHA BANCÁRIA de 2 andares (era card de ~370px com labels repetidos).
   Andar 1: quem + valor · Andar 2: doc/descrição + vencimento · Andar 3: ações compactas. */
@media (max-width: 700px){
  #finBody tr, #crFinBody tr, #crBody tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"quem valor" "desc venc" "cc cc" "acoes acoes";
    gap:2px 10px; padding:9px 12px !important; margin-bottom:7px;
    align-items:baseline;
  }
  #finBody td, #crFinBody td, #crBody td{padding:0 !important}
  #finBody td::before, #crFinBody td::before, #crBody td::before{display:none !important}
  #finBody td[data-label="Fornecedor"], #crFinBody td[data-label="Cliente"], #crBody td[data-label="Cliente"]{grid-area:quem;min-width:0}
  #finBody td[data-label="Fornecedor"] .fin-fornecedor, #crFinBody td[data-label="Cliente"] .fin-fornecedor, #crBody td[data-label="Cliente"] .fin-fornecedor{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  #finBody td[data-label="Valor"], #crFinBody td[data-label="Valor"], #crBody td[data-label="Valor"]{
    grid-area:valor;text-align:right;font-weight:700;font-size:14px;white-space:nowrap}
  #finBody td[data-label="Tipo · Descrição"], #crFinBody td[data-label="Descrição"], #crBody td[data-label="Descrição"]{grid-area:desc;min-width:0}
  #finBody td[data-label="Tipo · Descrição"] .fin-descricao, #crFinBody td[data-label="Descrição"] .fin-descricao, #crBody td[data-label="Descrição"] .fin-descricao{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
  #finBody td[data-label="Vencimento"], #crFinBody td[data-label="Vencimento"], #crBody td[data-label="Vencimento"]{
    grid-area:venc;text-align:right;white-space:nowrap;font-size:11px}
  /* centro de custo: informação de classificação — 1 linha discreta (não 2 nobres) */
  #finBody td[data-label="Centro Custo · Tipo Gasto"]{grid-area:cc;min-width:0}
  #finBody td[data-label="Centro Custo · Tipo Gasto"] div{
    display:inline;font-size:10px !important;color:var(--muted) !important;font-weight:500 !important;white-space:nowrap}
  #finBody td[data-label="Centro Custo · Tipo Gasto"] div + div::before{content:' · '}
  /* ações: fileira compacta */
  #finBody td[data-label="Ações"], #crFinBody td[data-label="Ações"], #crBody td[data-label="Ações"]{
    grid-area:acoes;display:flex !important;align-items:center;gap:8px;margin-top:6px;text-align:left}
  #finBody .fin-btn-baixar, #crFinBody .fin-btn-baixar, #crBody .fin-btn-baixar{padding:5px 16px;font-size:11px;margin:0}
  /* KPIs: grid 2×2 tocável (eram 4 cartões empilhados de ~90px = 360px de rolagem) */
  .fin-kpis{display:grid !important;grid-template-columns:1fr 1fr;gap:6px}
  .fin-kpi{padding:8px 10px !important;margin:0 !important}
  .fin-kpi-value{font-size:17px !important}
  .fin-kpi-sub{font-size:10px !important}
  /* filtros: 2 colunas compactas (selects gigantes empilhados comiam a tela) */
  .fin-toolbar, .cr-toolbar{display:grid !important;grid-template-columns:1fr 1fr;gap:6px}
  .fin-toolbar > input[type="text"], .cr-toolbar > input[type="text"]{grid-column:1 / -1}
  .fin-toolbar-sep{display:none}
  .fin-date-range{grid-column:1 / -1;display:flex;gap:6px;align-items:center}
}

/* ================================================================
   [REFORMA-CPCR2 2026-07-12] Desktop: colunas caibam SEM scroll lateral
   (Baixar ficava fora da área). table-layout fixed + truncamento, só CP/CR.
   ================================================================ */
@media (min-width: 701px){
  #finTable, #crFinTable{table-layout:fixed;width:100%}
  #finTable td, #crFinTable td{overflow:hidden}
  #finTable .fin-descricao, #crFinTable .fin-descricao,
  #finTable .fin-cell-cc div, #finTable .fin-cell-tipodoc .fin-descricao{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* CP — 6 colunas */
  #finTable th:nth-child(1), #finTable td:nth-child(1){width:23%}
  #finTable th:nth-child(2), #finTable td:nth-child(2){width:20%}
  #finTable th:nth-child(3), #finTable td:nth-child(3){width:19%}
  #finTable th:nth-child(4), #finTable td:nth-child(4){width:13%}
  #finTable th:nth-child(5), #finTable td:nth-child(5){width:12%}
  #finTable th:nth-child(6), #finTable td:nth-child(6){width:13%}
  /* CR — 5 colunas */
  #crFinTable th:nth-child(1), #crFinTable td:nth-child(1){width:30%}
  #crFinTable th:nth-child(2), #crFinTable td:nth-child(2){width:28%}
  #crFinTable th:nth-child(3), #crFinTable td:nth-child(3){width:16%}
  #crFinTable th:nth-child(4), #crFinTable td:nth-child(4){width:13%}
  #crFinTable th:nth-child(5), #crFinTable td:nth-child(5){width:13%}
  /* Ações numa linha só, sem quebrar */
  #finTable .fin-actions, #crFinTable .fin-actions{white-space:nowrap;overflow:visible}
}
/* Mobile: botão Baixar do tamanho do conteúdo (não estica a largura toda) */
@media (max-width: 700px){
  #finBody td[data-label="Ações"] .fin-btn-baixar,
  #crFinBody td[data-label="Ações"] .fin-btn-baixar{flex:0 0 auto;width:auto;align-self:flex-start}
  #finBody td[data-label="Ações"], #crFinBody td[data-label="Ações"]{justify-content:flex-start}
}

/* [REFORMA-CPCR3 2026-07-12] valor com badge conciliar cortava o centavo — mais largura */
@media (min-width:701px){
  #finTable td:nth-child(2){width:19%}
  #finTable td:nth-child(3){width:17%}
  #finTable td:nth-child(4){width:16%}
  #finTable .fin-valor{white-space:nowrap;overflow:visible}
  #finTable .fin-btn-conciliar{padding:2px 5px;font-size:9px}
}

/* [REFORMA-CPCR4 2026-07-12] Desfaz o table-layout:fixed (criava desproporção:
   coluna forçada a 28% pra um PDV curto = vazio; ações espremidas). Volta ao fluxo
   NATURAL: cada coluna se ajusta ao conteúdo. Mantém só truncamento + ações com min-width. */
@media (min-width:701px){
  #finTable, #crFinTable{table-layout:auto !important}
  #finTable th, #finTable td, #crFinTable th, #crFinTable td{width:auto !important}
  /* colunas de texto: teto de largura + reticências (não estouram, não esticam) */
  #finTable .fin-cell-fornecedor{max-width:220px}
  #finTable .fin-cell-tipodoc{max-width:210px}
  #finTable .fin-cell-cc{max-width:190px}
  #crFinTable td:first-child{max-width:260px}
  #crFinTable td:nth-child(2){max-width:320px}
  #finTable .fin-cell-fornecedor .fin-fornecedor, #crFinTable td:first-child .fin-fornecedor{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ações: largura mínima confortável, alinhadas à direita, sem espremer */
  #finTable .fin-actions, #crFinTable .fin-actions{min-width:120px;white-space:nowrap;text-align:right}
  /* valor com folga garantida (badge conciliar + centavos) */
  #finTable .fin-valor, #crFinTable .fin-valor{white-space:nowrap;min-width:120px}
}

/* [REFORMA-CPCR5 2026-07-12] CP tem 6 colunas densas e ESTOURA no natural (Baixar some) →
   precisa de largura controlada. CR tem 5 colunas curtas e no fixed criava vazio → fica natural.
   Regra por tela, não a mesma pros dois. */
@media (min-width:701px){
  #finTable{table-layout:fixed !important}
  #finTable th:nth-child(1), #finTable td:nth-child(1){width:22% !important}
  #finTable th:nth-child(2), #finTable td:nth-child(2){width:19% !important}
  #finTable th:nth-child(3), #finTable td:nth-child(3){width:17% !important}
  #finTable th:nth-child(4), #finTable td:nth-child(4){width:16% !important}
  #finTable th:nth-child(5), #finTable td:nth-child(5){width:12% !important}
  #finTable th:nth-child(6), #finTable td:nth-child(6){width:14% !important}
  #finTable td:nth-child(1), #finTable td:nth-child(2), #finTable td:nth-child(3){max-width:0 !important}
  /* CR fica natural (auto do CPCR4) — só garante ações e valor sem espremer */
  #crFinTable .fin-actions{min-width:118px}
}

/* ================================================================
   [CONSOLEFIX 2026-07-12] Rótulos de grupo viraram <span> (acessibilidade:
   label sem campo é warning no DevTools). Mesmas props dos labels irmãos.
   ================================================================ */
.field .flabel{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.cfgcell .cfglab{font-size:9.5px;color:#6b7480;font-weight:600;text-transform:uppercase;letter-spacing:.2px}

/* ================================================================
   [REV-A 2026-07-12] Revisão visual CP/CR ponto-a-ponto.
   KPIs mobile 2×2 (a regra antiga da L3068 forçava 1fr !important e
   vencia a reforma); empilhamentos mobile; truncamentos desktop.
   ================================================================ */
@media (max-width: 768px){
  .fin-kpis{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
  .fin-kpis .fin-kpi{padding:10px 12px}
  .fin-kpis .fin-kpi-value{font-size:20px}
}
@media (max-width: 700px){
  /* Visão Geral: gráfico e Top 5 empilham */
  .crvg-grid{grid-template-columns:1fr !important}
  /* Conciliador: PIX órfãos e candidatos empilham */
  #concGrid{grid-template-columns:1fr !important}
  /* Contas locais: cards alinham à esquerda (herdavam right das colunas) */
  #cpLocalBody td{text-align:left !important}
  /* Mapa: linha do período quebra em vez de estourar */
  .mapa-periodo{flex-wrap:wrap;margin-left:0 !important}
  /* Cards fin: botão principal mais enxuto */
  #finBody td[data-label="Ações"] .fin-btn-baixar,
  #crFinBody td[data-label="Ações"] .fin-btn-baixar{padding:8px 16px;font-size:12.5px}
  /* Linha "mostrar todos" da paginação escapa da grid dos cards */
  #finBody tr.mob-more-row, #crFinBody tr.mob-more-row{display:block !important;padding:0}
  .mob-more-row td{display:block !important;padding:8px 2px !important}
}
/* Badge de irregularidades: some quando ainda não tem número (era um traço solto) */
#badgeIrregularidades:empty{display:none}
/* Desktop: textos longos não empurram mais as ações pra fora da tela */
@media (min-width: 701px){
  #cpMapaBody td:nth-child(3), #cpMapaBody td:nth-child(7){max-width:190px;overflow:hidden}
  #cpMapaBody td:nth-child(3) div, #cpMapaBody td:nth-child(7) div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #cpLocalBody td:nth-child(2), #cpLocalBody td:nth-child(3){max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ================================================================
   [REV-B 2026-07-12] Refinos da revisão visual (2ª passada olhando).
   ================================================================ */
@media (max-width: 700px){
  /* KPI 2×2: o R$ (sub) desce pra linha própria — não embola com o label */
  .fin-kpis .fin-kpi{flex-wrap:wrap}
  .fin-kpis .fin-kpi-sub{flex-basis:100%;margin-left:0;margin-top:2px;text-align:left}
  /* Contas locais: pseudo-label vazio + space-between jogava o texto pra direita */
  #cpLocalBody td{justify-content:flex-start !important;gap:6px}
  /* Conciliador: botões da toolbar quebram linha (Importar PIX ficava cortado) */
  #crViewConciliador div[style*="margin-left:auto"]{flex-wrap:wrap;margin-left:0 !important}
}
/* Cartão: pill de status não quebra na borda direita */
#ccContent td:last-child{white-space:nowrap}
/* Desktop: mapa e contas locais com colunas controladas (fixed) — antes o texto
   longo de fornecedor/natureza empurrava situação e ações pra fora da tela */
@media (min-width: 701px){
  #cpViewMapa table{table-layout:fixed;width:100%}
  #cpViewMapa table th:nth-child(1){width:5%}
  #cpViewMapa table th:nth-child(2){width:7%}
  #cpViewMapa table th:nth-child(3){width:19%}
  #cpViewMapa table th:nth-child(4){width:8%}
  #cpViewMapa table th:nth-child(5){width:9%}
  #cpViewMapa table th:nth-child(6){width:11%}
  #cpViewMapa table th:nth-child(7){width:14%}
  #cpViewMapa table th:nth-child(8){width:10%}
  #cpViewMapa table th:nth-child(9){width:8%}
  #cpMapaBody td{overflow:hidden}
  #cpMapaBody td:nth-child(3) div, #cpMapaBody td:nth-child(7) div,
  #cpMapaBody td:nth-child(3) span, #cpMapaBody td:nth-child(7) span{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
  #cpMapaBody td:nth-child(6){white-space:nowrap}
  #cpViewLocal table{table-layout:fixed;width:100%}
  #cpViewLocal table th:nth-child(1){width:9%}
  #cpViewLocal table th:nth-child(2){width:21%}
  #cpViewLocal table th:nth-child(3){width:24%}
  #cpViewLocal table th:nth-child(4){width:11%}
  #cpViewLocal table th:nth-child(5){width:10%}
  #cpViewLocal table th:nth-child(6){width:9%}
  #cpViewLocal table th:nth-child(7){width:16%}
  #cpLocalBody td{overflow:hidden}
  #cpLocalBody td:nth-child(2), #cpLocalBody td:nth-child(3){white-space:nowrap;text-overflow:ellipsis}
  #cpLocalBody td:nth-child(7){white-space:nowrap}
}

/* ================================================================
   [REV-C 2026-07-12] Redistribuição de larguras mapa/local desktop:
   valor não trunca dígito, ações cabem inteiras, vencimento 1 linha.
   ================================================================ */
@media (min-width: 701px){
  #cpViewMapa table th:nth-child(1){width:5%}
  #cpViewMapa table th:nth-child(2){width:6%}
  #cpViewMapa table th:nth-child(3){width:16%}
  #cpViewMapa table th:nth-child(4){width:7%}
  #cpViewMapa table th:nth-child(5){width:8%}
  #cpViewMapa table th:nth-child(6){width:11%}
  #cpViewMapa table th:nth-child(7){width:12%}
  #cpViewMapa table th:nth-child(8){width:9%}
  #cpViewMapa table th:nth-child(9){width:9%}
  #cpViewMapa table th:nth-child(10){width:17%}
  #cpViewLocal table th:nth-child(1){width:7%}
  #cpViewLocal table th:nth-child(2){width:17%}
  #cpViewLocal table th:nth-child(3){width:20%}
  #cpViewLocal table th:nth-child(4){width:10%}
  #cpViewLocal table th:nth-child(5){width:11%}
  #cpViewLocal table th:nth-child(6){width:8%}
  #cpViewLocal table th:nth-child(7){width:27%}
  #cpLocalBody td:nth-child(4), #cpLocalBody td:nth-child(5){white-space:nowrap}
}

/* [REV-D 2026-07-12] Ícones do menu ⋯ sem wrapper .svg-icon renderizavam gigantes */
.fin-more-menu button svg{width:16px;height:16px;flex:0 0 16px}

/* [REV-F 2026-07-12] Menu ⋯ no mobile abria pra fora da tela (cortava 1ª letra) */
@media (max-width: 700px){ .fin-more-menu{left:0;right:auto} }

/* ================================================================
   [REV-G 2026-07-12] Painel mobile: card Total Consolidado — a linha
   de detalhe (APIs/OF/limite) descia à direita em 2 linhas coladas
   (parecia sobreposto). Agora empilha embaixo do valor, à esquerda,
   com respiro. Subtotais dos grupos idem.
   ================================================================ */
@media (max-width: 700px){
  .dash-hero-row{flex-direction:column;align-items:flex-start;gap:6px}
  .dash-hero-right{text-align:left}
  .dash-hero-detail-label{line-height:1.6}
  .dash-group-header{flex-wrap:wrap;row-gap:2px}
  .dash-group-header-sub{text-align:left;line-height:1.5}
}

/* [REV-G2 2026-07-12] Subtotal do grupo: 2ª linha caía à direita (especificidade) */
@media (max-width: 700px){
  .dash-group-header .dash-group-header-sub, .dash-group-header-sub{text-align:left !important;margin-left:0 !important}
}

/* [REV-G3 2026-07-12] Subtotal era flex interno (text-align não afeta flex):
   no mobile vira bloco de texto corrido — quebra natural à esquerda. */
@media (max-width: 700px){
  .dash-group-header-sub{display:block !important}
  .dash-group-header-sub *{display:inline !important}
}

/* ================================================================
   [PED-REFORMA 2026-07-12] Aba Pedido: desktop 2 colunas com resumo
   sticky (total sempre visível), busca de produto em destaque, steps
   numerados, KPIs na lista, barra de total fixa no mobile.
   ================================================================ */
.ped-grid{display:grid;grid-template-columns:1fr;gap:12px}
.ped-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.ped-step{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text);margin-bottom:12px}
.ped-step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11.5px;font-weight:800;flex:0 0 22px}
.ped-aside{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;align-self:start}
.ped-aside-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text)}
.ped-fiscal-box{display:flex;flex-direction:column;gap:12px;border:1px dashed var(--border);border-radius:10px;padding:12px}
/* [29/07 Denis] chips de etiqueta (catálogo) e o ⚙️ das mensagens prontas */
.wat-etq{border:1.5px solid var(--etq,#2A3AFF);color:var(--etq,#2A3AFF);background:none;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.2;transition:background .12s,color .12s}
.wat-etq:hover{background:color-mix(in srgb, var(--etq,#2A3AFF) 12%, transparent)}
.wat-etq.on{background:var(--etq,#2A3AFF);color:#fff}
.wat-qr-cfg{opacity:.75;font-weight:600}
.wat-qr-cfg:hover{opacity:1}
@media(max-width:820px){.wat-etq{padding:8px 13px;font-size:13px}}
.ped-search{position:relative}
/* [29/07] ✕ da busca de produto — a busca fica na tela pra inserir vários seguidos */
.ped-search-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:6px 8px;line-height:1;border-radius:6px}
.ped-search-x:hover{background:var(--surface-2,rgba(128,128,128,.14));color:var(--text)}
@media(max-width:820px){.ped-search-x{right:4px;padding:10px 12px;font-size:17px}}
.ped-nopedido{font-size:10px;font-weight:700;color:var(--green);background:var(--green-soft,rgba(0,168,132,.14));border-radius:6px;padding:1px 6px;white-space:nowrap}
.ped-search .svg-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.ped-search .svg-icon svg{width:17px;height:17px}
#panelPedido .ped-inp-lg{height:46px;font-size:14.5px;padding-left:40px;width:100%}
#panelPedido .ped-inp-cli{height:42px;font-size:14px}
.ped-aside #pedActions{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
.ped-aside #pedActions > div{text-align:right}
.ped-aside #pedSalvarBtn{width:100%;justify-content:center;padding:13px;font-size:14.5px}
.ped-kpis{margin:0 0 10px}
#pedListaTbl td{padding:8px 10px}
@media (min-width: 1101px){
  .ped-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .ped-grid > .ped-card{grid-column:1}
  .ped-grid > .ped-aside{grid-column:2;grid-row:1 / span 8;position:sticky;top:72px}
}
@media (max-width: 700px){
  #pedNovoWrap{padding-bottom:104px}
  .ped-aside{gap:10px}
  #pedNovoWrap .ped-aside #pedActions{position:fixed;left:10px;right:10px;bottom:74px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;z-index:180;box-shadow:0 8px 30px rgba(0,0,0,.35);margin:0}
}

/* [PED-REFORMA2 2026-07-12] barra fixa mobile: só total + botão (o texto da prévia quebrava) */
@media (max-width: 700px){ #pedTotalTag{display:none} }

/* ================================================================
   [CONCIL-ANALISTA 2026-07-12] Fila de aprovação: card evidência
   lado a lado (extrato → título) com score e motivo.
   ================================================================ */
.csug-card{display:grid;grid-template-columns:44px minmax(0,1fr) 28px minmax(0,1fr) 260px;gap:12px;align-items:center;padding:14px 16px;margin-bottom:10px}
.csug-score{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;font-family:var(--font-data)}
.csug-cab{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.csug-valor{font-family:var(--font-data);font-weight:800;font-size:16px}
.csug-valor.red{color:var(--red)}
.csug-desc{font-size:12px;color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.csug-seta{font-size:18px;color:var(--muted);text-align:center}
.csug-motivo{font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.5}
@media (max-width: 900px){
  .csug-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"score mov" "score tit" "acao acao"}
  .csug-card .csug-score{grid-area:score}
  .csug-card .csug-mov{grid-area:mov}
  .csug-card .csug-seta{display:none}
  .csug-card .csug-tit{grid-area:tit;border-top:1px dashed var(--border);padding-top:8px}
  .csug-card .csug-acao{grid-area:acao}
}
#concilNvView .inp{padding:6px 10px}

/* ══ 13/07 (Julio) mobile: extratos + open finance + carta de anuência ══ */
@media (max-width: 768px){
  /* Extratos: filtros em linhas limpas (presets 100% / De+Até lado a lado / Consultar cheio) */
  #panelExtratos .table-toolbar{row-gap:8px}
  #panelExtratos .quick-filters{width:100%;display:flex}
  #panelExtratos .quick-filters .btn-quick{flex:1}
  #panelExtratos .table-toolbar input[type="date"]{width:calc(50% - 42px);min-width:0}
  #panelExtratos .table-toolbar > .btn-primary{flex:1 1 100%;justify-content:center}
  /* Open Finance: o painel mora num td colspan — escapa do modo-card das tabelas */
  .table-wrap table tbody tr.of-row{display:block;margin:0;padding:0;border:none;background:transparent}
  .table-wrap table tbody tr.of-row td{display:block;padding:0;border:none}
  .table-wrap table tbody tr.of-row td::before{display:none}
  /* Carta de Anuência: 2 colunas → empilhada; boletos 5 col fixas → 2 col fluidas */
  #cartaHead{flex-wrap:wrap}
  #cartaHead > div{margin-left:0!important;width:100%;display:flex;flex-wrap:wrap;gap:6px}
  #cartaGrid{display:flex!important;flex-direction:column}
  .carta-bol-head{display:none!important}
  .carta-bol-grid{grid-template-columns:1fr 1fr!important}
  .carta-bol-grid > button{grid-column:1 / -1;justify-self:end}
  /* inputs em grid têm min-width intrínseco (date/placeholder longos) e estouravam a borda */
  #bolSubPanelCarta input,#bolSubPanelCarta select{min-width:0;width:100%;box-sizing:border-box}
}

/* ── 👁 privacidade do painel (16/07) ── */
body.dash-privado .dash-hero-value,body.dash-privado .dash-hero-right,body.dash-privado .dash-hero-split,body.dash-privado .dash-mini-saldo,body.dash-privado .dash-group-header-sub{filter:blur(9px);user-select:none;pointer-events:none}
#dashEyeBtn svg{width:16px;height:16px;vertical-align:-3px}

/* [18/07] Whats — design integrado: filtros em níveis + compactação + falha destacada */
.wat-microlabel{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--muted);align-self:center;margin-right:2px;text-transform:uppercase}
.wat-filtros.wat-status{background:var(--surface);border:1px solid var(--border-subtle);border-radius:10px;padding:3px;gap:2px}
.wat-filtros.wat-status .wat-filtro{flex:1;justify-content:center;border:none;border-radius:8px;background:transparent}
.wat-filtros.wat-status .wat-filtro.active{background:var(--card);box-shadow:var(--shadow-sm);color:var(--primary)}
.wat-refinos .wat-filtro{padding:3px 9px;font-size:11px}
/* falha: bolha clara com borda vermelha — motivo legível (vermelho sobre azul não dava) */
.wat-msg.falha{border:1px solid var(--red)}
.wat-msg.out.falha{background:var(--card);color:var(--text);box-shadow:none}
.wat-msg.out.falha .wat-msg-meta{color:var(--muted)}
.wat-msg.out.falha .wat-autor{color:var(--muted)}
/* [18/07 Julio] modo TRILHO: setinha recolhe o menu lateral pra só ícones (design integrado) */
.rail-toggle{display:none}
@media (min-width:981px){
  body.shell-side .rail-toggle{order:99;margin-top:auto;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:var(--radius-xs);cursor:pointer;color:var(--muted);border:1px solid var(--border-subtle);transition:all var(--transition-fast)}
  body.shell-side .rail-toggle:hover{color:var(--primary);border-color:var(--primary)}
  body.shell-side.rail .tabs{width:64px;padding:10px 8px 18px;align-items:center}
  body.shell-side.rail .tab{position:relative;width:44px;height:40px;justify-content:center;padding:0;font-size:0;gap:0}
  body.shell-side.rail .tab .svg-icon{margin-right:0}
  body.shell-side.rail .tab .svg-icon svg,body.shell-side.rail .tab .svg-icon img{width:18px;height:18px}
  body.shell-side.rail .tab .tab-badge{position:absolute;top:3px;right:3px;margin:0;min-width:9px;height:9px;padding:0;border-radius:50%;font-size:0}
  body.shell-side.rail .tab-glabel{visibility:hidden;height:8px;padding:0;font-size:0}
  body.shell-side.rail .content{margin-left:64px}
  body.shell-side.rail .rail-toggle{width:44px}
}
/* [19/07] áudio no padrão do design: player limpo + transcrição destacada embaixo */
.wat-audio audio{width:240px;max-width:100%;height:36px;display:block}
.wat-transc{font-size:12px;line-height:1.4;border-top:1px solid var(--border-subtle);margin-top:6px;padding-top:6px;max-width:250px}
.wat-transc span{color:var(--muted);font-size:10.5px;white-space:nowrap}
/* [MOBILE-ALINHA 2026-07-25 Julio] Aba Pedido: campos e ações alinhados no celular */
@media (max-width:600px){
  /* linha do cliente: a busca ocupa a linha inteira; Novo/Sem cliente dividem a de baixo */
  .ped-inp-cli{flex:1 1 100% !important;min-width:0 !important}
  .ped-inp-cli ~ .btn{flex:1;justify-content:center}
  /* observações (interno + NF-e) empilham em vez de espremer lado a lado */
  #pedObsRow{grid-template-columns:1fr !important}
  /* ações do card (Meus orçamentos) em grade de largura igual — nada de botão torto */
  .ped-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ped-card-acts .btn-sm.ped-act{margin:0;width:100%;justify-content:center}
  /* botões do card de sucesso pós-salvar em grade igual */
  .ped-success-acts{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
  .ped-success-acts > .btn{width:100%;justify-content:center;margin:0}
}

/* [MOBILE-ALINHA 2026-07-25 Julio] Cartões: tabelas largas de finanças rolam na horizontal
   no mobile (o empilhamento global vira ilegível sem data-label nessas 11-12 colunas) */
@media (max-width:768px){
  #panelCartoes .table-wrap{overflow-x:auto}
  #panelCartoes .table-wrap table{min-width:720px}
  #panelCartoes .table-wrap table thead{display:table-header-group}
  #panelCartoes .table-wrap table tbody tr{display:table-row;border:none;margin:0;padding:0;background:none;border-radius:0}
  #panelCartoes .table-wrap table tbody td{display:table-cell;padding:6px 8px;font-size:12px}
  #panelCartoes .table-wrap table tbody td::before{content:none;margin:0}
}

/* ── Módulo Pessoas — mobile ── */
#pesBusca{font-size:16px}
#panelPessoas .card{padding:14px 16px}
@media (max-width:640px){
  #panelPessoas .card{padding:11px 13px}
  #panelPessoas [style*="gap:18px"]{gap:10px 16px !important}
  #panelPessoas .table-wrap{overflow-x:auto}
  #panelPessoas .table-wrap table thead{display:table-header-group}
  #panelPessoas .table-wrap table tbody tr{display:table-row;border:none;margin:0;padding:0;background:none;border-radius:0}
  #panelPessoas .table-wrap table tbody td{display:table-cell;padding:6px 8px;font-size:11px}
  #panelPessoas .table-wrap table tbody td::before{content:none;margin:0}
}

/* ── CP mobile compacto (Julio 25/07: "estilo do financeiro") — Mapa/Docs Fiscais ── */
@media (max-width:640px){
  /* Docs Fiscais: filtros inline compactos (antes: 1 grupo por linha, tela inteira) */
  #cpViewFiscais .fiscais-filters{flex-direction:row !important;align-items:center !important;gap:6px 12px !important}
  #cpViewFiscais .fi-grupo{display:inline-flex !important;width:auto !important;flex-wrap:wrap;margin:0;padding-bottom:0 !important;font-size:11px}
  #cpViewFiscais .fi-grupo > span:first-child{font-size:10px}
  #cpViewFiscais .fi-chip{font-size:10px}
  #cpViewFiscais .fi-chip span{padding:2px 7px}
  /* Docs Fiscais + Mapa: células do card em linha fluida (antes: 1 campo por linha, card gigante) */
  #cpViewFiscais .table-wrap table tbody tr, #cpViewMapa .table-wrap table tbody tr{padding:8px 10px !important}
  #cpViewFiscais .table-wrap table tbody tr td, #cpViewMapa .table-wrap table tbody tr td{display:inline-block;width:auto !important;padding:2px 12px 2px 0 !important;vertical-align:top;font-size:12px}
  #cpViewFiscais .table-wrap table tbody tr td::before, #cpViewMapa .table-wrap table tbody tr td::before{display:inline !important;margin-right:3px;margin-bottom:0}
  /* Mapa: KPIs compactos 2x2 */
  #cpMapaCards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #cpMapaCards .card{padding:8px 10px}
  #cpMapaCards .card-label{font-size:9px;letter-spacing:.4px}
  #cpMapaCards .card-value{font-size:19px;line-height:1.2}
  #cpMapaCards .card-sub{font-size:10px}
  /* Mapa: filtros/botões compactos */
  #cpViewMapa .quick-filters .btn{padding:4px 9px;font-size:11px}
  #cpViewMapa .mapa-periodo{margin-left:0 !important;flex-wrap:wrap}
  #cpViewMapa .input-date{font-size:12px;padding:4px 6px}
}


/* DDA: linha que entrou (ou mudou de vencimento) depois da atualização em segundo plano.
   Flash curto e discreto — o objetivo é o olho notar, não a tela piscar. */
@keyframes ddaFlashIn {
  0%   { background: rgba(16,185,129,.30); }
  100% { background: transparent; }
}
#cpDdaBody tr.dda-flash { animation: ddaFlashIn 2.2s ease-out 1; }

/* Linha que saiu da fila (pagou): some suave em vez de desaparecer de repente. */
@keyframes ddaFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateX(6px); }
}
#cpDdaBody tr.dda-saiu { animation: ddaFadeOut .5s ease-in forwards; }

/* ═══ [25/09 PED-V2] aba Pedido: busca F9 com quantidade ao lado, Dividir ⇄ Tudo em UN, etapas 1-3 e resumo ═══ */
#panelPedido .ped-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#panelPedido .ped-row + .ped-row{margin-top:8px}
#panelPedido .ped-sec{padding:12px 0 10px;border-top:1px solid var(--border-subtle,var(--border))}
#panelPedido .ped-step + .ped-sec{border-top:0;padding-top:0}
.ped-sec-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}
.ped-lbl-inline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text)}
.ped-ck{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-height:40px;color:var(--text)}
.ped-ck input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
.ped-muted{color:var(--muted)}
.ped-sm{font-size:11px}
.ped-warn{color:var(--orange);font-weight:700}
.ped-neg{color:var(--red)}
.ped-pos{color:var(--green)}
#panelPedido #pedLoja{max-width:210px}
#panelPedido #pedTabela{max-width:190px}
#panelPedido #pedVend{max-width:230px}
#panelPedido .ped-inp-cli{flex:1;min-width:220px}
.ped-inp-forma{min-width:230px;max-width:320px}
.ped-inp-mf{min-width:230px;max-width:280px}
.ped-inp-num{width:110px}
.ped-inp-pct{width:74px}
.ped-inp-veic{min-width:180px;max-width:220px}
.ped-inp-desc{min-width:210px}
.ped-inp-data{width:150px}
#panelPedido .ped-btn-44{min-height:40px;font-weight:700}
.ped-btn-cotar{border-color:var(--primary)}
.ped-transp{display:block;position:relative;margin-top:8px}
.ped-entrega{margin-top:10px;padding:10px;border:1px dashed var(--border);border-radius:8px}
.ped-cred{font-size:12px;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border)}
.ped-obs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.ped-obs textarea{min-height:52px}
/* busca */
.ped-step .ped-f9-btn{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:700;min-height:36px;border-color:var(--primary)}
.ped-f9-btn kbd,.ped-bm kbd,.ped-qp kbd{font-family:var(--font-data);font-size:10.5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin-left:4px;color:inherit;opacity:.8;background:transparent}
#panelPedido .ped-search-x,.ped-bm .ped-search-x{width:42px;height:42px;right:3px;padding:0;font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;justify-content:center;border-radius:8px}
#panelPedido #pedProdX[style*="none"]{display:none !important}
.ped-prod-res{max-height:460px;overflow:auto;margin-top:4px}
.ped-pb{width:100%;font-size:13px}
.ped-pb td{vertical-align:middle;padding:7px 8px}
.ped-pb tr.lin{cursor:pointer}
.ped-pb tr.lin:hover>td{background:var(--table-hover)}
.ped-pb tr.sel>td{background:var(--table-hover);box-shadow:inset 3px 0 0 var(--primary)}
.ped-pb .cod{font-family:var(--font-data);color:var(--muted);white-space:nowrap}
.ped-pb .num{text-align:right;font-family:var(--font-data);white-space:nowrap}
.ped-pb-mais{font-size:16px;color:var(--primary);font-weight:800}
.ped-pb tr.ped-pb-qp>td{padding:0 8px 6px;background:transparent}
.ped-u{display:inline-block;font-size:11.5px;border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin:1px 4px 1px 0;white-space:nowrap;font-family:var(--font-data);color:var(--muted)}
.ped-u b{color:var(--text)}
.ped-qp{background:var(--surface);border:1px solid var(--primary);border-radius:10px;padding:10px 12px;margin:2px 0 6px;cursor:default;box-shadow:var(--shadow-sm)}
.ped-qp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ped-stepq{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--input-bg)}
.ped-stepq button{width:44px;height:44px;border:0;background:var(--surface);color:var(--text);font-size:20px;font-weight:800;cursor:pointer}
.ped-stepq input{width:86px;height:44px;border:0;text-align:center;font-size:17px;font-weight:700;background:var(--input-bg);color:var(--text);font-family:var(--font-data)}
.ped-qp-add{min-height:44px;padding:0 18px;font-weight:700}
.ped-qp-prev{margin-top:8px;font-size:13px;line-height:1.5}
.ped-qp-prev b{font-family:var(--font-data)}
/* Dividir ⇄ Tudo em UN (carrinho e busca) */
.ped-modo{display:inline-flex;align-items:stretch;margin-top:6px;flex-wrap:wrap;row-gap:4px}
.ped-modo-b{min-height:36px;padding:4px 11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.ped-modo-b:first-child{border-radius:8px 0 0 8px}
.ped-modo-b + .ped-modo-b{border-radius:0 8px 8px 0;border-left:0}
.ped-modo-b.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ped-modo-b:not(.on):hover{border-color:var(--primary)}
.ped-modo-s{margin-left:0;flex:1 1 100%;min-height:36px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--text);padding:2px 6px;max-width:120px}
#pedCarrinho td:nth-child(5){white-space:nowrap}
#panelPedido .ped-f4-det{font-size:12px;margin-top:4px;color:var(--text)}
/* modal F9 */
.ped-bm{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:3vh 16px}
.ped-bm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xl);width:min(1320px,100%);height:94vh;display:flex;flex-direction:column;overflow:hidden}
.ped-bm-hd{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.ped-bm-hd .ped-search{flex:1;position:relative}
.ped-bm-hd .ped-search .svg-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.ped-bm-hd input.inp{height:52px;font-size:17px;padding-left:44px;padding-right:52px;width:100%;margin:0}
.ped-bm-hd .ped-search-x{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer}
.ped-bm-info{padding:7px 16px;font-size:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border-subtle,var(--border))}
.ped-bm-res{overflow:auto;padding:0 12px 10px;flex:1}
.ped-bm-res .ped-pb thead th{position:sticky;top:0;background:var(--surface);z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.ped-bm-ft{padding:8px 16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.ped-bm-vazio{padding:28px;text-align:center;color:var(--muted);font-size:13.5px}
body.ped-bm-on{overflow:hidden}
/* cards da busca (celular) */
.ped-pbc{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:6px 0;background:var(--card);cursor:pointer}
.ped-pbc.sel{border-color:var(--primary)}
.ped-pbc-t{font-weight:700;font-size:14px;line-height:1.3}
.ped-pbc-s{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.ped-pbc-est{margin-left:auto;text-align:right;font-family:var(--font-data)}
.ped-pbc-u{margin-top:6px}
/* resumo */
.ped-resumo{font-size:12.5px;font-family:var(--font-data)}
.ped-rs-l{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.ped-rs-forte{font-weight:800}
.ped-rs-desc{color:var(--green)}
.ped-rs-total{font-weight:800;font-size:14.5px}
.ped-rs-sep{border-top:1px solid var(--border);margin:6px 0}
.ped-difal{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:9px 10px;border:1px solid var(--orange);border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;color:var(--text);min-height:44px}
.ped-difal input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--orange)}
.ped-difal-t{flex:1;line-height:1.35}
.ped-difal-v{font-family:var(--font-data);white-space:nowrap}
.ped-difal.on{background:var(--yellow-glow,rgba(250,200,50,.10))}
.ped-difal-isento{font-size:11px;margin:3px 0 4px;text-align:right;font-family:var(--font-body)}
.ped-difal-isento a{cursor:pointer;color:var(--muted);text-decoration:underline}
.ped-resumo-pag{font-size:12.5px;display:flex;flex-direction:column;gap:3px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.ped-dg-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.ped-dg-hint .btn{margin-left:6px;padding:2px 10px;min-height:28px}
@media (max-width:820px){
  /* 360 px: o `1fr` do grid respeitava o min-content do carrinho/selects ⇒ card com 376-390 px numa tela de 360 */
  #panelPedido .ped-grid{grid-template-columns:minmax(0,1fr) !important}
  #panelPedido .ped-grid>*{min-width:0;max-width:100%}
  #panelPedido #pedCarrinhoTable{width:100%;table-layout:fixed}
  #panelPedido #pedCarrinho td{word-break:break-word}
  #panelPedido #pedVend{flex:1;min-width:0;max-width:100% !important}
  .ped-bm{padding:0}
  .ped-bm-box{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .ped-bm-hd{padding:10px}
  .ped-bm-hd input.inp{height:48px;font-size:16px}
  .ped-bm-hd .btn{min-height:48px}
  .ped-bm-info{padding:6px 10px;gap:8px}
  .ped-bm-res{padding:0 8px 12px}
  .ped-bm-ft{display:none}
  .ped-step .ped-f9-btn{min-height:40px}
  #panelPedido .ped-row>select.inp,#panelPedido .ped-row>input.inp,#panelPedido .ped-row>.ped-inp-cli{flex:1 1 100%;max-width:100% !important;min-width:0;width:100%}
  #panelPedido .ped-row>.btn{flex:1 1 calc(50% - 4px);justify-content:center}
  #panelPedido .ped-lbl-inline{flex:1 1 100%;justify-content:space-between}
  #panelPedido .ped-lbl-inline>select,#panelPedido .ped-lbl-inline>input{flex:1;max-width:none;min-width:0}
  #panelPedido .ped-btn-44{min-height:44px}
  .ped-obs{grid-template-columns:1fr}
  .ped-qp-row{gap:8px}
  .ped-qp-add{flex:1 1 100%;justify-content:center}
  .ped-stepq{flex:1 1 auto}
  .ped-stepq input{flex:1;width:auto;min-width:60px}
  .ped-modo{display:flex;width:100%;flex-wrap:wrap}
  .ped-modo-b{min-height:44px;flex:1}
  .ped-modo-s{min-height:44px;flex:1 1 100%;margin:6px 0 0;max-width:none}
  .ped-qp .ped-modo{flex:1 1 100%}
  .ped-ck{min-height:44px}
  .ped-difal{min-height:48px}
}
/* [26/09 PED-V4] faixa de falta de estoque junto do Salvar */
.ped-semest{border:1px solid var(--orange);border-radius:10px;padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:4px;background:var(--bg);color:var(--text)}
.ped-semest.auto{border-color:var(--primary)}
.ped-semest-t{font-weight:800}
.ped-semest-ck{margin-top:4px}
/* faixa Dividir ⇄ UN do carrinho no desktop */
#pedCarrinho tr.ped-modo-tr>td{padding:0 12px 8px;border-top:0}
#pedCarrinho tr.ped-modo-tr .ped-modo{margin-top:0}
#pedCarrinho tr.ped-modo-tr .ped-modo-s{flex:0 0 auto;margin-left:8px;max-width:240px}

/* [25/09 F1] Celular: bolinha do chip por cima da 1ª letra no CP/CR (o padding !important de
   #cp/#crEmpresaFilter apagava o recuo de 24px do ::before) e barras que saíam da tela (.content corta). */
@media (max-width: 900px) {
  #cpEmpresaFilter .emp-chip-inner, #crEmpresaFilter .emp-chip-inner { padding-left: 22px !important; }
  #bolEmpresaChips > div:last-child { flex-wrap: wrap; margin-left: 0 !important; width: 100%; justify-content: flex-end; }
  #bolSyncInfo { white-space: normal !important; }
  #panelTms div:has(> #tmsSubPreTms), #panelCobranca div:has(> #cobIntraToggle), #panelCrm .crm-subtabs,
  #panelCartoes div:has(> #btnLinks_todos), #panelPrecos .precos-subtabs { flex-wrap: wrap; }
}
#panelPrecos :has(> table.precos-grid) { overflow-x: auto; }

/* [25/09 HOJE] aba Hoje: tabela por empresa (desktop) / card por empresa (celular) + mês lado a lado */
.hj-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.hj-info{font-size:12px;color:var(--text-secondary)}
.hj-aviso{padding:8px 12px;border-radius:8px;margin-bottom:8px;font-size:12.5px;background:#fef3c7;color:#78350f;border-left:4px solid #f59e0b}
.hj-aviso.erro{background:#fee2e2;color:#7f1d1d;border-left-color:#dc2626}
.hj-carregando{padding:14px 16px;color:var(--text-secondary)}
.hj-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}
table.hj-tab{width:100%;border-collapse:collapse;font-size:13px}
.hj-tab th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);font-weight:600;padding:8px 12px;text-align:right;white-space:nowrap;background:var(--bg-subtle)}
.hj-tab th.hj-grp{text-align:center;border-bottom:1px solid var(--border);color:var(--text)}
.hj-tab th:first-child,.hj-tab td:first-child{text-align:left}
.hj-tab td{padding:9px 12px;text-align:right;border-top:1px solid var(--border-subtle);white-space:nowrap;vertical-align:top}
.hj-tab td b{font-family:var(--font-data);font-weight:700}
.hj-tab td small,.hj-linha small{display:block;font-size:11px;color:var(--text-secondary);font-weight:400}
.hj-tab tr.hj-sub td{background:var(--bg-subtle);font-weight:600}
.hj-tab tr.hj-tot td{background:var(--bg-subtle);font-weight:800;border-top:2px solid var(--border)}
.hj-click{cursor:pointer}
.hj-click:hover{background:var(--table-hover);outline:1px solid var(--primary);outline-offset:-1px}
.hj-na,.hj-tab td.hj-na{color:var(--text-secondary);font-style:italic}
.hj-cards{display:none}
.hj-card{padding:12px 14px}
.hj-card h4,.hj-mes-card h4{margin:0 0 6px;font-size:14px;font-weight:800}
.hj-card.hj-sub,.hj-card.hj-tot{background:var(--bg-subtle)}
.hj-sec{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);font-weight:600;margin-top:8px}
.hj-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dotted var(--border)}
.hj-linha:last-child{border-bottom:0}
.hj-linha>span:last-child{font-family:var(--font-data);font-weight:600;text-align:right;white-space:nowrap}
.hj-dif>span:last-child{color:var(--yellow)}
.hj-mes-tit{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);font-weight:700;margin:6px 0 8px}
.hj-mes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hj-mes-card{padding:14px 16px}
@media (max-width:900px){.hj-wrap{display:none}.hj-cards{display:grid;gap:10px;margin-bottom:14px}.hj-mes{grid-template-columns:1fr}.hj-linha.hj-click{min-height:40px}}
/* [25/09 HOJE] cabe em 1440: cabeçalho e detalhe quebram linha, só o valor fica numa linha */
.hj-tab th{white-space:normal;padding:8px 10px}
.hj-tab td{padding:9px 10px}
.hj-tab td small{white-space:normal;max-width:190px;margin-left:auto}
.hj-tab td:first-child{white-space:normal;min-width:130px}

/* [25/09 F2] Componente único de filtro — empresa (.empf) e período (.perf) — public/filtros.js */
.empf{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.empf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;min-height:30px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-secondary);font:600 12px/1.1 var(--font-body);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.empf-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:0 0 8px}
.empf-chip.empf-todas::before{display:none}
.empf-chip.empf-grp{border-style:dashed}
.empf-chip:hover{border-color:var(--c,var(--primary));color:var(--text)}
.empf-chip.on{background:var(--primary-surface,rgba(59,130,246,.12));border-color:var(--primary);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.empf-chip:focus-visible,.perf-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.perf{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.perf-presets{display:flex;flex-wrap:wrap;gap:4px}
.perf-btn{padding:4px 10px;min-height:28px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font:600 11.5px/1.1 var(--font-body);cursor:pointer;white-space:nowrap}
.perf-btn:hover{color:var(--text);border-color:var(--primary)}
.perf-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}
.perf-datas{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary)}
.perf-datas input{padding:3px 6px;border-radius:6px;border:1px solid var(--border);background:var(--input-bg,var(--card));color:var(--text);font-size:12px}
.perf-tipo{padding:3px 6px;border-radius:6px;border:1px solid var(--border);background:var(--input-bg,var(--card));color:var(--text);font-size:12px}
.perf-resumo{font-size:11.5px;color:var(--text-secondary);font-weight:600}
@media (min-width:1100px){
  #panelCp.cp-layout-active.active #cpEmpresaFilter .empf,#panelCr.cr-layout-active.active #crEmpresaFilter .empf{flex-direction:column;align-items:stretch;flex-wrap:nowrap;width:100%}
  #panelCp.cp-layout-active.active #cpEmpresaFilter .empf-chip,#panelCr.cr-layout-active.active #crEmpresaFilter .empf-chip{justify-content:center}
  #panelCp.cp-layout-active.active #cpEmpresaFilter .empf-sub,#panelCr.cr-layout-active.active #crEmpresaFilter .empf-sub{margin-left:14px}
}
@media (max-width:900px){
  #cpEmpresaFilter .empf,#crEmpresaFilter .empf,#bolEmpF.empf{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .empf-chip{min-height:36px;flex:0 0 auto}
  .perf-btn{min-height:34px}
  .perf-datas input{min-height:34px}
}
/* [25/09 F2] celular: o componente de empresas ocupa a largura natural e quem rola é a barra (#cp/#crEmpresaFilter) */
@media (max-width:900px){#cpEmpresaFilter .empf,#crEmpresaFilter .empf{flex:0 0 auto;overflow:visible;max-width:none}}
@media (max-width:900px){.fin-toolbar>.perf,.fin-toolbar .perf{flex:1 1 100%;min-width:0;grid-column:1 / -1;width:100%}.perf-datas input{flex:1 1 0;min-width:0}.perf-datas{flex:1 1 100%}}

/* [25/09 HOJE-MÊS] sub-blocos do mês na aba Hoje (details: aberto no computador, fechado no celular) */
.hj-bloco{padding:0;margin-bottom:12px;overflow:hidden}
.hj-bloco>summary{cursor:pointer;padding:12px 16px;font-weight:800;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hj-bloco>summary::-webkit-details-marker{display:none}
.hj-bloco>summary::before{content:"▸";color:var(--text-secondary);transition:transform .15s}
.hj-bloco[open]>summary::before{transform:rotate(90deg)}
.hj-bloco>.hj-wrap,.hj-bloco>.hj-regra,.hj-bloco>.hj-top,.hj-bloco>.hj-na{margin:0 16px 12px}
.hj-per{font-size:11px;font-weight:600;color:var(--text-secondary)}
.hj-regra{font-size:11.5px;color:var(--text-secondary)}
.hj-lista{text-align:left;white-space:normal;line-height:1.5}
.hj-exp{margin-left:6px;border:1px solid var(--border);background:transparent;color:var(--primary);border-radius:999px;padding:2px 8px;font-size:11px;cursor:pointer}
.hj-sub-tab{padding:0 0 8px 24px!important;background:var(--bg-subtle)}
.hj-sub-tab .hj-tab th{background:transparent}
.hj-tab tr.hj-fam td{background:var(--bg-subtle);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-secondary)}
.hj-tab tr.hj-dest td:first-child{font-weight:800}
.hj-tab tr.hj-dest td b{color:var(--primary)}
.hj-dif-v{color:var(--yellow)}
.hj-top>summary{cursor:pointer;font-size:12.5px;font-weight:700;padding:6px 0}
@media (max-width:900px){.hj-wrap.hj-wrap-m{display:block}.hj-bloco>.hj-wrap{margin:0 8px 10px}}

/* [25/09 F3] Boletos: matriz empresa × banco/conta, grupos por empresa, colunas novas */
.bol-matriz{margin:0 0 12px}
.bm-tit{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);font-weight:700;margin:4px 2px 6px}
.bm-tit span{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}
.bm-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.bm-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.bm-tab th,.bm-tab td{padding:8px 10px;border-top:1px solid var(--border-subtle);text-align:right;white-space:nowrap}
.bm-tab thead th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);background:var(--bg-subtle);border-top:0}
.bm-tab th:first-child{text-align:left}
.bm-tab td b{font-family:var(--font-data);font-weight:700}
.bm-tab td small{display:block;font-size:10.5px;color:var(--text-secondary)}
.bm-tab .bm-ve{color:var(--red)} .bm-tab .bm-pg{color:var(--green)}
.bm-cel,.bm-colh,.bm-linh,.bm-tot th{cursor:pointer}
.bm-cel:hover,.bm-colh:hover,.bm-linh:hover{background:var(--table-hover)}
.bm-tab .on{background:var(--primary-surface,rgba(59,130,246,.12));box-shadow:inset 0 0 0 2px var(--primary)}
.bm-tab tr.bm-tot td,.bm-tab tr.bm-tot th{background:var(--bg-subtle);font-weight:800}
.bm-vazio{color:var(--text-secondary)}
#boletosBody tr.bol-grupo td{background:var(--bg-subtle);font-size:12.5px;padding:8px 12px;cursor:pointer;border-left:3px solid var(--primary)}
#boletosBody tr.bol-grupo .bg-seta{display:inline-block;margin-right:6px;transition:transform .15s}
#boletosBody tr.bol-grupo.fechado .bg-seta{transform:rotate(-90deg)}
.bol-conta{white-space:nowrap;font-size:12px;color:var(--text-secondary)}
.bol-pago-em{text-align:center;font-size:12px;color:var(--text-secondary)}
.bol-pago-em.tem{color:var(--green);font-weight:600}
.bol-intra{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
@media (max-width:700px){#boletosBody tr.bol-grupo{display:block;border-radius:10px;margin-bottom:8px}#boletosBody tr.bol-grupo td{display:block;border:0}#boletosBody tr[hidden]{display:none!important}}

/* [25/09 F3] CP/CR: grupos por empresa, conta pagadora, legenda dos selos; Boletos compacto no celular */
#finBody tr.fin-grupo td,#crFinBody tr.fin-grupo td{background:var(--bg-subtle);font-size:12.5px;padding:8px 12px;cursor:pointer;border-left:3px solid var(--primary)}
tr.fin-grupo .bg-seta{display:inline-block;margin-right:4px;transition:transform .15s}
tr.fin-grupo.fechado .bg-seta{transform:rotate(-90deg)}
.fin-cell-port{font-size:12px;color:var(--text-secondary);white-space:nowrap}
@media (max-width:700px){
  #finBody tr.fin-grupo,#crFinBody tr.fin-grupo{display:block;border-radius:10px;margin-bottom:8px}
  #finBody tr.fin-grupo td,#crFinBody tr.fin-grupo td{display:block;border:0}
  #finBody tr[hidden],#crFinBody tr[hidden]{display:none!important}
  #boletosBody td[data-label="Empresa"],#boletosBody td.bol-conta,#boletosBody td[data-c="desc"],#boletosBody td[data-c="vend"]{display:inline-block!important;width:auto!important;margin-right:10px}
  #boletosBody td[data-label="Empresa"]::before,#boletosBody td.bol-conta::before,#boletosBody td[data-c="desc"]::before,#boletosBody td[data-c="vend"]::before{display:none!important}
  #boletosBody td.bol-pago-em:not(.tem){display:none!important}
}

/* [25/09 F3] celular: conta pagadora com rótulo; lojas do PIX/Cartões */
@media (max-width:700px){.fin-table tr td.fin-cell-port::before{content:"Conta: ";display:inline!important;font-size:10px}}
#pixLojaChecks.empf,#cartEmpF.empf{flex:1 1 auto}

/* 📱 [05/10 UX-MOBILE] viewport-fit=cover: a barra de status / notch do iPhone não cobre o topo nem os lados.
   Com inset 0 (Android, desktop, Safari com barra) a borda tem 0px: nada muda. */
.topbar{border-top:env(safe-area-inset-top,0px) solid transparent}
@media (max-width:768px){body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}}

/* 📱 [05/10 UX-MOBILE r2] buscando produto no celular, a barra fixa de Total/Salvar cobria o campo e a lista.
   Com o foco na busca (ou na lista de resultados) ela recolhe pra uma pílula só com o TOTAL no canto de cima (embaixo ela tampava o preço do 1º resultado), que não
   recebe toque; saiu da busca, volta inteira. Só CSS (:has) — navegador sem :has fica como era. */
@media (max-width: 700px){
  #pedNovoWrap:has(#pedProdQ:focus, #pedProdRes:focus-within) .ped-aside #pedActions{left:auto;right:10px;top:calc(62px + env(safe-area-inset-top,0px));bottom:auto;padding:6px 12px;border-radius:999px;gap:0 !important;pointer-events:none;opacity:.95}
  #pedNovoWrap:has(#pedProdQ:focus, #pedProdRes:focus-within) .ped-aside #pedActions > .btn{display:none !important}
  #pedNovoWrap:has(#pedProdQ:focus, #pedProdRes:focus-within) .ped-aside #pedActions > div{font-size:14px !important;text-align:right}
}