/* Scrollbars modernos — aplicado a todo */
*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.35);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.6);background-clip:content-box;border:2px solid transparent}
/* Versión clara para sidebar oscura */
aside.sidebar{scrollbar-color:rgba(148,163,184,.25) transparent}
aside.sidebar *::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);background-clip:content-box}
aside.sidebar *::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.5);background-clip:content-box}

:root{
  --vcm-blue:#307FE2;
  --vcm-blue-dark:#1F5CB8;
  --vcm-blue-light:#E8F1FD;
  --vcm-black:#0A0A0A;
  --vcm-gray-900:#171717;
  --vcm-gray-700:#3a3a3a;
  --vcm-bordo:#A1234B;
  --vcm-lavanda:#6455C7;
  --vcm-naranja:#E04E39;
  --vcm-maiz:#D0A400;
  --row-cobrado:#ECFDF3;   /* green light */
  --row-parcial:#FEF7E0;   /* yellow light */
}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ========== Sidebar ========== */
aside.sidebar{transition:width .22s ease; width:240px; position:relative}
body.sidebar-collapsed aside.sidebar{width:68px}
body.sidebar-collapsed .sidebar-label{display:none}
body.sidebar-collapsed .sidebar-foot-text{display:none}
body.sidebar-collapsed .nav-btn{justify-content:center; padding-left:0; padding-right:0}
body.sidebar-collapsed .nav-btn span.icon{font-size:1.15rem}
body.sidebar-collapsed .sidebar-header{justify-content:center; padding:1rem .5rem}
body.sidebar-collapsed .logo-wrap .brand-logo{width:40px;height:auto}
body.sidebar-collapsed .sidebar-header{padding:.9rem .5rem}

.sidebar-header{display:flex;align-items:center;justify-content:center;padding:1.1rem 1rem;border-bottom:1px solid #1f1f1f}
.logo-wrap{display:flex;align-items:center;justify-content:center;color:#fff}
.logo-wrap .brand-logo{width:90px;height:auto;display:block;transition:width .22s ease}

/* Edge-toggle: circular, always visible on right edge of sidebar */
.edge-toggle{
  position:absolute; top:24px; right:-13px; z-index:10;
  width:26px; height:26px; border-radius:50%;
  background:var(--vcm-blue); color:#fff; border:2px solid var(--vcm-black);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.75rem; font-weight:700;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition: transform .2s ease, background .15s;
}
.edge-toggle:hover{background:var(--vcm-blue-dark); transform:scale(1.08)}
.edge-toggle .chev{display:inline-block; transition: transform .22s ease; line-height:1}
body.sidebar-collapsed .edge-toggle .chev{transform:rotate(180deg)}

/* KPI bar que queda pegado arriba al scrollear */
.kpi-sticky{position:sticky;top:0;z-index:10;background:#f1f5f9;padding:.5rem 0;margin-top:-.5rem}
.kpi-sticky.shadow{box-shadow:0 6px 12px -10px rgba(0,0,0,.25)}
.filters-sticky{position:sticky;top:0;z-index:10;background:#f1f5f9;padding-top:.5rem;margin-top:-.5rem;padding-bottom:.25rem}
.filters-sticky.shadow{box-shadow:0 6px 12px -10px rgba(0,0,0,.25)}
.clave, .clave-visible{cursor:pointer;font-family:ui-monospace,monospace;font-size:.78rem;padding:.1rem .35rem;border-radius:.25rem;background:#f1f5f9}
.clave:hover, .clave-visible:hover{background:var(--vcm-blue-light);color:var(--vcm-blue-dark)}
.btn-icon-mini{background:transparent;border:1px solid #e2e8f0;width:26px;height:24px;border-radius:.25rem;cursor:pointer;font-size:.85rem;padding:0}
.btn-icon-mini:hover{background:var(--vcm-blue-light);border-color:var(--vcm-blue)}
/* Celdas inline-editable */
.cell-click{cursor:pointer;position:relative}
.cell-click:hover{background:var(--vcm-blue-light);outline:1px solid var(--vcm-blue)}
.cell-click:hover::after{content:'✎';position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:.65rem;color:var(--vcm-blue);opacity:.7}
.cell-ed{width:100%;min-width:120px}

/* Tabla con freeze de header + primera columna */
.freeze-table table thead th{position:sticky;top:0;z-index:5;background:#f8fafc}
.freeze-table table tbody td:first-child,
.freeze-table table thead th:first-child{position:sticky;left:0;z-index:4;background:#fff}
.freeze-table table thead th:first-child{z-index:7;background:#f8fafc}
.freeze-table table tbody tr:hover td:first-child{background:#f8fafc}
/* tablas compactas: columnas pegadas a la izquierda */
table.vcm.vcm-compact{width:auto}
table.vcm.vcm-compact th, table.vcm.vcm-compact td{white-space:nowrap;padding-right:1.5rem}
table.vcm.vcm-compact th:last-child, table.vcm.vcm-compact td:last-child{padding-right:.65rem}
table.vcm.vcm-compact .num{padding-left:1.2rem}
/* Section headers del Dashboard */
.dash-section-head{display:flex;align-items:center;gap:.75rem;margin:2rem 0 1rem 0;padding-bottom:.5rem;border-bottom:2px solid var(--vcm-blue)}
.dash-section-head:first-child{margin-top:.5rem}
.dash-section-head .num-bubble{background:var(--vcm-blue);color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem}
.dash-section-head h2{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin:0}
.dash-section-head .hint{font-size:.72rem;color:#64748b;margin-left:auto}

/* Card de Saldo final de fondos */
.saldo-final{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.25rem 1.5rem;margin-bottom:1.25rem;border-radius:1rem;box-shadow:0 4px 12px rgba(15,23,42,.08);border:1px solid rgba(255,255,255,.1)}
.saldo-final.ok,
.saldo-final.neg{background:linear-gradient(135deg,var(--vcm-blue-dark) 0%,var(--vcm-blue) 100%);color:#fff}
.saldo-final .amount{color:#fff}
.saldo-final .formula .chip,
.saldo-final .formula .chip b,
.saldo-final .formula .op{color:#fff}
.saldo-final .title,
.saldo-final .hint{color:#fff}
.saldo-final .title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.75;margin-bottom:.5rem}
.saldo-final .formula{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.82rem}
.saldo-final .formula .chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:.3rem .65rem;border-radius:.5rem;font-variant-numeric:tabular-nums}
.saldo-final .formula .chip.pos{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.35)}
.saldo-final .formula .chip.neg{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35)}
.saldo-final .formula .chip b{font-weight:700}
.saldo-final .formula .op{font-weight:700;font-size:1rem;opacity:.75}
.saldo-final .hint{font-size:.7rem;opacity:.6;margin-top:.5rem}
.saldo-final .amount{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Layout 2-col por sección en Cashflow: table izq + mini chart der */
.cf-section-grid{display:grid;grid-template-columns: 1fr 360px;gap:1rem;align-items:start}
.cf-section-table{min-width:0}
.cf-section-chart{min-width:0}
@media (max-width: 1200px){
  .cf-section-grid{grid-template-columns: 1fr; gap:.5rem}
}

/* Tablas alineadas del cashflow (colgroup con anchos fijos) */
table.cf-aligned{table-layout:fixed;width:auto}
table.cf-aligned th, table.cf-aligned td{padding-right:1rem;padding-left:.65rem;white-space:nowrap}
table.cf-aligned td:nth-child(3), table.cf-aligned th:nth-child(3){white-space:normal}

.nav-section{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;padding:.85rem .75rem .3rem .75rem}
body.sidebar-collapsed .nav-section{display:none}
.tab-active{background:var(--vcm-blue);color:#fff}
/* ============ FREEZE DEL CONSOLIDADO — reescrito limpio ============ */
.consolidado-table{width:auto;border-collapse:separate;border-spacing:0}
.consolidado-table th,.consolidado-table td{
  padding:.45rem .75rem;
  border-right:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  white-space:nowrap;
}
/* Row 1 sticky TOP (todos los headers) — especificidad alta para ganarle a table.vcm th */
table.consolidado-table thead th{
  position:sticky !important;
  top:0;
  background:#f8fafc;
  text-align:center;
  z-index:3;
}
/* Esquina superior-izquierda (row 1 + col 1) */
table.consolidado-table thead th:first-child{
  left:0;
  z-index:5;
  text-align:left;
  background:#f8fafc;
  box-shadow:2px 0 4px -2px rgba(0,0,0,.1);
}
/* Col 1 sticky LEFT (todas las filas del body) */
table.consolidado-table tbody td:first-child{
  position:sticky !important;
  left:0;
  z-index:2;
  background:#fff;
  box-shadow:2px 0 4px -2px rgba(0,0,0,.08);
}
/* Background de col 1 por tipo de fila (sino se ve transparente al scrollear) */
.consolidado-table tr.subtle-row td:first-child{background:#f8fafc}
.consolidado-table tr.principal-row td:first-child{background:#f8fafc}
.consolidado-table tr.subtotal-row td:first-child{background:#dbeafe}
.consolidado-table tr.grand-total-row td:first-child{background:#fde68a}
.consolidado-table tr.special-row td:first-child{background:#dcfce7;color:#166534}
.consolidado-table tr.sec-header td:first-child{background:#1e293b;color:#fff}
/* Jerarquía visual del pivot consolidado */
.consolidado-table tr.sec-header{background:#1e293b;color:#fff;cursor:pointer;user-select:none}
.consolidado-table tr.sec-header:hover{background:#0f172a}
.consolidado-table tr.sec-header td{color:#fff;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;padding:.55rem .65rem;border-bottom:0;position:sticky !important;left:0;background:#1e293b;z-index:2}
.freeze-first-col .consolidado-table tr.sec-header td:first-child{background:#1e293b;color:#fff}
.consolidado-table tr.sec-header .caret{display:inline-block;width:14px;color:#94a3b8}
.consolidado-table tr.principal-row{background:#f8fafc;font-weight:600}
.freeze-first-col .consolidado-table tr.principal-row td:first-child{background:#f8fafc}
.consolidado-table tr.subtotal-row{background:#dbeafe;font-weight:700}
.consolidado-table tr.subtotal-row td{border-top:2px solid #93c5fd;border-bottom:2px solid #93c5fd}
.freeze-first-col .consolidado-table tr.subtotal-row td:first-child{background:#dbeafe}
.consolidado-table tr.grand-total-row{background:#fde68a;font-weight:800}
.consolidado-table tr.grand-total-row td{border-top:3px solid #f59e0b;border-bottom:3px solid #f59e0b;font-size:.9rem}
.freeze-first-col .consolidado-table tr.grand-total-row td:first-child{background:#fde68a}
.consolidado-table tr.special-row{background:#dcfce7;font-weight:800;color:#166534}
.consolidado-table tr.special-row td{border-top:2px solid #22c55e;border-bottom:2px solid #22c55e;font-size:.92rem}
.freeze-first-col .consolidado-table tr.special-row td:first-child{background:#dcfce7;color:#166534}
.consolidado-table tr.hidden{display:none}
.row-reorder{display:inline-flex;flex-direction:column;gap:1px;margin-right:.35rem;vertical-align:middle}
.row-mv{background:transparent;border:1px solid #cbd5e1;width:16px;height:12px;border-radius:2px;cursor:pointer;font-size:.55rem;color:#64748b;padding:0;line-height:10px}
.row-mv:hover:not(:disabled){background:var(--vcm-blue);color:#fff;border-color:var(--vcm-blue)}
.row-mv:disabled{opacity:.3;cursor:not-allowed}
.nav-btn{transition:background .15s; position:relative}
/* Cuando colapsado, el contenido desborda para dejar salir tooltips */
body.sidebar-collapsed aside.sidebar nav{overflow:visible}
body.sidebar-collapsed aside.sidebar{overflow:visible}
body.sidebar-collapsed .nav-btn:hover::after,
body.sidebar-collapsed a.nav-btn:hover::after{
  content:attr(data-tip);
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--vcm-black); color:#fff; padding:.4rem .7rem;
  border-radius:.375rem; font-size:.75rem; font-weight:600; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.35); z-index:100; pointer-events:none;
  border:1px solid rgba(255,255,255,.12);
}
/* Flechita del tooltip */
body.sidebar-collapsed .nav-btn:hover::before{
  content:'';
  position:absolute; left:calc(100% + 6px); top:50%; transform:translateY(-50%) rotate(45deg);
  width:8px; height:8px; background:var(--vcm-black);
  border-left:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
  z-index:100; pointer-events:none;
}

/* ========== Tables ========== */
table.vcm{width:100%;border-collapse:collapse}
table.vcm th{background:#f8fafc;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:#475569;text-align:left;position:relative}
table.vcm th.sortable{cursor:pointer;user-select:none;padding-right:1.2rem}
table.vcm th.sortable:hover{background:#f1f5f9}
table.vcm th .sort-ar{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;line-height:.6;font-size:.6rem;color:#94a3b8}
table.vcm th .sort-ar .act{color:var(--vcm-blue)}
table.vcm td,table.vcm th{padding:.5rem .65rem;border-bottom:1px solid #e2e8f0;font-size:.825rem}
table.vcm tbody tr:hover{filter:brightness(.97)}
tr.row-cobrado{background:var(--row-cobrado)}
tr.row-parcial{background:var(--row-parcial)}

/* ========== Pills ========== */
.pill{display:inline-block;padding:.1rem .55rem;border-radius:9999px;font-size:.7rem;font-weight:600;white-space:nowrap}
.pill-caro{background:#F7DCE5;color:#701935}
.pill-pablo{background:#FADBD4;color:#8B2714}
.pill-mau{background:#D5E5F8;color:#194B89}
.pill-valen{background:#DDD8F1;color:#3B2F8F}
.pill-ahorro{background:#F3E9C4;color:#6E5400}
.pill-paid{background:#D1FADF;color:#027A48}
.pill-pend{background:#FEE4E2;color:#B42318}
.pill-part{background:#FEF0C7;color:#93370D}
.pill-directo{background:#E0E7ff;color:#3730A3}
.pill-indirecto{background:#FCE7F3;color:#9F1239}
.pill-ahorrotipo{background:#F3E9C4;color:#6E5400}
.pill-generic{background:#E2E8F0;color:#334155}

/* ========== Buttons ========== */
.num{font-variant-numeric:tabular-nums;text-align:right}
.neg{color:#b91c1c}
.pos{color:#15803d}
.muted{color:#64748b}
.btn{padding:.375rem .75rem;border-radius:.375rem;font-size:.8rem;cursor:pointer;border:1px solid transparent;transition:all .15s}
.btn-primary{background:var(--vcm-black);color:#fff}
.btn-primary:hover{background:var(--vcm-gray-700)}
.btn-accent{background:var(--vcm-blue);color:#fff}
.btn-accent:hover{background:var(--vcm-blue-dark)}
.btn-secondary{background:#fff;border-color:#cbd5e1;color:var(--vcm-black)}
.btn-secondary:hover{background:#f8fafc}
.btn-danger{background:#fff;border-color:#fca5a5;color:#b91c1c}
.btn-sm{padding:.2rem .5rem;font-size:.72rem}
.btn-icon{padding:.3rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;cursor:pointer;font-size:.8rem;color:#475569}
.btn-icon:hover{background:#f8fafc}
.btn-icon.active{background:var(--vcm-blue);color:#fff;border-color:var(--vcm-blue)}

.input,.select{border:1px solid #cbd5e1;border-radius:.375rem;padding:.375rem .55rem;font-size:.825rem;background:#fff;width:100%}
.input:focus,.select:focus{outline:2px solid var(--vcm-blue);outline-offset:-1px}
label{font-size:.72rem;color:#64748b;display:block;margin-bottom:.2rem}

/* ========== Modals ========== */
.modal-bg{position:fixed;inset:0;background:rgba(10,10,10,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:.75rem;padding:1.5rem;width:520px;max-width:90vw;max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal h2{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-grid .col-span-2{grid-column:span 2}

/* ========== KPI cards (colores VCM) ========== */
.kpi{color:#fff;border-radius:.75rem;padding:1rem;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
/* KPIs clickeables: feedback de hover (lift + sombra) */
.kpi.cursor-pointer{cursor:pointer}
.kpi.cursor-pointer:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.20)}
.kpi.cursor-pointer:active{transform:translateY(-1px)}
.kpi.cursor-pointer:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kpi-1{background:linear-gradient(135deg,#0A0A0A,#1F1F1F)}                           /* 1 negro */
.kpi-2{background:linear-gradient(135deg,#1F5CB8,#307FE2)}                           /* 2 celeste pantone 2727C */
.kpi-3{background:linear-gradient(135deg,#4A3FA8,#6455C7)}                           /* 3 violeta pantone 2725C */
.kpi-4{background:linear-gradient(135deg,#8A6E00,#D0A400);color:#fff}              /* 4 maíz pantone 606C */
.kpi-4 .text-xs, .kpi-4 .uppercase{color:rgba(255,255,255,.9) !important}
/* Fallback clase genérica */
.kpi-accent{background:linear-gradient(135deg,var(--vcm-blue-dark),var(--vcm-blue))}

/* ========== Checks ========== */
.check-ok{color:#027A48;font-weight:600}
.check-fail{color:#B42318;font-weight:600}
.subtle-row{background:#f8fafc}
.total-row{background:#f1f5f9;font-weight:700}
.sticky-col{position:sticky;left:0;background:#fff;z-index:1}
.sticky-col.total-row{background:#f1f5f9}
.sticky-col.subtle-row{background:#f8fafc}
.kv{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.825rem}
.kv .label{color:#64748b}
.kv .value{font-weight:600;font-variant-numeric:tabular-nums}

/* ========== Multiselect dropdown ========== */
.ms{position:relative}
.ms-trigger{border:1px solid #cbd5e1;border-radius:.375rem;padding:.375rem .55rem;background:#fff;font-size:.825rem;cursor:pointer;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center}
.ms-trigger:hover{border-color:#94a3b8}
.ms-trigger .chev{color:#94a3b8;font-size:.7rem;margin-left:.5rem}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;box-shadow:0 10px 20px rgba(0,0,0,.08);z-index:20;max-height:260px;overflow-y:auto;display:none}
.ms-panel.open{display:block}
.ms-item{padding:.35rem .55rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.825rem}
.ms-item:hover{background:#f1f5f9}
.ms-item input{margin:0}
.ms-footer{padding:.35rem .55rem;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;font-size:.72rem}
.ms-footer a{color:var(--vcm-blue);cursor:pointer}

/* ========== Dashboard grid (drag-to-reorder + resize) ========== */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-bottom:1.5rem}
.dash-grid > .dash-item{min-width:0;position:relative}
.dash-item.dragging{opacity:.35;cursor:grabbing}
.dash-item.drop-before{box-shadow:-4px 0 0 -1px var(--vcm-blue)}
.dash-item.drop-after{box-shadow:4px 0 0 -1px var(--vcm-blue)}
/* Handle de arrastre */
.dash-handle{
  position:absolute;top:8px;left:8px;z-index:6;
  cursor:grab;opacity:0;transition:opacity .15s var(--ease-out);
  background:rgba(15,23,42,.06);border:1px solid transparent;border-radius:.35rem;
  padding:.15rem .4rem;font-size:.85rem;color:#475569;
  user-select:none;line-height:1;font-weight:700;
}
.dash-handle:hover{background:#fff;border-color:#cbd5e1}
.dash-handle:active{cursor:grabbing}
.dash-item:hover > .dash-handle, .dash-item:focus-within > .dash-handle{opacity:.95}
/* Span controls (1/3, 1/2, full) — solo en charts */
.dash-span-ctrls{
  position:absolute;top:8px;right:8px;z-index:6;
  display:flex;gap:.18rem;
  opacity:0;transition:opacity .15s var(--ease-out);
  background:rgba(255,255,255,.92);padding:.15rem;border-radius:.35rem;
  backdrop-filter:blur(2px);border:1px solid #e2e8f0;
}
.dash-item:hover > .dash-span-ctrls, .dash-item:focus-within > .dash-span-ctrls{opacity:1}
.dash-span-ctrls button{
  background:transparent;border:none;border-radius:.25rem;
  width:22px;height:20px;cursor:pointer;padding:0;
  font-size:.75rem;color:#475569;line-height:1;
}
.dash-span-ctrls button:hover{background:#f1f5f9;color:#1e293b}
.dash-span-ctrls button.active{background:var(--vcm-blue);color:#fff}
/* Resize vertical en chart-cards (drag esquina inferior derecha) */
.chart-card.dash-item{resize:vertical;overflow:auto;min-height:280px}
.chart-card.dash-item::-webkit-resizer{background:transparent}
/* Sections en la grid: full width, label */
.dash-section-head.dash-item{padding:.5rem 0 0 0;display:flex;align-items:center;gap:.65rem;border-bottom:1px solid #e2e8f0;padding-bottom:.5rem}
/* Mobile: 1 col, sin resize ni span buttons */
@media (max-width:768px){
  .dash-grid{grid-template-columns:1fr !important;gap:.75rem}
  .dash-grid > .dash-item{grid-column:span 1 !important}
  .chart-card.dash-item{resize:none}
  .dash-handle, .dash-span-ctrls{display:none !important}
}

/* ===== Primera fila fija del dashboard =====
   Izquierda 50%: Vendido vs Cobrado (alto completo).
   Derecha 50%: Pendiente de cobro (arriba) + Facturación por año (abajo), apilados. */
.dash-firstrow{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-bottom:1.5rem; align-items:stretch;
}
.dash-firstrow > .chart-card{ display:flex; flex-direction:column; min-width:0 }
.dash-firstrow .ff-right{ display:flex; flex-direction:column; gap:1rem; min-width:0 }
.dash-firstrow .ff-right > .chart-card{ display:flex; flex-direction:column; flex:1; min-height:0 }
/* El canvas llena el espacio restante de su tarjeta. El izquierdo fija la altura de la fila. */
.dash-firstrow .ff-canvas{ position:relative; flex:1 1 auto; min-height:0 }
.dash-firstrow .ff-left .ff-canvas{ min-height:600px }
.dash-firstrow .ff-canvas-sm{ min-height:230px }
/* Tablet/mobile: apilar todo en una columna */
@media (max-width:900px){
  .dash-firstrow{ grid-template-columns:1fr }
  .dash-firstrow .ff-left .ff-canvas{ min-height:460px }
}

/* ========== Chart card ========== */
.chart-card{background:#fff;border-radius:.75rem;padding:1rem;position:relative}
/* Scroll interno para charts con muchos meses (evita que la tarjeta estire la página) */
.chart-scroll{overflow-y:auto;overflow-x:hidden;border-radius:.5rem;-webkit-overflow-scrolling:touch;position:relative}
.chart-scroll::-webkit-scrollbar{width:8px}
.chart-scroll::-webkit-scrollbar-track{background:transparent}
.chart-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.chart-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.chart-toolbar{display:flex;gap:.25rem;align-items:center}
.chart-toolbar .color-dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e2e8f0;cursor:pointer}
.chart-toolbar .color-dot:hover{transform:scale(1.1)}
.color-picker-pop{position:absolute;top:44px;right:10px;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:.5rem;box-shadow:0 10px 20px rgba(0,0,0,.08);z-index:30;display:none}
.color-picker-pop.open{display:block}
.color-picker-pop .row{display:flex;gap:.35rem;align-items:center;margin-bottom:.35rem}
.color-picker-pop .swatch{width:22px;height:22px;min-width:22px;min-height:22px;flex-shrink:0;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;padding:0;box-sizing:border-box}
.color-picker-pop .swatch.active{box-shadow:0 0 0 2px var(--vcm-blue)}

/* ========== Full-bleed (iframe cotizador/funnel/google): el margen negativo
   debe igualar el padding real de #view (1.5rem desktop, 1rem mobile) para no
   provocar overflow horizontal. ========== */
.view-fullbleed{margin:-1.5rem}
@media (max-width:768px){ .view-fullbleed{margin:-1rem} }

/* ========== Perfil: grid de 2 columnas que colapsa a 1 en mobile ========== */
.perfil-grid{display:grid;gap:1rem;grid-template-columns:1fr;min-width:0}
.perfil-grid > *{min-width:0}
@media (min-width:768px){
  .perfil-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
}

/* ========== Combobox ========== */
.combo{position:relative}
.combo-list{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;box-shadow:0 10px 20px rgba(0,0,0,.08);z-index:30;max-height:200px;overflow-y:auto;display:none}
.combo-list.open{display:block}
.combo-list .item{padding:.35rem .55rem;cursor:pointer;font-size:.825rem}
.combo-list .item:hover,.combo-list .item.active{background:var(--vcm-blue-light)}
.combo-list .item.add-new{color:var(--vcm-blue);font-weight:600;border-top:1px solid #e2e8f0}
.combo-list .item.add-new::before{content:'+ ';font-weight:900}

details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}

.hidden{display:none !important}

/* ============================================
   CALENDARIO DE VENCIMIENTOS
============================================ */
.view-switcher{display:inline-flex;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;overflow:hidden}
.view-switcher button{background:transparent;border:0;padding:.4rem .8rem;font-size:.78rem;font-weight:600;cursor:pointer;color:#64748b}
.view-switcher button:hover{background:#f8fafc;color:#0f172a}
.view-switcher button.active{background:var(--vcm-blue);color:#fff}

/* --- Vista mes --- */
.cal-grid{background:#fff;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:#0f172a;color:#fff}
.cal-head > div{padding:.5rem;text-align:center;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-right:1px solid #1e293b}
.cal-head > div:last-child{border-right:0}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(92px,1fr)}
.cal-cell{padding:.4rem .5rem;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;cursor:pointer;transition:background .15s;overflow:hidden}
.cal-cell:hover{background:var(--vcm-blue-light)}
.cal-cell.today{background:#fef3c7}
.cal-cell.today:hover{background:#fde68a}
.cal-cell.other{background:#f8fafc;opacity:.55}
.cal-cell-head{display:flex;justify-content:space-between;align-items:center}
.cal-cell-num{font-weight:700;font-size:.85rem;color:#334155}
.cal-cell.today .cal-cell-num{color:#b45309}
.cal-cell-count{font-size:.65rem;background:var(--vcm-blue);color:#fff;padding:.05rem .35rem;border-radius:9999px;font-weight:700}
.cal-pills{display:flex;flex-wrap:wrap;gap:2px;margin-top:.2rem}
.cal-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:.6rem;color:#fff;font-weight:700}
.cal-more{font-size:.6rem;color:#64748b;padding:.05rem .3rem;background:#e2e8f0;border-radius:9999px;font-weight:600}

/* --- Vista semana --- */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;background:transparent}
.week-col{background:#fff;border-radius:.5rem;overflow:hidden;min-height:420px;display:flex;flex-direction:column}
.week-col.today{outline:2px solid var(--vcm-blue);outline-offset:-2px}
.week-col-head{padding:.6rem;text-align:center;background:#f1f5f9;border-bottom:1px solid #e2e8f0}
.week-day-name{font-size:.65rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em}
.week-day-num{font-size:1.3rem;font-weight:800;color:#0f172a;margin-top:.15rem}
.week-day-num.today-badge{background:var(--vcm-blue);color:#fff;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;margin:.15rem auto 0}
.week-events{flex:1;padding:.5rem;overflow-y:auto;max-height:460px}
.week-ev{background:#f8fafc;border-left:3px solid;padding:.35rem .5rem;margin-bottom:.3rem;border-radius:3px;font-size:.72rem}
.week-ev-tipo{font-weight:700;font-size:.65rem;text-transform:uppercase;letter-spacing:.04em}
.week-ev-cli{color:#334155;margin-top:.1rem}
.week-empty{color:#cbd5e1;text-align:center;padding:1rem 0;font-size:.8rem}

/* --- Vista día: headers de sección --- */
.day-section-head{padding:.6rem .9rem;color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.day-section-count{background:rgba(255,255,255,.2);padding:.1rem .5rem;border-radius:9999px;font-size:.75rem}

/* Filas especiales (para badges "hoy"/"vencido") */
.row-cobrado{background:#ECFDF3}
.row-parcial{background:#FEF3C7}
.row-pend{background:#FEE4E2}

@media (max-width: 768px) {
  .cal-cells{grid-auto-rows:minmax(60px,1fr)}
  .cal-cell{padding:.2rem .3rem}
  .cal-cell-num{font-size:.72rem}
  .week-grid{grid-template-columns:1fr;gap:.35rem}
  .week-col{min-height:auto}
  .view-switcher button{padding:.35rem .55rem;font-size:.7rem}
}

/* ============================================
   LOGIN
============================================ */
.login-bg{
  position:fixed;inset:0;
  background:linear-gradient(135deg,#0A0A0A 0%,#1F5CB8 100%);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:100;
}
.login-card{
  background:#fff;border-radius:1rem;padding:2.25rem 2rem;
  width:100%;max-width:420px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-logo{display:flex;justify-content:center;margin-bottom:1.25rem}
.login-logo img{width:100px;height:auto}
.login-card h1{font-size:1.4rem;font-weight:800;text-align:center;letter-spacing:-.01em;margin-bottom:.25rem}
.login-sub{text-align:center;color:#64748b;font-size:.85rem;margin-bottom:1.5rem}
.login-form label{font-size:.72rem;color:#64748b;display:block;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.login-form .input{margin-bottom:.25rem}
.login-btn{width:100%;margin-top:1.25rem;padding:.7rem;font-size:.95rem;font-weight:700}
.login-error{background:#FEE4E2;color:#B42318;padding:.5rem .75rem;border-radius:.375rem;font-size:.82rem;margin-top:.75rem}
.login-hint{text-align:center;margin-top:1rem;font-size:.72rem;color:#94a3b8}
.login-hint code{background:#f1f5f9;padding:.1rem .35rem;border-radius:.25rem;font-family:ui-monospace,monospace;color:#0f172a}

/* ============================================
   RESPONSIVE: mobile / tablet / desktop
============================================ */

/* Topbar mobile oculta por default */
.mobile-topbar{display:none}
.mobile-backdrop{display:none}

/* === Tablet (768-1024px) === */
@media (max-width: 1024px) {
  /* KPIs y grids: 2 columnas en tablet */
  .kpi-grid{grid-template-columns:repeat(2,1fr) !important}
  .dash-section-head{flex-wrap:wrap}
  .dash-section-head .hint{font-size:.7rem;flex-basis:100%;margin-left:0;margin-top:.25rem}
  /* Charts 2-col y 3-col → 2 col máximo en tablet */
  main .grid.grid-cols-3{grid-template-columns:1fr 1fr !important}
  main .grid.grid-cols-2{grid-template-columns:1fr 1fr}
  /* Cashflow: tabla + chart apilados en tablet */
  .cf-section-grid{grid-template-columns:1fr !important}
  /* Calendario: chips + filtros a full width */
  .view-switcher{flex-wrap:wrap}
  .view-switcher button{padding:.35rem .55rem;font-size:.7rem}
  /* Header de facturación/etc: permitir envolver */
  .filters-sticky .flex.items-end.justify-between{flex-wrap:wrap}
  .filters-sticky .flex.items-end.gap-2.flex-wrap{width:100%}
  /* Header de filtros viejos: stack. Excluye el topbar nuevo del dashboard. */
  .filters-sticky > div:not(.dash-topbar){flex-direction:column !important;align-items:stretch !important}
  .filters-sticky > div:not(.dash-topbar) > div:first-child{width:100%}
  /* Saldo final card: apilar monto abajo */
  .saldo-final{flex-direction:column !important;align-items:flex-start !important;gap:.75rem}
  .saldo-final .amount{font-size:1.8rem}
}

/* === Mobile (<=768px) === */
@media (max-width: 768px) {
  body{overflow-x:hidden}
  /* Sidebar como drawer */
  aside.sidebar{
    position:fixed;top:0;left:0;height:100vh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:40;
    width:280px !important;
  }
  body.mobile-nav-open aside.sidebar{transform:translateX(0)}
  body.mobile-nav-open .mobile-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(0,0,0,.5);z-index:35;
  }
  /* En mobile/tablet el drawer SIEMPRE muestra etiquetas, sin importar la
     preferencia .sidebar-collapsed heredada del desktop. */
  body.sidebar-collapsed aside.sidebar{ width:280px !important }
  body.sidebar-collapsed .sidebar-label{ display:inline !important }
  body.sidebar-collapsed .sidebar-foot-text{ display:block !important }
  body.sidebar-collapsed .nav-section{ display:block !important }
  body.sidebar-collapsed .nav-btn{
    justify-content:flex-start !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }
  body.sidebar-collapsed .sidebar-header{ justify-content:flex-start !important; padding:1rem !important }
  /* Tipografía ligeramente más chica para que todo entre armónico */
  aside.sidebar .nav-btn{ font-size:.82rem }
  aside.sidebar .nav-btn .icon{ font-size:1.05rem }
  aside.sidebar .nav-section{ font-size:.6rem }
  aside.sidebar .user-foot .name{ font-size:.82rem }
  aside.sidebar .user-foot .text-slate-400{ font-size:.7rem }
  /* Topbar móvil */
  .mobile-topbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--vcm-black);padding:.6rem 1rem;
    position:sticky;top:0;z-index:20;
  }
  .mobile-menu-btn{background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:.25rem .5rem}
  .mobile-logo{height:28px;width:auto}
  /* Edge toggle oculto en móvil */
  .edge-toggle{display:none}
  /* Main padding reducido */
  main #view{padding:1rem !important}
  /* Todos los grids del main a 1 col */
  main .grid.grid-cols-2,
  main .grid.grid-cols-3,
  main .grid.grid-cols-4,
  main .grid.grid-cols-5,
  main .grid.grid-cols-6,
  main .grid.grid-cols-12{grid-template-columns:1fr !important}
  /* KPIs 2 col en mobile (más compactos) — override after grid rules */
  main .kpi-grid,
  main .grid.kpi-grid{grid-template-columns:1fr 1fr !important; gap:.5rem !important}
  /* Filters sticky: reducir padding */
  .filters-sticky .flex.items-end.justify-between{flex-direction:column;align-items:stretch !important}
  .range-chips{flex-wrap:wrap}
  /* (La regla de min-width:max-content se removió: rompía el scroll interno del display:block + overflow-x:auto de más abajo) */
  /* Header de vistas: stack */
  #view > .flex.items-center.justify-between,
  #view > .flex.items-start.justify-between{flex-direction:column;align-items:stretch;gap:.75rem}
  /* Chart cards: altura reducida */
  .chart-card > div[style*="height:"]{height:260px !important}
  /* Modal ocupa más ancho */
  .modal{width:94vw !important;padding:1.25rem}
  .form-grid{grid-template-columns:1fr !important}
  .form-grid .col-span-2{grid-column:span 1}
  /* Login card */
  .login-card{padding:1.75rem 1.25rem}

  /* Calendario: mes grid achicado */
  .cal-cells{grid-auto-rows:minmax(52px,1fr)}
  .cal-cell-num{font-size:.7rem}
  .cal-cell{padding:.15rem .2rem}
  .cal-pills{margin-top:.1rem}
  .cal-dot{width:12px;height:12px;font-size:.55rem}
  .cal-head > div{padding:.3rem;font-size:.6rem}
  /* Tablas: scroll horizontal interno + compresión para que entren cómodas en mobile */
  table.vcm{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    /* Indicador sutil de que hay scroll a la derecha */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 20px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 20px 100% no-repeat,
      linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      linear-gradient(to left,  rgba(0,0,0,.08), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* Texto/padding más compactos en mobile */
  table.vcm td, table.vcm th{
    font-size:.72rem !important;
    padding:.42rem .5rem !important;
  }
  /* Tablas "compact" (cashflow) intentan entrar en pantalla reduciendo densidad; si no entran, scrollean */
  table.vcm.vcm-compact{
    width:100%;
    font-size:.62rem;
    white-space:normal;
    table-layout:fixed; /* distribuye columnas uniformemente para que quepan */
    display:table; /* override del display:block; no necesitamos scroll interno */
    overflow:visible;
    background:none; /* sin edge-hint cuando fits */
  }
  table.vcm.vcm-compact th,
  table.vcm.vcm-compact td{
    padding:.34rem .25rem !important;
    padding-right:.35rem !important;
    font-size:.62rem !important;
    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:anywhere;
    vertical-align:top;
  }
  /* Headers alineados a la derecha para columnas numéricas: quebrar a 2 líneas está OK */
  table.vcm.vcm-compact th.text-right{ line-height:1.1 }
  /* Pills más chicos */
  table.vcm.vcm-compact .pill{
    font-size:.58rem;
    padding:.05rem .3rem;
  }
  /* Botones de acción en tablas: más chicos para no empujar columnas */
  table.vcm .btn.btn-sm{ padding:.15rem .35rem; font-size:.65rem }
  /* Facturación: KPIs 2-col en móvil */
  .grid.grid-cols-4{grid-template-columns:1fr 1fr !important}
  /* Saldo final: apilado con monto grande abajo */
  .saldo-final{padding:1rem;flex-direction:column !important;align-items:stretch !important;gap:.5rem}
  .saldo-final .amount{font-size:1.6rem;text-align:right}
  .saldo-final .formula{flex-direction:column;align-items:stretch;gap:.3rem}
  .saldo-final .formula .chip{text-align:center}
  .saldo-final .formula .op{text-align:center}
  /* KPIs más compactos */
  .kpi{padding:.5rem .6rem; border-radius:.6rem}
  .kpi .text-2xl{font-size:1.05rem; line-height:1.15}
  .kpi .text-xs{font-size:.58rem; line-height:1.1}
  .kpi .text-xs.uppercase{letter-spacing:.02em}
  /* Filters body: hide when collapsed (sólo mobile) */
  .filters-sticky.filters-collapsed .filters-body{display:none}
  .filters-body{display:block}
  /* En mobile el botón de toggle SÍ se muestra */
  .filters-toggle-btn{display:inline-flex !important}
  /* Chart toolbar: permitir wrap */
  .chart-toolbar{flex-wrap:wrap}
  /* Selects que quedan ultra-comprimidos */
  select.select{min-width:0}
  /* Dashboard section headings: tamaño reducido */
  .dash-section-head{margin:1.25rem 0 .75rem 0}
  .dash-section-head h2{font-size:.95rem}
  .dash-section-head .num-bubble{width:22px;height:22px;font-size:.7rem}
  /* Calculadora: stack en 1 col */
  main .grid.grid-cols-2{grid-template-columns:1fr !important}
}

/* ========== Empty states + input invalid + misc polish ========== */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.5rem 1rem;
  color:#64748b;
  text-align:center;
  gap:.5rem;
}
.empty-state .ico{
  font-size:2.2rem; line-height:1;
  opacity:.55;
}
.empty-state .title{ font-weight:600; color:#334155; font-size:.95rem }
.empty-state .hint{ font-size:.8rem; max-width:340px; line-height:1.4 }
.empty-state .cta{ margin-top:.75rem }

/* Input inválido: borde rojo + sacudida sutil */
.input.is-invalid, .select.is-invalid, textarea.input.is-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18) !important;
  animation: inputShake 300ms var(--ease-out);
}
@keyframes inputShake{
  0%,100%{ transform: translateX(0) }
  20%{ transform: translateX(-4px) }
  40%{ transform: translateX(3px) }
  60%{ transform: translateX(-2px) }
  80%{ transform: translateX(2px) }
}

/* Focus visible: ring consistente en todos los botones/links */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--vcm-blue);
  outline-offset:2px;
  border-radius:.3rem;
}

/* Pills con iconografía para no depender solo del color (a11y) */
.pill.pill-paid::before{ content:'✓ '; font-weight:900 }
.pill.pill-part::before{ content:'◐ '; font-weight:900 }
.pill.pill-pend::before{ content:'◌ '; font-weight:900 }

/* ========== Tabla cotización dólar: compacta para caber sin scroll ========== */
table.vcm.vcm-compact.tbl-cotiz{ width:100% !important; table-layout:fixed }
table.tbl-cotiz th,
table.tbl-cotiz td{
  padding:.3rem .18rem !important;
  padding-right:.2rem !important;
  font-size:.72rem;
  text-align:center;
}
table.tbl-cotiz th{ font-weight:600; text-transform:uppercase; letter-spacing:.02em }
table.tbl-cotiz th:first-child,
table.tbl-cotiz td.yr{ width:38px; text-align:left; padding-left:.35rem !important }
table.tbl-cotiz th:last-child,
table.tbl-cotiz td.prom{ width:58px; white-space:nowrap; font-weight:600; font-size:.7rem }
table.tbl-cotiz td.empty{ background:#f8fafc }
table.tbl-cotiz .cot-input{
  width:100%;
  min-width:0;
  padding:.18rem .25rem;
  font-size:.72rem;
  text-align:right;
  border:1px solid #e2e8f0;
  border-radius:.3rem;
  background:#fff;
  box-sizing:border-box;
}
table.tbl-cotiz .cot-input:focus{
  outline:none;
  border-color:var(--vcm-blue);
  box-shadow:0 0 0 2px rgba(48,127,226,.15);
}

/* ========== Currency toggle glow (ARS / USD) ========== */
.btn-currency-glow{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:58px; padding:.42rem .85rem;
  border-radius:9999px;
  border:none;
  background:linear-gradient(135deg, var(--vcm-blue), #3b82f6);
  color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(59,130,246,.55), 0 4px 14px rgba(0,0,0,.12);
  animation:currencyPulse 2.2s ease-in-out infinite;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-currency-glow.active{
  background:linear-gradient(135deg, #10B981, #059669);
  box-shadow:0 0 0 0 rgba(16,185,129,.55), 0 4px 14px rgba(16,185,129,.3);
  animation-name:currencyPulseUsd;
}
.btn-currency-glow:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 6px 20px rgba(59,130,246,.5);
  animation-play-state:paused;
}
.btn-currency-glow.active:hover{ box-shadow:0 6px 20px rgba(16,185,129,.5) }
.btn-currency-glow:active{ transform:scale(.96) }
@keyframes currencyPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,.55), 0 4px 14px rgba(0,0,0,.12) }
  50%    { box-shadow:0 0 0 8px rgba(59,130,246,0), 0 4px 16px rgba(59,130,246,.28) }
}
@keyframes currencyPulseUsd{
  0%,100%{ box-shadow:0 0 0 0 rgba(16,185,129,.55), 0 4px 14px rgba(16,185,129,.25) }
  50%    { box-shadow:0 0 0 8px rgba(16,185,129,0), 0 4px 16px rgba(16,185,129,.35) }
}

/* ========== Consulta glow button ========== */
.btn-consulta-glow{
  background:linear-gradient(135deg, var(--vcm-blue), #3b82f6);
  color:#fff; border:none; padding:.55rem 1rem; border-radius:.6rem;
  font-weight:600; cursor:pointer; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.35rem;
  box-shadow:0 0 0 0 rgba(59,130,246,.55);
  animation:consultaPulse 2s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.btn-consulta-glow:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(59,130,246,.5);
  animation-play-state:paused;
}
@keyframes consultaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.55), 0 2px 6px rgba(59,130,246,.25)}
  50%{box-shadow:0 0 0 10px rgba(59,130,246,0), 0 2px 10px rgba(59,130,246,.4)}
}

/* ========== Date range chips ========== */
.range-chips{display:flex; gap:.35rem; flex-wrap:wrap}
.range-chip{padding:.3rem .7rem; border-radius:9999px; font-size:.72rem; background:#fff; border:1px solid #cbd5e1; color:#334155; cursor:pointer; transition:all .15s}
.range-chip:hover{border-color:var(--vcm-blue); color:var(--vcm-blue)}
.range-chip.active{background:var(--vcm-blue); color:#fff; border-color:var(--vcm-blue)}

/* ========== Collapsible pivot ========== */
.pivot-table{width:100%; border-collapse:collapse; font-size:.82rem}
.pivot-table th{background:#f8fafc; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:#475569; text-align:left; padding:.5rem .6rem; border-bottom:1px solid #e2e8f0}
.pivot-table th.num, .pivot-table td.num{text-align:right}
.pivot-table td{padding:.45rem .6rem; border-bottom:1px solid #e8edf3; font-variant-numeric:tabular-nums}
.pivot-group{cursor:pointer; background:#eef2f7; font-weight:600}
.pivot-group:hover{background:#dfe7f0}
.pivot-group .caret{display:inline-block; width:12px}
.pivot-detail{background:#fff}
.pivot-detail td:first-child{padding-left:2rem; color:#475569}
.pivot-total{background:#0f172a; color:#fff; font-weight:700}
.pivot-total td{border-bottom:none}

/* ========== Chart toolbar extra ========== */
.chart-toolbar .text-tog{width:20px; height:20px; border-radius:4px; border:1px solid #e2e8f0; background:#fff; font-size:.68rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer}
.chart-toolbar .text-tog.white{background:#0f172a; color:#fff; border-color:#0f172a}
.chart-toolbar .mode-tog{width:26px;height:22px;border-radius:4px;border:1px solid #e2e8f0;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#64748b;padding:0}
.chart-toolbar .mode-tog:hover{color:var(--vcm-blue);border-color:var(--vcm-blue)}
.chart-toolbar .mode-tog.active{background:#DCFCE7;color:#10B981;border-color:#10B981}

/* Toggle único periodo/acumulado — un botón que muestra el modo ACTUAL */
.mode-toggle-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .6rem;
  border-radius:6px;border:1px solid #e2e8f0;background:#fff;
  font-size:.72rem;font-weight:600;color:#334155;cursor:pointer;
  transition:all .15s;
}
.mode-toggle-btn:hover{border-color:var(--vcm-blue);color:var(--vcm-blue);background:var(--vcm-blue-light)}
.mode-toggle-btn.acumulado{background:#DCFCE7;color:#059669;border-color:#10B981}
.mode-toggle-btn.acumulado:hover{background:#BBF7D0;color:#047857;border-color:#059669}

.cursor-pointer{cursor:pointer}

/* ======================================================================
   UX polish — motion tokens, transitions, feedback. Keep subtle.
   ====================================================================== */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.32,.54,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* Respect reduced motion: disable most transitions */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---- Modal: fade+scale enter / leave ---- */
.modal-bg{
  opacity:0;
  animation: mbgFade var(--dur-base) var(--ease-out) forwards;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-bg .modal{
  transform: translateY(8px) scale(.98);
  opacity:0;
  animation: modalIn var(--dur-base) var(--ease-spring) forwards;
  animation-delay: 40ms;
}
.modal-bg.closing{ animation: mbgFadeOut 160ms var(--ease-out) forwards }
.modal-bg.closing .modal{ animation: modalOut 160ms var(--ease-out) forwards }
@keyframes mbgFade   { to { opacity:1 } }
@keyframes mbgFadeOut{ to { opacity:0 } }
@keyframes modalIn   { to { transform: translateY(0) scale(1); opacity:1 } }
@keyframes modalOut  { to { transform: translateY(6px) scale(.985); opacity:0 } }

/* ---- Buttons: press feedback + smoother hover ---- */
.btn{ transition: background-color var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out),
                   color var(--dur-fast) var(--ease-out),
                   transform var(--dur-fast) var(--ease-out),
                   box-shadow var(--dur-fast) var(--ease-out) }
.btn:active:not(:disabled){ transform: scale(.97) }
.btn:focus-visible{ outline:2px solid var(--vcm-blue); outline-offset:2px }
.btn-accent:hover{ box-shadow: 0 3px 10px rgba(48,127,226,.35) }
.btn-danger:hover{ background:#fef2f2; border-color:#f87171 }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }

/* ---- Inputs / Selects: softer focus ring ---- */
.input, .select, textarea.input{
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus, textarea.input:focus{
  outline: none !important;
  border-color: var(--vcm-blue) !important;
  box-shadow: 0 0 0 3px rgba(48,127,226,.18);
}

/* ---- Table rows: gentle hover ---- */
table.vcm tbody tr{ transition: background-color var(--dur-fast) var(--ease-out) }
table.vcm tbody tr:hover{ background:#f8fbff }
table.vcm tbody tr.row-cobrado:hover{ background:#dff5e4 }
table.vcm tbody tr.row-parcial:hover{ background:#fbefc9 }

/* ---- Chips (range / pills) ---- */
.range-chip{ transition: background-color var(--dur-fast) var(--ease-out),
                          border-color var(--dur-fast) var(--ease-out),
                          color var(--dur-fast) var(--ease-out),
                          transform var(--dur-fast) var(--ease-out) }
.range-chip:active{ transform: scale(.96) }

/* ---- View container: fade on switch ---- */
#view{ animation: viewIn var(--dur-base) var(--ease-out) }
@keyframes viewIn{ from{opacity:0; transform: translateY(4px)} to{opacity:1; transform:none} }

/* ---- Section expand/collapse: body fade (display:none is still instant on close, but open feels smoother) ---- */
.section-body:not(.hidden){ animation: sectionIn var(--dur-base) var(--ease-out) }
@keyframes sectionIn{ from{opacity:0; transform: translateY(-2px)} to{opacity:1; transform:none} }

/* ---- Multiselect / dropdown panels ---- */
.ms-panel, .combo-list{
  transform-origin: top;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.ms-panel:not([hidden]), .combo-list.open{ animation: dropIn var(--dur-base) var(--ease-out) }
@keyframes dropIn{ from{opacity:0; transform: translateY(-4px) scaleY(.96)} to{opacity:1; transform:none} }

/* ---- KPI cards: subtle hover lift ---- */
.kpi{ transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) }
.kpi.cursor-pointer:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.25) }

/* ---- Chart cards: soften hover ---- */
.chart-card{ transition: box-shadow var(--dur-base) var(--ease-out) }
.chart-card:hover{ box-shadow: 0 8px 20px -12px rgba(0,0,0,.12) }

/* ---- Sort arrow: tint transition ---- */
.sort-ar span{ transition: color var(--dur-fast) var(--ease-out); color:#cbd5e1 }
.sort-ar span.act{ color: var(--vcm-blue) }

/* ---- Toasts ---- */
.toast-host{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:.5rem; z-index:100; pointer-events:none }
.toast{
  pointer-events:auto;
  background:#0f172a; color:#fff;
  padding:.55rem .9rem; border-radius:.5rem;
  font-size:.8rem; font-weight:500;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:.5rem;
  transform: translateX(18px) scale(.98); opacity:0;
  animation: toastIn var(--dur-base) var(--ease-spring) forwards;
  min-width: 180px; max-width: 320px;
}
.toast.toast-success{ background:#065f46 }
.toast.toast-error{ background:#991b1b }
.toast.toast-info{ background:#1e3a8a }
.toast.closing{ animation: toastOut 180ms var(--ease-out) forwards }
.toast .ico{ font-size:1rem; line-height:1 }
@keyframes toastIn { to { transform:none; opacity:1 } }
@keyframes toastOut{ to { transform: translateX(18px) scale(.98); opacity:0 } }

/* ---- Sidebar nav: soft slide on active ---- */
.nav-btn{ transition: background-color var(--dur-fast) var(--ease-out),
                      color var(--dur-fast) var(--ease-out),
                      padding-left var(--dur-base) var(--ease-out) }
.nav-btn:hover:not(.active){ padding-left: 18px }

/* ---- Edit pencils / action buttons in tables: fade-in on row hover ---- */
table.vcm tbody tr [data-edit],
table.vcm tbody tr [data-del],
table.vcm tbody tr [data-edit-tr],
table.vcm tbody tr [data-del-tr],
table.vcm tbody tr [data-edit-ah],
table.vcm tbody tr [data-del-ah],
table.vcm tbody tr [data-revalue-ah]{
  opacity:.55; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
table.vcm tbody tr:hover [data-edit],
table.vcm tbody tr:hover [data-del],
table.vcm tbody tr:hover [data-edit-tr],
table.vcm tbody tr:hover [data-del-tr],
table.vcm tbody tr:hover [data-edit-ah],
table.vcm tbody tr:hover [data-del-ah],
table.vcm tbody tr:hover [data-revalue-ah]{ opacity:1 }
table.vcm tbody tr [data-del]:hover,
table.vcm tbody tr [data-del-tr]:hover,
table.vcm tbody tr [data-del-ah]:hover{ transform: scale(1.08) }

/* ---- Saldo final formula chips: softer entrance ---- */
.saldo-final .chip{ transition: transform var(--dur-base) var(--ease-spring) }

/* ---- Filter collapse smoother ---- */
.filters-body:not(.hidden){ animation: viewIn var(--dur-base) var(--ease-out) }

/* Desktop: filtros siempre visibles, el botón de toggle no hace falta */
@media (min-width: 769px){
  .filters-toggle-btn{ display:none !important }
}

/* ---- Scrollbar polish ---- */
*::-webkit-scrollbar-thumb{ transition: background var(--dur-fast) var(--ease-out) }

/* Habilita scroll suave nativo en el contenedor principal */
main{ scroll-behavior: smooth }

/* ---- Scroll-to-top floating button ---- */
.scroll-top-btn{
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vcm-blue), #3b82f6);
  color: #fff;
  border: none;
  font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(.9);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 0 0 0 rgba(59,130,246,.55), 0 6px 18px rgba(0,0,0,.18);
  animation: scrollTopPulse 2.2s ease-in-out infinite;
  animation-play-state: paused;
}
.scroll-top-btn.visible{
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
  animation-play-state: running;
}
.scroll-top-btn:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 0 5px rgba(59,130,246,.18), 0 10px 26px rgba(59,130,246,.5);
  animation-play-state: paused;
}
.scroll-top-btn:active{ transform: translateY(-1px) scale(.98) }
@keyframes scrollTopPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.55), 0 6px 18px rgba(0,0,0,.18) }
  50%    { box-shadow: 0 0 0 10px rgba(59,130,246,0), 0 6px 22px rgba(59,130,246,.35) }
}
@media (max-width: 768px){
  .scroll-top-btn{ right: 14px; bottom: 138px; width: 42px; height: 42px }
}

/* ---- Filter toggle: estilo más prominente ---- */
#d-toggle-filters{
  background: var(--vcm-blue-light) !important;
  color: var(--vcm-blue-dark) !important;
  border: 1px solid #c7dbf5 !important;
  border-radius: 9999px !important;
  padding: .4rem .85rem !important;
  font-weight: 600 !important;
  font-size: .78rem !important;
  align-items: center;
  gap: .35rem;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out) !important;
}
#d-toggle-filters:hover{
  background: #d5e6fb !important;
  box-shadow: 0 4px 12px rgba(48,127,226,.25);
  transform: translateY(-1px);
}

/* ---- Mobile filters: dejamos scrollear con el contenido (sin transform-hide) ----
   En mobile los filtros pueden ser altos (facturación tiene KPIs + grid 6 cols).
   Intentar esconderlos con translateY genera saltos bruscos; mejor que se vayan
   de forma natural con el scroll y que el FAB los traiga de vuelta.
*/
@media (max-width: 768px){
  .filters-sticky{
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Sombra/borde mínimo al scrollear por encima */
  .filters-sticky.shadow{ box-shadow: none !important }
}

/* ---- Floating Filters FAB (mobile) ---- */
.filters-fab{
  position: fixed;
  right: 14px; bottom: 80px;
  background: linear-gradient(135deg, var(--vcm-blue), #3b82f6);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: .6rem 1rem;
  font-weight: 600; font-size: .82rem;
  display: none;
  align-items: center; gap: .4rem;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(14px) scale(.94);
  /* Transición más suave: 420ms con ease-in-out */
  transition: opacity 420ms cubic-bezier(.4,0,.2,1),
              transform 420ms cubic-bezier(.4,0,.2,1),
              box-shadow 200ms var(--ease-out);
}
.filters-fab .ico{ font-size: 1rem; line-height: 1 }
.filters-fab.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: filtersFabPulse 3.2s ease-in-out infinite;
  animation-delay: 600ms;
}
.filters-fab:hover{
  box-shadow: 0 0 0 5px rgba(59,130,246,.16), 0 14px 30px rgba(59,130,246,.45);
  transform: translateY(-2px) scale(1);
  animation-play-state: paused;
}
.filters-fab:active{ transform: scale(.96) }
@keyframes filtersFabPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.45), 0 10px 24px rgba(0,0,0,.18) }
  50%    { box-shadow: 0 0 0 10px rgba(59,130,246,0), 0 10px 26px rgba(59,130,246,.32) }
}
/* El FAB sólo vive en mobile, y sólo cuando hay una sticky en la vista */
@media (max-width: 768px){
  body.has-filters-sticky .filters-fab{ display: inline-flex }
}

/* ===== Dashboard: topbar compacto + filter chip + popover ===== */
.dash-topbar{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
}
.dash-title{
  font-size: 1.25rem; font-weight: 700; line-height: 1.15;
  flex: 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 768px){
  .dash-title{ font-size: 1.5rem }
}
.dash-spacer{ flex: 1 1 auto }

/* Selector de moneda ARS/USD (segmentado, con banderas) */
.currency-switch{
  display:inline-flex; align-items:center; gap:2px;
  background:#eef2f7; border:1px solid #e2e8f0; border-radius:999px; padding:3px;
  flex-shrink:0;
}
.cur-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border:0; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:700; color:#64748b; background:transparent;
  transition:background .15s ease, color .15s ease;
}
.cur-btn svg{ border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.10); flex-shrink:0 }
.cur-btn:not(.active):hover{ background:#e2e8f0; color:#334155 }
.cur-btn.active{ background:#fff; color:#0f172a; box-shadow:0 1px 3px rgba(0,0,0,.14) }

/* Chip verde con ícono de calendario que abre el popover */
.filter-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: #e6f6ee; color: #047857;
  border: 1px solid #a7e3c1;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  white-space: nowrap;
}
.filter-chip:hover{ background: #d5efe1; box-shadow: 0 2px 6px rgba(4,120,87,.15) }
.filter-chip:active{ transform: scale(.97) }
.filter-chip[aria-expanded="true"]{
  background: #047857; color: #fff; border-color: #047857;
}
.filter-chip svg{ flex-shrink: 0 }

/* Popover que sale del chip */
.filter-popover{
  position: fixed; z-index: 60; box-sizing: border-box;
  background: #fff; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  padding: 14px 16px 16px;
  max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden;
}
.filter-popover *{ box-sizing: border-box }
.fp-header{
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 8px;
}
.fp-header:not(:first-child){ margin-top: 16px }
.fp-title{
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #64748b; text-transform: uppercase;
}
.fp-close{
  background: transparent; border: 0; padding: 0;
  font-size: 24px; line-height: 1; cursor: pointer; color: #64748b;
  width: 28px; height: 28px; border-radius: 50%;
}
.fp-close:hover{ background: #f1f5f9; color: #0f172a }
.fp-presets{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fp-chip{
  padding: 7px 14px; border-radius: 999px;
  background: #f1f5f9; border: 1px solid transparent;
  color: #0f172a; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.fp-chip:hover{ background: #e2e8f0 }
.fp-chip.active{ background: #d1fae5; color: #047857; border-color: #a7e3c1; font-weight: 600 }
.fp-dates{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.fp-date{ min-width: 0 }
.fp-date label{
  display: block; font-size: 11px; color: #64748b; margin-bottom: 4px; font-weight: 500;
}
.fp-date .input{
  width: 100%; min-width: 0; max-width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #f8fafc;
}
.fp-date .input:focus{ background: #fff; border-color: #10b981; outline: 0; box-shadow: 0 0 0 3px rgba(16,185,129,.15) }

@media (max-width: 480px){
  .filter-popover{ left: 12px !important; right: 12px !important; width: auto !important }
  .fp-dates{ grid-template-columns: 1fr }
}

/* Cashflow: sub-secciones coloreadas */
.cf-section .section-head{ transition: filter .15s ease }
.cf-section .section-head:hover{ filter: brightness(.97) }

/* Cashflow egresos: grip de arrastre + indicadores de drop */
.eg-grip{
  cursor: grab; color: #94a3b8; margin-right: 6px; user-select: none;
  font-size: .85rem; letter-spacing: -2px;
}
.eg-grip:hover{ color: #475569 }
.eg-grip:active{ cursor: grabbing }
tr.eg-row.eg-dragging{ opacity: .4 }
tr.eg-row.eg-drop-before td{ box-shadow: inset 0 2px 0 0 var(--vcm-blue, #2727ff) }
tr.eg-row.eg-drop-after td{ box-shadow: inset 0 -2px 0 0 var(--vcm-blue, #2727ff) }

/* ===== Avatares Perfil / Administración ===== */
.perfil-avatar{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;margin:0 auto;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.perfil-avatar-ini{ background:var(--vcm-blue,#2727ff); color:#fff; font-size:2.6rem; font-weight:700 }
.adm-av{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
}
.adm-av-ini{ background:#e2e8f0;color:#334155;font-weight:700;font-size:.8rem }

/* ===== Toggle Activo / Inactivo (Claves y datos) ===== */
.vcm-toggle{
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.vcm-toggle input[type="checkbox"]{
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.vcm-toggle-track{
  position: relative; display: inline-block;
  width: 34px; height: 20px; border-radius: 999px;
  background: #10b981; /* activo → verde */
  transition: background .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  flex: 0 0 auto;
}
.vcm-toggle-thumb{
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.vcm-toggle input:checked + .vcm-toggle-track{
  background: #94a3b8; /* inactivo → gris slate */
}
.vcm-toggle input:checked + .vcm-toggle-track .vcm-toggle-thumb{
  transform: translateX(14px);
}
.vcm-toggle input:focus-visible + .vcm-toggle-track{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 0 0 3px rgba(59,130,246,.28);
}
.vcm-toggle-label{
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.vcm-toggle-label.is-on{ color: #047857 }
.vcm-toggle-label.is-off{ color: #64748b }
.vcm-toggle:hover .vcm-toggle-track{ filter: brightness(1.05) }

/* Ancho mínimo de la columna ESTADO en Claves y datos, así el toggle no colapsa */
#cl-table th:first-child, #cl-table td:first-child{
  width: 56px; min-width: 56px; text-align: center;
}
#cl-table td:first-child{ padding-left: 8px; padding-right: 8px }

/* ==================== Onboarding ==================== */
/* --- Bienvenida (dentro de .modal) --- */
.ob-welcome{ text-align:center }
.ob-hero-badge{
  width:56px;height:56px;border-radius:50%;margin:0 auto .5rem;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  background:var(--vcm-blue-light, #e8efff);
}
.ob-welcome h2{ margin:0 0 .25rem;font-size:1.35rem;font-weight:800 }
.ob-hero p{ font-size:.9rem }
.ob-hero-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.1rem 0 .5rem }
.ob-hc{
  background:#f8fafc;border:1px solid #eef2f7;border-radius:.6rem;padding:.6rem .4rem;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
}
.ob-hc span{ font-size:1.3rem }
.ob-hc b{ font-size:.78rem }
.ob-hc small{ font-size:.62rem;color:#64748b;line-height:1.1 }
.ob-dontshow{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  font-size:.8rem;color:#475569;margin:.9rem 0 .6rem;cursor:pointer;user-select:none;
}
.ob-dontshow input{ width:16px;height:16px;cursor:pointer }
.ob-actions{ display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap }
.ob-actions .btn{ flex:1 1 auto }
.ob-foot{ font-size:.7rem;margin-top:.75rem }

/* --- Tour guiado (spotlight) --- */
.tour-guard{ position:fixed; inset:0; z-index:9000; cursor:default }
.tour-spot{
  position:fixed; z-index:9001; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(15,23,42,.72), 0 0 0 3px var(--vcm-blue, #2727ff) inset;
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease, opacity .18s ease;
}
.tour-pop{
  position:fixed; z-index:9002; background:#fff; border-radius:.8rem;
  box-shadow:0 20px 50px rgba(0,0,0,.35); padding:1rem 1.1rem;
  border:1px solid #e2e8f0;
}
.tour-pop-top{ display:flex; gap:.6rem; align-items:flex-start }
.tour-ico{ font-size:1.5rem; line-height:1; flex-shrink:0 }
.tour-title{ font-weight:800; font-size:1rem }
.tour-tag{ font-size:.82rem; color:#475569; margin-top:.1rem; line-height:1.3 }
.tour-feats{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem }
.tour-feats li{ position:relative; padding-left:1.1rem; font-size:.78rem; color:#334155; line-height:1.35 }
.tour-feats li::before{ content:'✓'; position:absolute; left:0; color:var(--vcm-blue,#2727ff); font-weight:800 }
.tour-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; gap:.5rem }
.tour-nav-right{ display:flex; align-items:center; gap:.5rem }
.tour-count{ font-size:.72rem; color:#94a3b8; font-variant-numeric:tabular-nums }
.tour-skip{ background:none; border:0; color:#94a3b8; font-size:.78rem; cursor:pointer; padding:.2rem .1rem; text-decoration:underline }
.tour-skip:hover{ color:#475569 }
/* Hoja inferior en mobile */
.tour-pop--sheet{
  left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
  width:auto !important; border-radius:1rem 1rem 0 0; padding:1.1rem 1.2rem 1.4rem;
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
}

/* --- Centro de ayuda (dentro de .modal) --- */
.help-hero h2{ margin:0 0 .2rem; font-size:1.3rem; font-weight:800 }
.help-hero p{ font-size:.85rem }
.help-acc{ margin:1rem 0; display:flex; flex-direction:column; gap:.4rem }
.help-item{ border:1px solid #eef2f7; border-radius:.6rem; overflow:hidden }
.help-item.open{ border-color:#dbe4f3 }
.help-head{
  width:100%; display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem;
  background:#f8fafc; border:0; cursor:pointer; text-align:left; font-size:.9rem;
}
.help-head:hover{ background:#f1f5f9 }
.help-ico{ font-size:1.1rem }
.help-name{ font-weight:700; flex:1 }
.help-caret{ color:#94a3b8; transition:transform .18s ease }
.help-item.open .help-caret{ transform:rotate(90deg) }
.help-body{ padding:.5rem .9rem .9rem }
.help-tag{ font-size:.82rem; color:#475569; margin:.2rem 0 .5rem }
.help-feats{ list-style:disc; margin:0 0 .3rem 1.1rem; padding:0; display:flex; flex-direction:column; gap:.3rem }
.help-feats li{ font-size:.8rem; color:#334155; line-height:1.35 }
.help-subs-title{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:700; margin:.6rem 0 .35rem }
.help-subs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem }
.help-subs li{ font-size:.8rem; color:#334155; line-height:1.35; padding-left:.9rem; position:relative }
.help-subs li::before{ content:'›'; position:absolute; left:0; color:var(--vcm-blue,#2727ff); font-weight:800 }
.help-actions{ display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap }

@media (max-width:768px){
  .ob-hero-cards{ gap:.35rem }
  .help-actions{ flex-direction:column-reverse }
  .help-actions .btn{ width:100% }
}