/* =====================================================
   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: naranja terracota estilo Claude/Anthropic, monocromático */
  --brand-primary:    #d97757;      /* terracota Claude */
  --brand-secondary:  #c15f3c;      /* terracota oscuro */
  --brand-accent:     #e9a48a;      /* terracota claro */
  --brand-on:         #1a0f0a;      /* texto sobre primary */
  --brand-tint-2:     rgba(217,119,87,0.02);
  --brand-tint-6:     rgba(217,119,87,0.06);
  --brand-tint-12:    rgba(217,119,87,0.12);
  --brand-tint-25:    rgba(217,119,87,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(217,119,87,0.12)) !important;
  --primary-xlight:   var(--brand-tint-6, rgba(217,119,87,0.06)) !important;
  --accent:           var(--brand-accent) !important;
  --accent-dim:       var(--brand-tint-25, rgba(217,119,87,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(217,119,87,0.10)) !important;
  --info-border:      var(--brand-tint-25, rgba(217,119,87,0.25)) !important;
  --success:          var(--brand-primary) !important;
  --success-light:    var(--brand-tint-12, rgba(217,119,87,0.10)) !important;
  --success-border:   var(--brand-tint-25, rgba(217,119,87,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-text h2 { color: var(--text) !important; letter-spacing: .04em; }
.sidebar-logo-text p  { 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;
}
/* 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;
}

/* ── 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 {
  --bg-0:  #f4f4f9 !important;   /* body */
  --bg-1:  #ffffff !important;   /* sidebar / panels */
  --bg-2:  #ffffff !important;   /* cards */
  --bg-3:  #ebebf2 !important;   /* hover / sticky header */
  --glass:     rgba(20,20,40,0.035) !important;
  --glass-hi:  rgba(20,20,40,0.06)  !important;
  --stroke:    rgba(20,20,40,0.10)  !important;
  --stroke-hi: rgba(20,20,40,0.16)  !important;
  --text:   #1b1b2b !important;
  --text-2: #3c3c50 !important;
  --text-3: #6a6a80 !important;
  --text-4: #9595aa !important;

  --bg:             #f4f4f9 !important;
  --card-bg:        #ffffff !important;
  --sidebar-bg:     #ffffff !important;
  --sidebar-hover:  rgba(20,20,40,0.04) !important;
  --sidebar-active: var(--brand-tint-12) !important;
  --text-primary:   #1b1b2b !important;
  --text-secondary: #3c3c50 !important;
  --text-muted:     #6a6a80 !important;
  --text-hint:      #9595aa !important;
  --border:         rgba(20,20,40,0.10) !important;
  --border-light:   rgba(20,20,40,0.06) !important;

  --shadow-1: 0 1px 2px rgba(20,20,40,0.05), 0 8px 24px rgba(20,20,40,0.07) !important;
  --shadow-2: 0 2px 4px rgba(20,20,40,0.06), 0 14px 40px rgba(20,20,40,0.10) !important;
}
/* Fondo claro + quita el ruido/halos oscuros */
html.demo-light, html.demo-light body { background: #eef0f7 !important; color: var(--text) !important; }
html.demo-light body::before {
  background-image:
    radial-gradient(ellipse 75% 55% at 12% -10%, var(--brand-tint-12) 0%, transparent 58%),
    radial-gradient(ellipse 60% 48% at 88% 112%, var(--brand-tint-12) 0%, transparent 58%),
    radial-gradient(ellipse 42% 36% at 55% 45%, rgba(255,255,255,0.5) 0%, transparent 70%) !important;
}
html.demo-light body::after { opacity: 0 !important; }

/* Sidebar / topbar claros */
html.demo-light .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(250,250,253,0.6) 100%) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border-right: 1px solid rgba(255,255,255,0.7) !important;
}
html.demo-light .topbar, html.demo-light header.topbar {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.7) !important;
}

/* Cards: liquid glass claro — blanco translúcido + blur, borde casi invisible */
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: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 6px rgba(30,30,60,0.045),
    0 10px 32px rgba(30,30,60,0.07) !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: var(--brand-tint-25) !important;
  box-shadow: 0 2px 4px rgba(20,20,40,0.06), 0 10px 28px rgba(20,20,40,0.10) !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;
}

/* Modales / popups en claro (el dark de arriba los forzaba a oscuro) */
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: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.78) 100%) !important;
  backdrop-filter: blur(26px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 64px rgba(20,20,40,0.16) !important;
}
html.demo-light .modal-overlay, html.demo-light .overlay {
  background: rgba(25,25,45,0.35) !important;
}
html.demo-light .modal-header, html.demo-light .modal-footer {
  background: #fafafd !important;
  border-color: var(--border-light) !important;
}
html.demo-light .modal-title { color: var(--text) !important; }
html.demo-light .modal-close { background: #f1f1f8 !important; color: var(--text-3) !important; }
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 con el COLOR PRINCIPAL de la marca (demos). Se activa con
   html.demo-sidebar. Texto/íconos en blanco; el logo del cliente sobre un
   chip claro para que siempre se vea. Va DESPUÉS de demo-light → gana sobre el
   sidebar claro cuando ambos aplican.
   ═══════════════════════════════════════════════════════════════════════════ */
html.demo-sidebar .sidebar, html.demo-light.demo-sidebar .sidebar {
  /* --sidebar-brand-bg permite elegir SÓLIDO o GRADIENT al lanzar la demo */
  background: var(--sidebar-brand-bg, linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%)) !important;
  border-right: none !important;
  box-shadow: 2px 0 24px rgba(0,0,0,0.14) !important;
}
/* Logo del cliente con PRIORIDAD: más grande en demos brandeadas */
html.demo-sidebar .sidebar .logo-circle-sm { width: 56px !important; height: 56px !important; }
html.demo-sidebar .sidebar .sidebar-logo { padding: 16px 12px !important; gap: 11px !important; }

/* ── Contraste automático: sidebar CLARO (ej. blanco sólido) → tinta oscura.
   La clase html.sb-ink la pone el boot/brand-loader según la luminancia del
   color elegido. Va DESPUÉS de las reglas blancas para ganarles. ─────────── */
html.sb-ink.demo-sidebar .sidebar { box-shadow: 2px 0 24px rgba(30,30,50,0.10) !important; border-right: 1px solid rgba(20,20,40,0.08) !important; }
html.sb-ink.demo-sidebar .sidebar h2,
html.sb-ink.demo-sidebar .sidebar #user-name { color: #1d1d2b !important; }
html.sb-ink.demo-sidebar .sidebar .sidebar-logo-text p { color: rgba(20,20,40,0.55) !important; }
html.sb-ink.demo-sidebar .sidebar .nav-link,
html.sb-ink.demo-sidebar .sidebar .nav-link .nav-icon svg { color: rgba(20,20,40,0.66) !important; }
html.sb-ink.demo-sidebar .sidebar .nav-link:hover { background: rgba(20,20,40,0.06) !important; color: #1d1d2b !important; }
html.sb-ink.demo-sidebar .sidebar .nav-link.active,
html.sb-ink.demo-sidebar .sidebar .nav-link.active .nav-icon svg {
  background: var(--brand-tint-12, rgba(20,20,40,0.08)) !important; color: var(--brand-primary, #1d1d2b) !important;
}
html.sb-ink.demo-sidebar .sidebar .nav-link.active { color: var(--brand-primary, #1d1d2b) !important; }
html.sb-ink.demo-sidebar .sidebar .nav-section-label { color: rgba(20,20,40,0.4) !important; }
html.sb-ink.demo-sidebar .sidebar #user-role { color: rgba(20,20,40,0.5) !important; }
html.sb-ink.demo-sidebar .sidebar .user-card { background: rgba(20,20,40,0.05) !important; border-color: rgba(20,20,40,0.09) !important; }
html.sb-ink.demo-sidebar .sidebar .logout-btn { color: rgba(20,20,40,0.6) !important; }
html.sb-ink.demo-sidebar .sidebar .logout-btn:hover { color: #1d1d2b !important; background: rgba(20,20,40,0.07) !important; }
html.sb-ink.demo-sidebar .sidebar .sidebar-collapse-btn {
  background: rgba(20,20,40,0.05) !important; border-color: rgba(20,20,40,0.10) !important; color: rgba(20,20,40,0.6) !important;
}
html.demo-sidebar .sidebar h2,
html.demo-sidebar .sidebar #user-name { color: #ffffff !important; }
html.demo-sidebar .sidebar .sidebar-logo-text p { color: rgba(255,255,255,0.78) !important; }
html.demo-sidebar .sidebar .nav-link,
html.demo-sidebar .sidebar .nav-link .nav-icon svg { color: rgba(255,255,255,0.85) !important; }
html.demo-sidebar .sidebar .nav-link:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; }
html.demo-sidebar .sidebar .nav-link.active,
html.demo-sidebar .sidebar .nav-link.active .nav-icon svg { background: rgba(255,255,255,0.20) !important; color: #ffffff !important; }
html.demo-sidebar .sidebar .nav-link.active { color: #ffffff !important; }
html.demo-sidebar .sidebar .nav-section-label { color: rgba(255,255,255,0.6) !important; }
html.demo-sidebar .sidebar #user-role { color: rgba(255,255,255,0.72) !important; }
html.demo-sidebar .sidebar .user-card { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.15) !important; }
html.demo-sidebar .sidebar .logout-btn { color: rgba(255,255,255,0.85) !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;
}