/* =====================================================
   SOLVEN — Dark Glass Theme (v2)
   Variables semánticas: brand colors dinámicos por tenant.
   Default: dark green minimalista estilo LittleBee.
   Cargar SIEMPRE DESPUÉS de main.css.
   ===================================================== */

:root {
  /* ── BRAND (dinámico — se sobreescribe per-tenant en runtime) ─────── */
  /* Default: azul SOLVEN (sin marca propia del tenant) */
  --brand-primary:    #2450d6;      /* azul SOLVEN */
  --brand-secondary:  #1638a3;      /* azul oscuro */
  --brand-accent:     #6f93e8;      /* azul claro */
  --brand-on:         #ffffff;      /* texto sobre primary */
  --brand-tint-2:     rgba(36,80,214,0.02);
  --brand-tint-6:     rgba(36,80,214,0.06);
  --brand-tint-12:    rgba(36,80,214,0.12);
  --brand-tint-25:    rgba(36,80,214,0.25);

  /* ── SURFACE (dark neutral — gris carbón monocromático) ───────────── */
  --bg-0:             #0a0a0b;      /* deepest — body */
  --bg-1:             #111113;      /* sidebar / panels */
  --bg-2:             #16161a;      /* cards */
  --bg-3:             #1d1d22;      /* hover */

  /* ── GLASS ────────────────────────────────────────────────────────── */
  --glass:            rgba(255,255,255,0.035);
  --glass-hi:         rgba(255,255,255,0.065);
  --stroke:           rgba(255,255,255,0.07);
  --stroke-hi:        rgba(255,255,255,0.12);

  /* ── TEXT (neutral) ───────────────────────────────────────────────── */
  --text:             #f4f4f5;
  --text-2:           #d4d4d8;
  --text-3:           #9ca3af;
  --text-4:           #6b7280;

  /* ── SEMANTIC (siempre igual, no depende de marca) ────────────────── */
  --danger:           #f87171;
  --danger-bg:        rgba(248,113,113,0.10);
  --danger-border:    rgba(248,113,113,0.25);
  --warning:          #facc15;
  --warning-bg:       rgba(250,204,21,0.10);

  /* ── EFFECTS ──────────────────────────────────────────────────────── */
  --blur:             20px;
  --blur-strong:      28px;
  --radius:           12px;
  --radius-lg:        16px;
  --shadow-1:         0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-2:         0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 40px rgba(0,0,0,0.6);
  --glow-brand:       0 0 24px var(--brand-tint-25);

  /* ════════════════════════════════════════════════════════════════════
     OVERRIDE de las variables de main.css → dark.
     Todo lo que use var(--card-bg)/var(--bg)/var(--border) hereda el dark.
     ════════════════════════════════════════════════════════════════════ */
  /* Derivan del branding del tenant (--brand-*, que brand-loader.js sobreescribe
     por tenant). Sin tenant, --brand-* trae el terracota SOLVEN por defecto. */
  --primary:          var(--brand-primary) !important;
  --primary-dark:     var(--brand-secondary) !important;
  --primary-darker:   var(--brand-secondary) !important;
  --primary-light:    var(--brand-tint-12, rgba(36,80,214,0.12)) !important;
  --primary-xlight:   var(--brand-tint-6, rgba(36,80,214,0.06)) !important;
  --accent:           var(--brand-accent) !important;
  --accent-dim:       var(--brand-tint-25, rgba(36,80,214,0.2)) !important;

  --bg:               #0a0a0b !important;
  --sidebar-bg:       #111113 !important;
  --sidebar-hover:    rgba(255,255,255,0.06) !important;
  --sidebar-active:   rgba(255,255,255,0.10) !important;
  --card-bg:          #141417 !important;

  --text-primary:     #f4f4f5 !important;
  --text-secondary:   #d4d4d8 !important;
  --text-muted:       #9ca3af !important;
  --text-hint:        #6b7280 !important;

  --border:           rgba(255,255,255,0.08) !important;
  --border-light:     rgba(255,255,255,0.05) !important;

  --danger-light:     rgba(248,113,113,0.10) !important;
  --danger-border:    rgba(248,113,113,0.25) !important;
  --warning-light:    rgba(250,204,21,0.10) !important;
  --warning-border:   rgba(250,204,21,0.25) !important;
  --info:             var(--brand-primary) !important;
  --info-light:       var(--brand-tint-12, rgba(36,80,214,0.10)) !important;
  --info-border:      var(--brand-tint-25, rgba(36,80,214,0.25)) !important;
  --success:          var(--brand-primary) !important;
  --success-light:    var(--brand-tint-12, rgba(36,80,214,0.10)) !important;
  --success-border:   var(--brand-tint-25, rgba(36,80,214,0.25)) !important;
}

/* ── Background base con halos brand ──────────────────────────────────── */
html, body {
  background: var(--bg-0) !important;
  color: var(--text) !important;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 75% 55% at 15% -10%, var(--brand-tint-6) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 110%, var(--brand-tint-2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(255,255,255,0.012) 0%, transparent 70%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/></svg>");
  background-size: 180px 180px;
}

/* ── Sidebar (glass dark) ─────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, rgba(17,17,19,0.85) 0%, rgba(10,10,11,0.92) 100%) !important;
  backdrop-filter: blur(var(--blur-strong)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(140%);
  border-right: 1px solid var(--stroke);
  color: var(--text) !important;
}
.sidebar .nav-link,
.sidebar a.nav-link {
  color: var(--text-3) !important;
  background: transparent !important;
  border-radius: 10px;
  transition: background .2s, color .2s, transform .2s;
}
.sidebar .nav-link:hover {
  background: var(--glass) !important;
  color: var(--text) !important;
}
.sidebar .nav-link.active {
  background: var(--glass-hi) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 1px var(--stroke);
}
.sidebar .nav-section-label {
  color: var(--text-4) !important;
  font-size: 10px;
  letter-spacing: .08em;
}
.sidebar-logo-full { filter: brightness(0) saturate(100%) invert(1); opacity: .95; }
.sidebar-logo-text { color: var(--text-3) !important; }

.logout-btn { color: var(--text-3) !important; }
.logout-btn:hover { color: var(--text) !important; background: var(--glass) !important; }

/* ── Topbar (glass) ───────────────────────────────────────────────────── */
.topbar {
  background: rgba(17,17,19,0.55) !important;
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-bottom: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
/* En mobile (PWA instalada o Safari con status bar translúcida) el contenido
   puede correr debajo del status bar/notch — igual que el bottom-nav usa
   env(safe-area-inset-bottom) sin condicionarlo a display-mode, aquí se dejó
   env(safe-area-inset-top) sin esa condición: en desktop y en un tab normal
   sin notch resuelve a 0 y no cambia nada. Va AQUÍ (no en main.css) porque
   main.css tiene, más abajo en su propio archivo, un `.topbar{padding:0 12px}`
   para mobile que pisaba el padding-top con la misma especificidad; este
   archivo se carga después de main.css así que gana sin importar el orden
   interno de ese. .main-content compensa con el mismo padding-top en
   main.css para que el contenido no arranque debajo del topbar (ahora fixed). */
@media (max-width: 768px) {
  .topbar {
    height: calc(var(--topbar-height) + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
  }
}
/* Nombre de página oculto, pero se mantiene como ESPACIADOR (flex:1) para empujar
   el cluster derecho (tokens · fecha · INTELLI) pegado a la derecha. */
.topbar-title { visibility: hidden !important; flex: 1 1 auto !important; }
.topbar .sidebar-toggle { margin-right: 4px; }
.topbar-date {
  background: var(--glass) !important;
  border: 1px solid var(--stroke);
  color: var(--text-2) !important;
  border-radius: 999px;
  padding: 4px 12px !important;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
.sidebar-toggle, .mobile-toggle { color: var(--text-2) !important; }

/* ── Main content ─────────────────────────────────────────────────────── */
.main-content, .page-content {
  background: transparent !important;
  color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--text) !important; }

/* ── Cards / contenedores (LIQUID GLASS) ──────────────────────────────── */
/* Minimal liquid glass: superficies más translúcidas, bordes casi invisibles,
   profundidad por blur + sombra en vez de contornos. */
.card, .stat-card, .kpi-card, .panel, .section,
.dashboard-card, .data-card, .form-card,
.cp-kpi, .cp-section, .crm-kpi, .crm-col, .crm-card,
.demo-card, .ajustes-panel, .filter-bar, .table-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.008) 100%) !important;
  backdrop-filter: blur(var(--blur-strong)) saturate(185%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(185%);
  border: 1px solid rgba(255,255,255,0.05) !important;   /* borde casi invisible */
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  /* edge highlight (specular) + soft depth — el truco del liquid glass */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -18px 36px -28px rgba(0,0,0,0.55),
    0 8px 28px rgba(0,0,0,0.35) !important;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* brillo especular superior — capa de cristal */
.card::before, .stat-card::before, .kpi-card::before,
.cp-kpi::before, .crm-kpi::before, .crm-card::before, .demo-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 38%);
  opacity: .8;
}
.card:hover, .stat-card:hover, .kpi-card:hover,
.cp-kpi:hover, .crm-kpi:hover, .crm-card:hover, .demo-card:hover {
  border-color: var(--stroke-hi) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 -16px 32px -24px rgba(0,0,0,0.6),
    0 10px 30px rgba(0,0,0,0.5),
    0 0 24px var(--brand-tint-12) !important;
}

/* KPI typography */
.kpi-label, .stat-label, .cp-kpi-label, .crm-kpi-label,
.data-table thead th {
  color: var(--text-3) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi-value, .stat-value, .cp-kpi-value, .crm-kpi-value, .cp-money {
  color: var(--text) !important;
  font-weight: 700;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */
table, .data-table, .cp-tbl {
  background: transparent !important;
  color: var(--text-2) !important;
  border-collapse: collapse !important;
}
table th, .data-table th, .cp-tbl th {
  background: rgba(255,255,255,0.025) !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--stroke) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .05em;
  padding: 10px 12px !important;
}
table td, .data-table td, .cp-tbl td {
  border-bottom: 1px solid rgba(255,255,255,0.045) !important;
  color: var(--text-2) !important;
  padding: 10px 12px !important;
}
table tbody tr:hover, .data-table tbody tr:hover, .cp-tbl tbody tr:hover {
  background: var(--glass) !important;
}

/* ── Tablas con altura finita + scroll interno (todo el sistema) ───────────
   Cada card/contenedor que envuelve una tabla se vuelve región scrolleable
   con un alto máximo, y el encabezado queda pegajoso para no perder las
   columnas. Aplica tanto a páginas de tenants (.table-wrapper) como al
   superadmin (.card-body / divs que envuelven .data-table o .sa-table).      */
.table-wrapper,
.table-scroll,
.card-body:has(> table),
.card-body:has(> .table-wrapper),
.sa-side-card > div:has(> table),
div:has(> table.data-table),
div:has(> table.sa-table) {
  max-height: 60vh !important;
  overflow: auto !important;
}
/* Header pegajoso (fondo opaco para tapar las filas al hacer scroll) */
table thead th,
.data-table thead th,
.sa-table thead th,
.cp-tbl thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: var(--bg-3) !important;
}
/* Scrollbar discreto dentro de las tablas */
.table-wrapper::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.card-body::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrapper::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb { background: var(--stroke-hi); border-radius: 99px; }
.table-wrapper::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track { background: transparent; }

/* Columna de ACCIONES siempre pegada a la derecha de la tabla (aunque el
   sidebar colapse y la tabla se ensanche). Las tablas del chat quedan fuera. */
table th:last-child, table td:last-child,
.data-table th:last-child, .data-table td:last-child {
  text-align: right;
}
td .actions, .data-table .actions {
  display: flex;
  justify-content: flex-end;
}
.ip-bubble .ip-table th:last-child, .ip-bubble .ip-table td:last-child,
.md-ai .ip-table th:last-child, .md-ai .ip-table td:last-child {
  text-align: left !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn, button.btn {
  background: var(--glass) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  font-weight: 600;
  transition: all .18s;
  backdrop-filter: blur(10px);
}
.btn:hover, button.btn:hover {
  background: var(--glass-hi) !important;
  border-color: var(--stroke-hi) !important;
  transform: translateY(-1px);
}
.btn-primary, button.btn-primary {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-tint-25) !important;
  color: var(--brand-on) !important;
  box-shadow: 0 6px 20px var(--brand-tint-25);
}
.btn-primary:hover, button.btn-primary:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-tint-25) !important;
  color: var(--brand-on) !important;
  filter: brightness(1.06);
  box-shadow: 0 10px 28px var(--brand-tint-25);
}
.btn-danger, .btn-reject {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-border) !important;
}

/* ── Segmented toggle (ej. Tema Claro/Oscuro en Ajustes) ────────────────── */
.theme-opt.active {
  background: var(--brand-primary) !important;
  color: var(--brand-on, #fff) !important;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
input, select, textarea,
.form-input, .form-control, .form-select {
  background: rgba(10,10,11,0.65) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  transition: border-color .15s, box-shadow .15s;
  backdrop-filter: blur(6px);
}
input::placeholder, textarea::placeholder { color: var(--text-4) !important; }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-control:focus {
  border-color: var(--brand-primary) !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px var(--brand-tint-12),
    0 0 20px var(--brand-tint-6) !important;
}
label, .form-label { color: var(--text-3) !important; font-weight: 500; }

/* Selects: chevron */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ── Modals / Overlays ────────────────────────────────────────────────── */
.modal, .modal-content, .modal-card, .popup, .dialog,
.crm-lead-card, .crediplus-modal, .crm-modal {
  background: rgba(17,17,19,0.85) !important;
  backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  border: 1px solid var(--stroke-hi) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-2) !important;
}
.modal-overlay, .overlay, .crediplus-modal-overlay, .crm-lead-modal {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-page { background: var(--bg-0) !important; }
.login-page .login-card {
  background: rgba(17,17,19,0.75) !important;
  backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
  border: 1px solid var(--stroke-hi) !important;
  box-shadow: var(--shadow-2) !important;
}
.login-page .form-input {
  background: rgba(10,10,11,0.65) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
.login-page .btn-primary {
  background: var(--brand-primary) !important;
  color: var(--brand-on) !important;
}

/* ── Charts / canvas ──────────────────────────────────────────────────── */
canvas { background: transparent !important; }

/* ── Scrollbar fino ───────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--brand-tint-25); }

/* ── Badges / pills ───────────────────────────────────────────────────── */
.badge, .pill, .chip, .tag {
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text-2) !important;
  border-radius: 999px;
}
.badge-success, .badge-aprobado { background: var(--brand-tint-12) !important; color: var(--brand-accent) !important; border-color: var(--brand-tint-25) !important; }
.badge-danger, .badge-rechazado { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-border) !important; }
.badge-warning, .badge-pendiente { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: rgba(250,204,21,0.25) !important; }

/* ── INTELLI widget ───────────────────────────────────────────────────────
   El widget se estiliza SOLO (diseño claro estilo AURA con acentos de marca,
   igual en tema claro y oscuro). No forzar dark aquí: rompía las negritas,
   tablas y burbujas del chat sobre el panel blanco. ─────────────────────── */

/* ── KPI / Stats grids ────────────────────────────────────────────────── */
.kpi-grid, .stats-grid, .summary-grid { background: transparent !important; }
.kpi-grid > *, .stats-grid > * {
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  color: var(--text) !important;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs, .ajustes-tabs, .tab-list {
  background: var(--glass) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px);
}
.tab-btn, .ajustes-tab {
  background: transparent !important;
  color: var(--text-3) !important;
}
.tab-btn.active, .ajustes-tab.active {
  background: var(--glass-hi) !important;
  color: var(--text) !important;
}

/* ── Texto semántico ──────────────────────────────────────────────────── */
.text-success, .text-positive { color: var(--brand-primary) !important; }
.text-danger, .text-negative  { color: var(--danger) !important; }
.text-warning, .text-amber    { color: var(--warning) !important; }

/* ── Animaciones ──────────────────────────────────────────────────────── */
@keyframes dg-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.card, .stat-card, .kpi-card, .crm-card, .demo-card {
  animation: dg-fade-in .25s ease-out;
}

/* ── Util classes para usar brand en otros lados ──────────────────────── */
.bg-brand     { background: var(--brand-primary) !important; color: var(--brand-on) !important; }
.text-brand   { color: var(--brand-primary) !important; }
.border-brand { border-color: var(--brand-primary) !important; }
.glow-brand   { box-shadow: var(--glow-brand) !important; }

/* ════════════════════════════════════════════════════════════════════════
   DENSIDAD COMPACTA GLOBAL — cards mucho más pequeñas en TODO el sistema
   (superadmin, dashboard, exec, ajustes, etc.) + liquid glass en KPIs.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --radius:    14px;     /* esquinas suaves modernas */
  --radius-lg: 18px;
  --topbar-height: 54px !important;   /* topbar más esbelto */
}
/* Cards: esquinas suaves, tipografía chica y precisa */
.card, .stat-card, .kpi-card, .panel, .section,
.dashboard-card, .data-card, .form-card,
.cp-kpi, .cp-section, .crm-kpi, .crm-card,
.demo-card, .ajustes-panel, .filter-bar, .table-card,
.table-container {
  border-radius: 14px !important;
}
.card .card-body,
.card > .card-header,
.panel-body, .panel .panel-body,
.table-card .card-body,
.dashboard-card .card-body,
.cp-section, .ajustes-panel,
.section-body {
  padding: 12px 14px !important;
}
/* Títulos de sección/tabla: pequeños, precisos (nada de headings gordos) */
.card-title, .table-title, .cp-section h2, .chart-title, .widget-title {
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
}
.card-subtitle { font-size: 11px !important; }
/* KPIs / stats: celdas pequeñas, número protagonista y label discreto */
.kpi-grid, .kpi-grid-6, .stats-grid, .summary-grid,
.cp-kpis, .crm-kpis {
  gap: 8px !important; margin-bottom: 12px !important;
  grid-auto-rows: auto !important;   /* cada fila a su contenido, no a la card más alta */
}
.kpi-grid > *, .kpi-grid-6 > *, .stats-grid > *, .summary-grid > *,
.cp-kpi, .crm-kpi, .kpi-card, .stat-card {
  padding: 8px 11px !important;
  border-radius: 12px !important;
  min-height: 0 !important;
}
.kpi-header { gap: 8px !important; }
.kpi-value { margin-bottom: 1px !important; font-size: 15px !important; }
.kpi-label { font-size: 8.5px !important; }
/* Sub-línea (ej. monto de pagos hoy): pequeña, sin estirar la card */
.kpi-trend { font-size: 10.5px !important; margin-top: 2px !important; }
.kpi-icon { width: 24px !important; height: 24px !important; border-radius: 8px !important; }
.kpi-icon svg { width: 12px !important; height: 12px !important; }
.kpi-value, .stat-value, .cp-kpi-value, .crm-kpi-value, .cp-money {
  font-size: 17px !important; line-height: 1.05 !important;
  font-weight: 750 !important; letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
}
.kpi-label, .stat-label, .cp-kpi-label, .crm-kpi-label {
  font-size: 9px !important; letter-spacing: .07em !important;
  color: var(--text-4) !important; font-weight: 600 !important;
}
/* Íconos de KPI: chip pequeño con tinte de marca (no gris genérico) */
.kpi-icon {
  width: 28px !important; height: 28px !important;
  border-radius: 9px !important;
  background: var(--brand-tint-6) !important;
  color: var(--brand-primary) !important;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg { width: 14px !important; height: 14px !important; }
.kpi-icon.danger  { background: var(--danger-bg) !important;  color: var(--danger) !important; }
.kpi-icon.warning { background: var(--warning-bg) !important; color: var(--warning) !important; }

/* Tablas compactas */
table th, .data-table th, .cp-tbl th { padding: 7px 10px !important; font-size: 9px !important; letter-spacing: .06em !important; }
table td, .data-table td, .cp-tbl td { padding: 7px 10px !important; font-size: 12px !important; }

/* Botones compactos, pill moderno */
.btn, button.btn { padding: 6px 12px !important; font-size: 12px !important; border-radius: 10px !important; }
.btn-sm { padding: 4px 10px !important; font-size: 11px !important; }

/* Grids de cards (tenants, execs, demos, clientes): más densos */
.grid, .cards-grid, #execs-grid, #tenants-grid,
.clientes-grid, .demos-grid { gap: 10px !important; }

/* Liquid glass también en celdas KPI sueltas */
.kpi-grid > *, .kpi-grid-6 > *, .stats-grid > *, .summary-grid > *,
.cp-kpi, .crm-kpi {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%) !important;
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 6px 20px rgba(0,0,0,0.32) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — para demos con marca clara (ej. AURA). Se activa con la clase
   html.demo-light (la pone brand-loader.js según brand_theme del tenant).
   Voltea superficies/textos a claro; los acentos siguen el branding (--brand-*).
   Mayor especificidad que :root → gana sobre el dark por defecto.
   ═══════════════════════════════════════════════════════════════════════════ */
html.demo-light {
  /* ── Paleta Growly — negro/blanco de base + azul vivo como único acento de
     marca (neutraliza el color de cada tenant, ver bloque monocromático más
     abajo) + celeste como tinte secundario decorativo. Todo componente que
     lea var(--brand-*) (botones, badges, kicker, focus rings, kpi-icon,
     gráficas) hereda el azul automáticamente, sin tocar cada regla. */
  --brand-primary:   #4342ff !important;
  --brand-secondary: #2e2dcc !important;
  --brand-accent:    #6f6dff !important;
  --brand-on:        #ffffff !important;
  --brand-tint-2:    rgba(67,66,255,0.04) !important;
  --brand-tint-6:    rgba(67,66,255,0.07) !important;
  --brand-tint-12:   rgba(67,66,255,0.12) !important;
  --brand-tint-25:   rgba(67,66,255,0.22) !important;
  --accent-cyan:      #bcf3ff !important;
  --accent-cyan-tint: rgba(188,243,255,0.45) !important;

  --bg-0:  #fafafa !important;   /* body */
  --bg-1:  #ffffff !important;   /* sidebar / panels */
  --bg-2:  #ffffff !important;   /* cards */
  --bg-3:  #f4f4f5 !important;   /* hover / sticky header */
  --glass:     rgba(20,20,25,0.035) !important;
  --glass-hi:  rgba(20,20,25,0.055) !important;
  --stroke:    rgba(20,20,25,0.09)  !important;
  --stroke-hi: rgba(20,20,25,0.15)  !important;
  --text:   #18181b !important;
  --text-2: #3f3f46 !important;
  --text-3: #71717a !important;
  --text-4: #a1a1aa !important;

  --bg:             #fafafa !important;
  --card-bg:        #ffffff !important;
  --sidebar-bg:     #ffffff !important;
  --sidebar-hover:  rgba(20,20,25,0.045) !important;
  --sidebar-active: rgba(20,20,25,0.07) !important;
  --text-primary:   #18181b !important;
  --text-secondary: #3f3f46 !important;
  --text-muted:     #71717a !important;
  --text-hint:      #a1a1aa !important;
  --border:         rgba(20,20,25,0.09) !important;
  --border-light:   rgba(20,20,25,0.055) !important;

  --radius:    10px !important;
  --radius-lg: 12px !important;

  --shadow-1: 0 1px 2px rgba(20,20,25,0.04) !important;
  --shadow-2: 0 1px 2px rgba(20,20,25,0.04), 0 8px 20px rgba(20,20,25,0.06) !important;
}
/* Fondo claro plano — sin halos de color */
html.demo-light, html.demo-light body { background: #fafafa !important; color: var(--text) !important; }
html.demo-light body::before { background-image: none !important; }
html.demo-light body::after { opacity: 0 !important; }

/* Sidebar / topbar — blanco plano, sin blur ni degradado, para TODOS los
   tenants por igual (ver también el bloque que neutraliza .demo-sidebar). */
html.demo-light .sidebar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid #ececee !important;
}
/* Wordmark azul en su color natural sobre el sidebar blanco (el filtro
   blanco de arriba es solo para el sidebar oscuro, opt-in). */
html.demo-light .sidebar-logo-full { filter: none !important; opacity: 1 !important; }
html.demo-light .topbar, html.demo-light header.topbar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #ececee !important;
}

/* Cards: superficie plana blanca, borde fino, sombra mínima — sin glass */
html.demo-light .card, html.demo-light .stat-card, html.demo-light .kpi-card,
html.demo-light .cp-kpi, html.demo-light .crm-kpi, html.demo-light .crm-card, html.demo-light .demo-card,
html.demo-light .kpi-grid > *, html.demo-light .kpi-grid-6 > *, html.demo-light .stats-grid > *,
html.demo-light .summary-grid > *, html.demo-light .table-container, html.demo-light .sa-side-card,
html.demo-light .ajustes-panel, html.demo-light .filter-bar, html.demo-light .table-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #ececee !important;
  box-shadow: 0 1px 2px rgba(20,20,25,0.03) !important;
}
html.demo-light .card::before, html.demo-light .stat-card::before, html.demo-light .kpi-card::before,
html.demo-light .cp-kpi::before, html.demo-light .crm-kpi::before, html.demo-light .crm-card::before,
html.demo-light .demo-card::before { opacity: 0 !important; }
html.demo-light .card:hover, html.demo-light .stat-card:hover, html.demo-light .kpi-card:hover,
html.demo-light .cp-kpi:hover, html.demo-light .crm-kpi:hover, html.demo-light .crm-card:hover {
  border-color: #dcdce0 !important;
  box-shadow: 0 2px 6px rgba(20,20,25,0.05) !important;
}

/* Inputs / selects / textareas claros */
html.demo-light input, html.demo-light select, html.demo-light textarea,
html.demo-light .form-input, html.demo-light .form-control, html.demo-light .form-select {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(20,20,40,0.08) !important;
  color: var(--text) !important;
}

/* Header pegajoso de tablas: opaco claro */
html.demo-light table thead th, html.demo-light .data-table thead th,
html.demo-light .sa-table thead th, html.demo-light .cp-tbl thead th {
  background: #f1f1f8 !important;
  color: var(--text-3) !important;
}

/* Botón secundario / .btn glass en claro */
html.demo-light .btn, html.demo-light button.btn {
  background: #ffffff !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
html.demo-light .btn:hover, html.demo-light button.btn:hover { background: #f1f1f8 !important; }
/* El primario usa color de marca sólido, sin degradado */
html.demo-light .btn-primary, html.demo-light button.btn-primary {
  background: var(--brand-primary) !important;
  color: var(--brand-on) !important;
}
/* Sin esto, el hover genérico de arriba (fondo gris casi blanco) le gana por
   especificidad al primario y el texto blanco queda ilegible sobre él. */
html.demo-light .btn-primary:hover, html.demo-light button.btn-primary:hover {
  background: var(--brand-primary) !important;
  color: var(--brand-on) !important;
  filter: brightness(1.08);
}

/* Modales / popups en claro — antes el fondo translúcido + blur fuerte sobre
   un overlay oscuro los dejaba "apagados" (poco contraste, texto gris sobre
   gris). Ahora: blanco sólido y opaco, borde y sombra más marcados. */
html.demo-light .modal, html.demo-light .modal-content, html.demo-light .modal-card,
html.demo-light .popup, html.demo-light .dialog, html.demo-light .crm-lead-card,
html.demo-light .crm-modal {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(20,20,35,0.08) !important;
  color: var(--text) !important;
  box-shadow: 0 30px 80px -20px rgba(20,20,40,0.35), 0 8px 24px -8px rgba(20,20,40,0.16) !important;
}
html.demo-light .modal-overlay, html.demo-light .overlay {
  background: rgba(12,12,25,0.55) !important;
}
html.demo-light .modal-header, html.demo-light .modal-footer {
  background: #fbfbfe !important;
  border-color: rgba(20,20,35,0.08) !important;
}
html.demo-light .modal-title { color: var(--text) !important; font-weight: 750 !important; }
html.demo-light .modal-header .modal-close { background: #f1f1f8 !important; color: var(--text-3) !important; }
html.demo-light .modal-body { color: var(--text) !important; }
html.demo-light .modal-body p { color: var(--text-muted) !important; }

/* Checkboxes de listas dentro de modales (p. ej. "Elegir Agentes IA") —
   más grandes y con el azul de marca en vez del gris de sistema. */
html.demo-light .modal input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  flex-shrink: 0;
  cursor: pointer;
}
html.demo-light .ai-widget-body { background: #fafafd !important; color: var(--text-2) !important; border-color: var(--stroke) !important; }
html.demo-light .alert { border-color: var(--stroke) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR MONOCROMÁTICO — antes cada tenant podía pintar el sidebar con su
   color de marca (html.demo-sidebar). Se retira: TODOS los tenants, admins y
   superadmin ven el mismo sidebar blanco/minimalista estilo Handle. El logo
   propio de cada cliente se mantiene (identidad), pero ya no tiñe el chrome.
   Estas reglas igualan la especificidad de las que reemplazan para ganar por
   orden de aparición — no se borran, se neutralizan a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */
html.demo-sidebar .sidebar, html.demo-light.demo-sidebar .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #ececee !important;
  box-shadow: none !important;
}
html.demo-sidebar .sidebar .logo-circle-sm { width: 32px !important; height: 32px !important; }
html.demo-sidebar .sidebar .sidebar-logo { padding: 16px 14px !important; gap: 10px !important; }

html.sb-ink.demo-sidebar .sidebar,
html.demo-sidebar .sidebar {
  box-shadow: none !important; border-right: 1px solid #ececee !important;
}
html.sb-ink.demo-sidebar .sidebar h2, html.demo-sidebar .sidebar h2,
html.sb-ink.demo-sidebar .sidebar #user-name, html.demo-sidebar .sidebar #user-name { color: #18181b !important; }
html.sb-ink.demo-sidebar .sidebar .sidebar-logo-text,
html.demo-sidebar .sidebar .sidebar-logo-text { color: rgba(20,20,25,0.55) !important; }
html.sb-ink.demo-sidebar .sidebar .nav-link, html.sb-ink.demo-sidebar .sidebar .nav-link .nav-icon svg,
html.demo-sidebar .sidebar .nav-link, html.demo-sidebar .sidebar .nav-link .nav-icon svg { color: rgba(20,20,25,0.66) !important; }
html.sb-ink.demo-sidebar .sidebar .nav-link:hover, html.demo-sidebar .sidebar .nav-link:hover {
  background: rgba(20,20,25,0.06) !important; color: #18181b !important;
}
html.sb-ink.demo-sidebar .sidebar .nav-link.active, html.sb-ink.demo-sidebar .sidebar .nav-link.active .nav-icon svg,
html.demo-sidebar .sidebar .nav-link.active, html.demo-sidebar .sidebar .nav-link.active .nav-icon svg {
  background: rgba(20,20,25,0.07) !important; color: #18181b !important;
}
html.sb-ink.demo-sidebar .sidebar .nav-section-label, html.demo-sidebar .sidebar .nav-section-label { color: rgba(20,20,25,0.4) !important; }
html.sb-ink.demo-sidebar .sidebar #user-role, html.demo-sidebar .sidebar #user-role { color: rgba(20,20,25,0.5) !important; }
html.sb-ink.demo-sidebar .sidebar .user-card, html.demo-sidebar .sidebar .user-card {
  background: rgba(20,20,25,0.05) !important; border-color: rgba(20,20,25,0.09) !important;
}
html.sb-ink.demo-sidebar .sidebar .logout-btn, html.demo-sidebar .sidebar .logout-btn { color: rgba(20,20,25,0.6) !important; }
html.sb-ink.demo-sidebar .sidebar .logout-btn:hover, html.demo-sidebar .sidebar .logout-btn:hover {
  color: #18181b !important; background: rgba(20,20,25,0.07) !important;
}
html.sb-ink.demo-sidebar .sidebar .sidebar-collapse-btn {
  background: rgba(20,20,25,0.05) !important; border-color: rgba(20,20,25,0.10) !important; color: rgba(20,20,25,0.6) !important;
}
/* Logo del cliente tal cual: sin chip, sin padding, sin border-radius */
html.demo-sidebar .sidebar .logo-circle-sm {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Sidebar: item activo con tinte celeste (acento Growly), texto/ícono en
   negro para contraste — igual que la card resaltada de la muestra. ────── */
html.demo-light .sidebar .nav-link.active {
  background: var(--accent-cyan-tint) !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
}

/* ── KPI — franja de estadísticas compacta (aplica a cualquier .kpi-grid:
   dashboard, sub-grupos de Gráficos, etc). Sin cajas con sombra ni ícono,
   celdas separadas por una línea fina, se acomodan solas por ancho. ────── */
html.demo-light .kpi-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-bottom: 8px !important;
  background: var(--card-bg);
  border: 1px solid #ececee;
  border-radius: 10px;
  overflow: hidden;
}
html.demo-light .kpi-section-divider { display: none !important; }

html.demo-light .kpi-card {
  flex: 1 1 160px !important;
  padding: 9px 14px !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid #ececee !important;
  border-bottom: 1px solid #ececee !important;
  min-height: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.demo-light .kpi-card:hover { box-shadow: none !important; transform: none !important; background: #fafafa !important; }
html.demo-light .kpi-header { gap: 0 !important; }

/* ── Dashboard: las 12 métricas — mini-cards individuales (no celdas de
   tabla), grid FIJO de 6 columnas × 2 filas exactas. Borde uniforme fino,
   SIN acento lateral de color (se veía cargado) — solo tipografía. ─────── */
html.demo-light #dashboard-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
@media (max-width: 1100px) { html.demo-light #dashboard-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { html.demo-light #dashboard-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 380px)  { html.demo-light #dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } }

html.demo-light #dashboard-kpi-grid .kpi-card {
  background: var(--card-bg) !important;
  border: 1px solid #ececee !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
}
html.demo-light #dashboard-kpi-grid .kpi-card:hover {
  background: var(--card-bg) !important;
  border-color: #dcdce4 !important;
  box-shadow: none !important;
}
/* 3-4 columnas en mobile en vez de 2 — valores más chicos para que quepan,
   sin desbordar tarjeta ni encimarse con la siguiente. */
@media (max-width: 640px) {
  html.demo-light #dashboard-kpi-grid .kpi-card { padding: 7px 8px !important; min-width: 0 !important; overflow: hidden !important; }
  html.demo-light #dashboard-kpi-grid .kpi-value {
    font-size: 12px !important; letter-spacing: -0.01em !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  html.demo-light #dashboard-kpi-grid .kpi-label {
    font-size: 7.7px !important; letter-spacing: 0.01em !important; line-height: 1.25 !important;
  }
}

/* Sin íconos en los KPI: pura tipografía (número + label), cero ruido visual. */
html.demo-light .kpi-grid .kpi-icon { display: none !important; }
html.demo-light .kpi-grid .kpi-value { padding-right: 0 !important; }

html.demo-light .rep-section .kpi-value { font-size: 17px !important; }

/* "★ Insight Intelli": oculto salvo hover — deja de competir con el número. */
html.demo-light .kpi-chip {
  position: absolute !important; top: 6px !important; right: 8px !important;
  opacity: 0 !important; transition: opacity .15s ease !important;
  background: none !important; border: none !important; padding: 2px !important;
  color: var(--text-hint) !important; line-height: 0 !important;
}
html.demo-light .kpi-card:hover .kpi-chip { opacity: 1 !important; }

html.demo-light .kpi-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1px !important;
  padding-right: 0 !important;
  white-space: nowrap;
}
html.demo-light .kpi-label {
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--text-hint) !important;
  white-space: nowrap;
}
html.demo-light .kpi-trend { margin-top: 2px !important; padding-top: 0 !important; border-top: none !important; font-size: 10.5px !important; }

/* ── Dashboard: charts de "Ganancia Mensual" / "Distribución de Mora" más
   bajos — antes 260px, se sentían con mucho aire arriba/abajo. ─────────── */
html.demo-light .chart-container:has(#ganancia-chart),
html.demo-light .chart-container:has(#mora-chart) {
  height: 190px !important;
}

/* ── Envejecimiento de Cartera: cards que NO se estiran a lo ancho (antes
   el ancho de siempre (5 columnas); el problema real era el aire INTERNO
   (padding + line-height sueltos) — se resuelve bajando la altura: label
   arriba, número y monto en la MISMA fila (usa el ancho en vez de apilar
   4 líneas), barra al pie. ───────────────────────────────────────────── */
html.demo-light .aging-card {
  padding: 10px 14px 9px !important;
  text-align: left !important;
}
html.demo-light .aging-label { margin-bottom: 5px !important; font-size: 10px !important; }
html.demo-light .aging-row {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px;
}
html.demo-light .aging-count { font-size: 22px !important; margin-bottom: 0 !important; }
html.demo-light .aging-monto { font-size: 11.5px !important; white-space: nowrap; }
html.demo-light .aging-bar {
  height: 3px; background: #f1f1f3; border-radius: 2px; margin-top: 7px; overflow: hidden;
}
html.demo-light .aging-bar-fill { height: 100%; border-radius: 2px; width: 0%; transition: width .4s ease; }

/* ── Agentes IA — se presentan como agentes autónomos (icono + nombre propio
   + qué hacen), no como "widgets" genéricos con botón. ───────────────────── */
html.demo-light .ai-agent-count {
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-primary); background: var(--brand-tint-12);
  padding: 3px 10px; border-radius: 999px;
}
html.demo-light .ai-agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; }
@media (max-width: 1100px) { html.demo-light .ai-agent-grid { grid-template-columns: 1fr; } }

html.demo-light .ai-agent-card {
  background: var(--card-bg); border: 1px solid #ececee; border-radius: 12px;
  padding: 14px 16px 16px; display: flex; flex-direction: column;
}
html.demo-light .ai-agent-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
html.demo-light .ai-agent-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint-12); color: var(--brand-primary);
}
html.demo-light .ai-agent-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-hint); margin-bottom: 1px;
}
html.demo-light .ai-agent-name { font-size: 13.5px; font-weight: 750; color: var(--text-primary); }
html.demo-light .ai-agent-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }

html.demo-light .ai-agent-card .ai-widget-body {
  background: var(--bg); border-radius: 9px; padding: 10px 12px;
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  margin-bottom: 10px; min-height: 68px;
}
html.demo-light .ai-agent-card .ai-widget-body.loading { color: var(--text-hint); font-style: italic; }
html.demo-light .ai-agent-card .ai-widget-body.error   { color: var(--danger); }
html.demo-light .ai-agent-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 48px; color: var(--text-hint); text-align: center;
}
html.demo-light .ai-agent-empty span { font-size: 11px; }

html.demo-light .ai-agent-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: auto;
}

/* ── Semántico dentro de la paleta — CERO rojo/vino/ámbar. "Crítico" se
   expresa en negro (máxima seriedad) y "alerta" en azul oscuro, siguiendo
   exactamente los 4 colores de Growly (negro / azul / celeste / blanco). ── */
html.demo-light {
  --danger:        #0a0a0a !important;
  --danger-dark:   #000000 !important;
  --danger-light:  rgba(10,10,15,0.06) !important;
  --danger-border: rgba(10,10,15,0.18) !important;
  --warning:       #2e2dcc !important;
  --warning-light: rgba(46,45,204,0.08) !important;
  --warning-border: rgba(46,45,204,0.22) !important;
}

/* ── Tarjetas de envejecimiento de cartera: rampa de intensidad de azul
   (sin negro/rojo/ámbar/vino) — el azul se intensifica con la severidad,
   aplicado como FONDO de la card (texto blanco encima). ─────────────────── */
html.demo-light .aging-card.al-dia    { background: #8482ff !important; border-color: #8482ff !important; }
html.demo-light .aging-card.dias-1-7  { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; }
html.demo-light .aging-card.dias-8-30 { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
html.demo-light .aging-card.dias-8-90 { background: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; }
html.demo-light .aging-card.mas-90    { background: #1f1e8f !important; border-color: #1f1e8f !important; }

html.demo-light .aging-card .aging-label { color: rgba(255,255,255,0.72) !important; }
html.demo-light .aging-card .aging-count { color: #ffffff !important; }
html.demo-light .aging-card .aging-monto { color: rgba(255,255,255,0.88) !important; }
html.demo-light .aging-card .aging-bar { background: rgba(255,255,255,0.25) !important; }
html.demo-light .aging-card .aging-bar-fill { background: #ffffff !important; }

/* ── Botón de colapsar sidebar: liquid glass en el azul de marca (antes
   gris casi negro fijo, sin relación con el logo). ───────────────────────── */
html.demo-light .sidebar-collapse-btn {
  background: rgba(67,66,255,0.14) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1px solid rgba(67,66,255,0.28) !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 4px 14px -4px rgba(67,66,255,0.35), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
html.demo-light .sidebar-collapse-btn:hover {
  background: rgba(67,66,255,0.24) !important;
  border-color: rgba(67,66,255,0.42) !important;
}

/* ── Quick FAB: azul de marca en vez del negro genérico. ──────────────── */
html.demo-light .fab-main {
  background: var(--brand-primary) !important;
  box-shadow: 0 10px 26px -8px rgba(67,66,255,0.5), 0 2px 8px rgba(67,66,255,0.2) !important;
}
html.demo-light .fab-action {
  color: var(--brand-primary) !important;
  border-color: rgba(67,66,255,0.16) !important;
}
html.demo-light .fab-action:hover {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  border-color: var(--brand-primary) !important;
}

/* ── Badges de estado: dentro de la paleta (las clases base en main.css
   usan pasteles fijos — amarillo/rosa — que no aplican aquí). ──────────── */
html.demo-light .badge-warning {
  background: var(--warning-light) !important; color: var(--warning) !important; border: 1px solid var(--warning-border) !important;
}
html.demo-light .badge-danger {
  background: var(--danger-light) !important; color: var(--danger) !important; border: 1px solid var(--danger-border) !important;
}
html.demo-light .badge-success {
  background: var(--brand-tint-12) !important; color: var(--brand-secondary) !important; border: 1px solid var(--brand-tint-25) !important;
}
html.demo-light .badge-pendiente { color: var(--warning) !important; }
html.demo-light .badge-ejecutivo { color: var(--brand-primary) !important; }

/* ── Otros componentes con rojo/ámbar fijo en main.css (stat-card, botón de
   borrar en tablas, card comparativo) — misma regla: negro/azul, sin rojo. ── */
html.demo-light .stat-card.danger .stat-card-value  { color: var(--danger) !important; }
html.demo-light .stat-card.warning .stat-card-value { color: var(--warning) !important; }
html.demo-light .btn-xs.btn-danger-xs {
  background: var(--danger-light) !important; color: var(--danger) !important; border-color: var(--danger-border) !important;
}
html.demo-light .btn-xs.btn-danger-xs:hover { background: rgba(10,10,15,0.10) !important; }
html.demo-light .comparativo-card.info .c-value { color: var(--brand-primary) !important; }

/* ── Drawer móvil ("Más") — fondo azul SOLVEN con iconos/texto blancos,
   distinto del sidebar blanco de escritorio; entra desde la derecha.
   Selectores duplicados con .demo-sidebar: el bloque "monocromático" de
   arriba (html.demo-light.demo-sidebar .sidebar {...}) tiene specificity
   (0,3,1) y le gana a un simple html.demo-light .sidebar (0,2,1) aunque
   este sea posterior — !important con mayor specificity siempre gana,
   sin importar el orden. Igualamos specificity para no perder el empate. ── */
@media (max-width: 768px) {
  html.demo-light .sidebar,
  html.demo-sidebar .sidebar,
  html.demo-light.demo-sidebar .sidebar {
    background: linear-gradient(165deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    border-right: none !important;
    border-left: 1px solid rgba(255,255,255,0.14) !important;
  }
  html.demo-light .sidebar .sidebar-logo-full,
  html.demo-sidebar .sidebar .sidebar-logo-full { filter: brightness(0) invert(1) !important; }
  html.demo-light .sidebar .sidebar-logo-text,
  html.demo-sidebar .sidebar .sidebar-logo-text { color: rgba(255,255,255,0.7) !important; }
  html.demo-light .sidebar #user-name,
  html.sb-ink.demo-sidebar .sidebar h2, html.demo-sidebar .sidebar h2,
  html.sb-ink.demo-sidebar .sidebar #user-name, html.demo-sidebar .sidebar #user-name { color: #ffffff !important; }
  html.demo-light .sidebar #user-role,
  html.demo-sidebar .sidebar #user-role { color: rgba(255,255,255,0.65) !important; }
  html.demo-light .sidebar .nav-section-label,
  html.sb-ink.demo-sidebar .sidebar .nav-section-label, html.demo-sidebar .sidebar .nav-section-label { color: rgba(255,255,255,0.5) !important; }
  html.demo-light .sidebar .nav-link,
  html.demo-light .sidebar .nav-link .nav-icon svg,
  html.sb-ink.demo-sidebar .sidebar .nav-link, html.sb-ink.demo-sidebar .sidebar .nav-link .nav-icon svg,
  html.demo-sidebar .sidebar .nav-link, html.demo-sidebar .sidebar .nav-link .nav-icon svg { color: rgba(255,255,255,0.82) !important; }
  html.demo-light .sidebar .nav-link:hover,
  html.demo-sidebar .sidebar .nav-link:hover {
    background: rgba(255,255,255,0.12) !important; color: #ffffff !important;
  }
  html.demo-light .sidebar .nav-link:hover .nav-icon svg,
  html.demo-sidebar .sidebar .nav-link:hover .nav-icon svg { color: #ffffff !important; }
  html.demo-light .sidebar .nav-link.active,
  html.demo-light .sidebar .nav-link.active .nav-icon svg,
  html.sb-ink.demo-sidebar .sidebar .nav-link.active, html.sb-ink.demo-sidebar .sidebar .nav-link.active .nav-icon svg,
  html.demo-sidebar .sidebar .nav-link.active, html.demo-sidebar .sidebar .nav-link.active .nav-icon svg {
    background: rgba(255,255,255,0.2) !important; color: #ffffff !important;
  }
  html.demo-light .sidebar .user-card,
  html.sb-ink.demo-sidebar .sidebar .user-card, html.demo-sidebar .sidebar .user-card {
    background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.18) !important;
  }
  html.demo-light .sidebar .user-avatar,
  html.demo-sidebar .sidebar .user-avatar { background: rgba(255,255,255,0.22) !important; color: #fff !important; }
  html.demo-light .sidebar .logout-btn,
  html.sb-ink.demo-sidebar .sidebar .logout-btn, html.demo-sidebar .sidebar .logout-btn { color: rgba(255,255,255,0.75) !important; }
  html.demo-light .sidebar .logout-btn:hover,
  html.sb-ink.demo-sidebar .sidebar .logout-btn:hover, html.demo-sidebar .sidebar .logout-btn:hover {
    background: rgba(255,255,255,0.14) !important; color: #ffffff !important;
  }
}