@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Paleta Clara ── */
  --bg:        #f0f4f8;
  --bg2:       #ffffff;
  --bg3:       #f8fafc;
  --border:    #e2e8f0;
  --border2:   #cbd5e1;

  /* Colores principales — Azul eléctrico */
  --accent:    #3b82f6;
  --accent2:   #2563eb;
  --accent-lt: #eff6ff;

  --green:     #16a34a;
  --green-lt:  #dcfce7;
  --red:       #dc2626;
  --red-lt:    #fee2e2;
  --yellow:    #d97706;
  --yellow-lt: #fef3c7;
  --purple:    #7c3aed;
  --purple-lt: #ede9fe;
  --blue:      #2563eb;
  --blue-lt:   #dbeafe;
  --cyan:      #0891b2;
  --cyan-lt:   #cffafe;

  /* Texto */
  --text:      #0f172a;
  --text1:     #0f172a;
  --text2:     #334155;
  --text3:     #64748b;
  --text4:     #94a3b8;

  --card:      #ffffff;
  --sidebar-w: 256px;
  --radius:    12px;
  --shadow:    0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.1);
  --shadow-blue: 0 4px 14px rgba(59,130,246,.35);
}

/* ════════════════════════════════
   TEMA OSCURO
════════════════════════════════ */
html.theme-dark {
  --card:      #1e293b;
  --bg:        #0f172a;
  --bg2:       #1e293b;
  --bg3:       #111827;
  --border:    #334155;
  --border2:   #475569;
  --accent-lt: rgba(59,130,246,.15);
  --green-lt:  rgba(22,163,74,.15);
  --red-lt:    rgba(220,38,38,.15);
  --yellow-lt: rgba(217,119,6,.15);
  --purple-lt: rgba(124,58,237,.15);
  --blue-lt:   rgba(37,99,235,.15);
  --cyan-lt:   rgba(8,145,178,.15);
  --text:      #f1f5f9;
  --text1:     #f8fafc;
  --text2:     #cbd5e1;
  --text3:     #94a3b8;
  --text4:     #64748b;
  --shadow:    0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.4);
  color-scheme: dark;
}
html.theme-dark body { background: var(--bg); color: var(--text); }

/* ════════════════════════════════
   SUPRESIÓN DE TRANSICIONES al cambiar tema
   (se aplica solo durante el toggle, se remueve tras 1 frame)
════════════════════════════════ */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation-duration: 0.001ms !important;
}

/* ── Sidebar oscuro ── */
html.theme-dark .sidebar {
  background: #0f1929 !important;
  border-right-color: #1e2d42 !important;
}
html.theme-dark .sidebar-logo {
  background: linear-gradient(135deg, #0c1a2e 0%, #1a3a6b 50%, #1d4ed8 100%) !important;
  border-bottom-color: #1e2d42 !important;
}
html.theme-dark .sidebar-logo h1 { color: #f8fafc !important; }
html.theme-dark .sidebar-logo span { color: rgba(255,255,255,.5) !important; }
html.theme-dark .sidebar-user {
  background: #0c1624 !important;
  border-top-color: #1e2d42 !important;
}
html.theme-dark .nav-link { color: #94a3b8 !important; border-left-color: transparent !important; }
html.theme-dark .nav-link:hover { background: rgba(59,130,246,.1) !important; color: #93c5fd !important; border-left-color: #60a5fa !important; }
html.theme-dark .nav-link.active { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.05)) !important; color: #60a5fa !important; border-left-color: #3b82f6 !important; }
html.theme-dark .nav-section { color: #475569 !important; }

/* ── Topbar oscuro ── */
html.theme-dark .topbar {
  background: rgba(15,23,42,.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: #334155 !important;
}
html.theme-dark .topbar-title {
  background: linear-gradient(135deg, #f1f5f9, #94a3b8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Cards oscuro ── */
html.theme-dark .card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html.theme-dark .card-title { border-bottom-color: #334155 !important; }

/* ── Stat cards oscuro ── */
html.theme-dark .stat-card { border-color: #334155 !important; }
html.theme-dark .stat-card.blue   { background: linear-gradient(135deg, #1e293b 55%, rgba(59,130,246,.18) 100%) !important; }
html.theme-dark .stat-card.green  { background: linear-gradient(135deg, #1e293b 55%, rgba(22,163,74,.15)  100%) !important; }
html.theme-dark .stat-card.yellow { background: linear-gradient(135deg, #1e293b 55%, rgba(217,119,6,.15)  100%) !important; }
html.theme-dark .stat-card.purple { background: linear-gradient(135deg, #1e293b 55%, rgba(124,58,237,.15) 100%) !important; }

/* ── Detail header oscuro ── */
html.theme-dark .detail-header {
  background: linear-gradient(135deg, #1e293b 0%, #1a2744 100%) !important;
  border-color: rgba(59,130,246,.2) !important;
}

/* ── Tables oscuro ── */
html.theme-dark table thead tr {
  background: linear-gradient(90deg, #1e293b, #1a2744) !important;
}
html.theme-dark table thead th {
  background: transparent !important;
  color: #94a3b8 !important;
  border-bottom-color: #334155 !important;
}
html.theme-dark table tbody tr:hover td { background: rgba(59,130,246,.07) !important; }
html.theme-dark td { border-bottom-color: #334155 !important; }
html.theme-dark tr:hover td:first-child { border-left-color: var(--accent) !important; }

/* ── Forms oscuro ── */
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background: #162032 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus {
  background: #1e293b !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: #475569 !important; }
html.theme-dark .search-input {
  background: #162032 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* ── Buttons oscuro ── */
html.theme-dark .btn-secondary {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
}
html.theme-dark .btn-secondary:hover {
  background: #253347 !important;
  border-color: #64748b !important;
}
html.theme-dark .btn-danger {
  background: linear-gradient(135deg, rgba(220,38,38,.15), rgba(239,68,68,.1)) !important;
  border-color: rgba(220,38,38,.35) !important;
}
html.theme-dark .btn-danger:hover {
  background: linear-gradient(135deg, rgba(220,38,38,.25), rgba(239,68,68,.18)) !important;
}

/* ── Badges oscuro ── */
html.theme-dark .badge-gray { background: #334155 !important; color: #94a3b8 !important; }

/* ── Kanban oscuro ── */
html.theme-dark .kanban-col { background: #162032 !important; border-color: #334155 !important; }
html.theme-dark .kanban-card { background: #1e293b !important; border-color: #334155 !important; }

/* ── Flash oscuro ── */
html.theme-dark .flash-success {
  background: linear-gradient(90deg, rgba(22,163,74,.15), rgba(74,222,128,.08)) !important;
  border-color: rgba(74,222,128,.3) !important;
  color: #4ade80 !important;
}
html.theme-dark .flash-error {
  background: linear-gradient(90deg, rgba(220,38,38,.15), rgba(239,68,68,.08)) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #f87171 !important;
}

/* ── Action buttons oscuro ── */
html.theme-dark .action-btn {
  background: #162032 !important;
  border-color: color-mix(in srgb, var(--c, #4f46e5) 25%, #334155) !important;
}
html.theme-dark .action-btn:hover { background: #1e293b !important; }
html.theme-dark .action-btn .action-icon {
  /* Mezcla el color del botón con el fondo oscuro en vez de blanco */
  background: color-mix(in srgb, var(--c, #4f46e5) 18%, #1e293b) !important;
}

/* ── Glass / utility ── */
html.theme-dark .glass {
  background: rgba(15,23,42,.85) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Modales oscuro ── */
html.theme-dark .action-modal { background: #1e293b !important; }

/* ── Scrollbar oscuro ── */
html.theme-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #475569, #334155) !important;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }

/* ════════════════════════════════
   LAYOUT
════════════════════════════════ */
.layout { display:flex; min-height:100vh; }

/* ════════════════════════════════
   SIDEBAR
════════════════════════════════ */
/* ════════════════════════════════
   SIDEBAR — Diseño profesional claro
════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background:#ffffff;
  border-right:1px solid #e8edf3;
  display:flex; flex-direction:column;
  position:fixed; height:100vh;
  z-index:100; overflow-y:auto;
  box-shadow:1px 0 20px rgba(0,0,0,.05);
}

.sidebar-logo {
  padding:22px 20px 18px;
  border-bottom:1px solid #f0f4f8;
  background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#3b82f6 100%);
  text-align:left;
}
.sidebar-logo h1 {
  font-size:15px; font-weight:800;
  letter-spacing:3.5px;
  color:#ffffff;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
}
.sidebar-logo span {
  font-size:9px; color:rgba(255,255,255,.65);
  letter-spacing:1.2px; display:block; margin-top:2px;
}
.sidebar-logo-badge {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:10px; padding:3px 10px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  font-size:10px; font-weight:600; color:rgba(255,255,255,.9);
}

.sidebar-nav { padding:8px 0; flex:1; }

.nav-section {
  padding:16px 20px 5px;
  font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.8px;
  color:#94a3b8;
}

.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px 8px 20px;
  color:#64748b;
  font-size:13px; font-weight:500;
  transition:all .15s ease;
  border-radius:0; margin:1px 0;
  border-left:3px solid transparent;
  position:relative;
}
.nav-link:hover {
  color:#1e40af;
  background:#f0f7ff;
  border-left-color:#93c5fd;
}
.nav-link.active {
  color:#1d4ed8;
  background:linear-gradient(90deg,#eff6ff,#f8faff);
  border-left-color:#3b82f6;
  font-weight:600;
}
.nav-link .icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; }

.sidebar-user {
  padding:14px 18px;
  border-top:1px solid #f1f5f9;
  display:flex; align-items:center; gap:10px;
  background:#fafbfc;
}
.user-avatar {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; flex-shrink:0;
  box-shadow:0 2px 8px rgba(59,130,246,.3);
}
.user-info { flex:1; min-width:0; }
.user-info .name { font-size:13px; font-weight:600; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-info .role {
  font-size:10px; color:#64748b;
  text-transform:uppercase; letter-spacing:.6px; font-weight:600;
}
.sidebar-user a { color:#94a3b8; font-size:16px; transition:color .15s; }
.sidebar-user a:hover { color:#ef4444; }

/* ════════════════════════════════
   MAIN / TOPBAR
════════════════════════════════ */
.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

.topbar {
  height:62px; background:#ffffff;
  border-bottom:1px solid #e8edf3;
  display:flex; align-items:center;
  padding:0 28px; gap:16px;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 12px rgba(0,0,0,.04);
}
.topbar-title {
  font-size:16px; font-weight:700; flex:1; color:#0f172a;
  display:flex; align-items:center; gap:10px;
}
.topbar-actions { display:flex; gap:8px; align-items:center; }

/* ════════════════════════════════
   CONTENT
════════════════════════════════ */
.content { padding:28px; flex:1; }

/* ════════════════════════════════
   CARDS
════════════════════════════════ */
.card {
  background:#ffffff;
  border:1px solid #e8edf3;
  border-radius:14px;
  padding:22px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  transition:box-shadow .2s, transform .2s;
}
.card:hover { box-shadow:0 6px 24px rgba(0,0,0,.07); }
.card-title {
  font-size:13px; font-weight:700; color:#0f172a;
  margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
  padding-bottom:14px;
  border-bottom:1px solid #f1f5f9;
  letter-spacing:.1px;
}

/* ════════════════════════════════
   STAT CARDS — rediseñadas
════════════════════════════════ */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:24px;
}
.stat-card {
  background:#ffffff;
  border:1px solid #e8edf3;
  border-radius:14px;
  padding:22px 24px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  transition:all .2s ease;
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:14px 14px 0 0;
}
.stat-card.blue::before  { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.stat-card.green::before { background:linear-gradient(90deg,#16a34a,#4ade80); }
.stat-card.yellow::before{ background:linear-gradient(90deg,#d97706,#fbbf24); }
.stat-card.purple::before{ background:linear-gradient(90deg,#7c3aed,#c084fc); }

.stat-card:hover {
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  transform:translateY(-3px);
  border-color:#d1dff8;
}

.stat-top { display:flex; align-items:center; justify-content:space-between; }
.stat-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; flex-shrink:0;
}
.stat-card.blue   .stat-icon { background:#eff6ff; }
.stat-card.green  .stat-icon { background:#f0fdf4; }
.stat-card.yellow .stat-icon { background:#fffbeb; }
.stat-card.purple .stat-icon { background:#faf5ff; }

.stat-trend {
  font-size:11px; font-weight:700; padding:3px 9px;
  border-radius:20px; letter-spacing:.3px;
}
.trend-up   { background:#f0fdf4; color:#16a34a; }
.trend-down { background:#fef2f2; color:#dc2626; }
.trend-neu  { background:#f8fafc; color:#64748b; }

.stat-value {
  font-size:32px; font-weight:800;
  font-family:'DM Mono',monospace; line-height:1;
  color:#0f172a;
  letter-spacing:-1px;
}
.stat-label { font-size:12px; color:#64748b; font-weight:500; margin-top:-4px; }

/* ════════════════════════════════
   GRIDS
════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.grid-3 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }

/* ════════════════════════════════
   TABLES
════════════════════════════════ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th {
  text-align:left; padding:10px 14px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px;
  color:var(--text3); background:var(--bg3);
  border-bottom:1px solid var(--border);
}
th:first-child { border-radius:8px 0 0 0; }
th:last-child  { border-radius:0 8px 0 0; }
td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:middle;
  font-size:13px;
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg3); }

/* ════════════════════════════════
   BADGES
════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.2px;
}
.badge-blue   { background:var(--blue-lt);   color:var(--blue);   }
.badge-green  { background:var(--green-lt);  color:var(--green);  }
.badge-red    { background:var(--red-lt);    color:var(--red);    }
.badge-yellow { background:var(--yellow-lt); color:var(--yellow); }
.badge-purple { background:var(--purple-lt); color:var(--purple); }
.badge-gray   { background:#f1f5f9;          color:var(--text3);  }

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:8px;
  font-size:13px; font-weight:600;
  border:none; cursor:pointer; transition:all .15s;
  font-family:'Inter',sans-serif;
}
.btn-primary {
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:white;
  box-shadow:0 2px 10px rgba(59,130,246,.35);
}
.btn-primary:hover {
  background:linear-gradient(135deg,#2563eb,#1e40af);
  box-shadow:0 4px 18px rgba(59,130,246,.45);
  transform:translateY(-1px);
}
.btn-secondary {
  background:white; color:var(--text2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.btn-secondary:hover { background:var(--bg3); border-color:var(--border2); }
.btn-danger { background:var(--red-lt); color:var(--red); border:1px solid #fca5a5; }
.btn-danger:hover { background:#fee2e2; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-icon { padding:7px; }

/* ════════════════════════════════
   FORMS
════════════════════════════════ */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
label { font-size:12px; font-weight:600; color:var(--text2); }
input, select, textarea {
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:8px; padding:9px 12px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:13px;
  transition:border-color .15s, box-shadow .15s; outline:none; width:100%;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
  background:white;
}
textarea { resize:vertical; min-height:90px; }

/* ════════════════════════════════
   SEARCH BAR
════════════════════════════════ */
.search-bar {
  display:flex; gap:10px; align-items:center;
  margin-bottom:20px; flex-wrap:wrap;
}
.search-input {
  flex:1; min-width:200px; max-width:320px;
  padding:9px 14px;
  background:white; border:1.5px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none;
  box-shadow:var(--shadow);
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.12); }

/* ════════════════════════════════
   FLASH
════════════════════════════════ */
.flash { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px; font-weight:500; }
.flash-success { background:var(--green-lt); border:1px solid #86efac; color:var(--green); }
.flash-error   { background:var(--red-lt);   border:1px solid #fca5a5; color:var(--red);   }

/* ════════════════════════════════
   EMPTY STATE
════════════════════════════════ */
.empty { text-align:center; padding:50px 20px; color:var(--text4); }
.empty .icon { font-size:44px; margin-bottom:12px; opacity:.5; }
.empty p { font-size:13px; }

/* ════════════════════════════════
   DETAIL HEADER
════════════════════════════════ */
.detail-header {
  display:flex; align-items:flex-start;
  gap:20px; margin-bottom:24px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow);
}
.detail-avatar {
  width:58px; height:58px; border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; flex-shrink:0;
}
.detail-info h2 { font-size:20px; font-weight:700; }
.detail-info p  { font-size:13px; color:var(--text2); margin-top:2px; }
.detail-meta { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.detail-meta span { font-size:12px; color:var(--text3); display:flex; align-items:center; gap:4px; }

/* ════════════════════════════════
   PIPELINE / KANBAN
════════════════════════════════ */
.etapa-bar { display:flex; gap:0; border-radius:6px; overflow:hidden; height:8px; margin:8px 0; }
.etapa-seg { flex:1; }
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; }
.kanban-col {
  min-width:200px; background:var(--bg3);
  border-radius:var(--radius); border:1px solid var(--border);
  padding:14px; flex-shrink:0;
}
.kanban-col h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; color:var(--text2); }
.kanban-card {
  background:white; border:1px solid var(--border);
  border-radius:8px; padding:12px; margin-bottom:8px;
  box-shadow:var(--shadow);
}
.kanban-card .title { font-size:13px; font-weight:600; margin-bottom:4px; }
.kanban-card .sub   { font-size:11px; color:var(--text3); }
.kanban-card .valor { font-size:13px; color:var(--green); font-family:'DM Mono',monospace; font-weight:600; margin-top:6px; }

/* ════════════════════════════════
   MINI CHART
════════════════════════════════ */
.mini-chart { display:flex; align-items:flex-end; gap:4px; height:60px; }
.mini-bar {
  flex:1; background:var(--accent);
  border-radius:4px 4px 0 0; opacity:.7;
  transition:opacity .2s, transform .2s;
}
.mini-bar:hover { opacity:1; transform:scaleY(1.05); }

/* ════════════════════════════════
   SCROLLBAR
════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text4); }

/* ════════════════════════════════
   KEYFRAMES spin (sidebar logo)
════════════════════════════════ */
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════
   CLOCK — al lado del usuario
════════════════════════════════ */
.sidebar-clock-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
#reloj-hora {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-lt);
  border: 1px solid rgba(59,130,246,.18);
  padding: 3px 9px;
  border-radius: 7px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  min-width: 74px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(59,130,246,.12);
}
.sidebar-clock-zone a {
  color: var(--text4);
  font-size: 15px;
  transition: color .15s, transform .15s;
  line-height: 1;
}
.sidebar-clock-zone a:hover {
  color: var(--red);
  transform: scale(1.15);
}

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pulseAccent {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}
.card, .stat-card {
  animation: fadeSlideIn .3s ease both;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width:900px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
}

/* ════════════════════════════════
   PREMIUM DESIGN v3
════════════════════════════════ */

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #fdfdff 0%, #f5f7fb 100%);
  border-right: 1px solid #e4e8f0;
}
.sidebar-logo {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 18px 16px 16px;
}
.sidebar-logo h1 {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #0f172a;
  font-size: 15px;
  letter-spacing: 4px;
}
.sidebar-logo span {
  color: #64748b;
  letter-spacing: 1px;
}
.nav-link {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  margin: 1px 8px;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity .15s;
}
.nav-link:hover { background: rgba(59,130,246,.06); color: var(--accent); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(59,130,246,.1), rgba(59,130,246,.03));
  color: var(--accent);
  font-weight: 700;
}
.nav-link.active::before { opacity: 1; }
.sidebar-user {
  background: linear-gradient(90deg, #f0f4ff, #f5f7fb);
  border-top: 1px solid #e4e8f0;
}

/* ── Cards con borde superior de color ── */
.card-accent-blue  { border-top: 3px solid var(--accent); }
.card-accent-green { border-top: 3px solid var(--green);  }
.card-accent-red   { border-top: 3px solid var(--red);    }
.card-accent-yellow{ border-top: 3px solid var(--yellow); }
.card-accent-purple{ border-top: 3px solid var(--purple); }
.card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.04);
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.05);
  transform: translateY(-1px);
  transition: all .2s ease;
}
.card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.1px;
}

/* ── Topbar ── */
.topbar {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
.topbar-title {
  font-weight: 800;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, var(--text), var(--text2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stat cards ── */
.stat-card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
}
.stat-card.blue  { background: linear-gradient(135deg, #ffffff 55%, #eef2ff 100%); }
.stat-card.green { background: linear-gradient(135deg, #ffffff 55%, #dcfce7 100%); }
.stat-card.yellow{ background: linear-gradient(135deg, #ffffff 55%, #fef3c7 100%); }
.stat-card.purple{ background: linear-gradient(135deg, #ffffff 55%, #ede9fe 100%); }
.stat-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.stat-value { letter-spacing: -1.5px; }

/* ── Tables ── */
thead tr {
  background: linear-gradient(90deg, #f5f7fb, #edf0f7);
}
th { font-size: 10.5px; letter-spacing: .8px; }
tr:hover td {
  background: linear-gradient(90deg, rgba(59,130,246,.04), transparent);
}
tr:hover td:first-child { border-left: 2px solid var(--accent); }
td { transition: background .12s; }

/* ── Forms ── */
input, select, textarea {
  background: #fefefe;
  border: 1.5px solid #e2e8f0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 1px 4px rgba(59,130,246,.08);
}
label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text2);
}

/* ── Buttons ── */
.btn {
  letter-spacing: .15px;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  transition: all .15s ease;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.btn:active { transform: scale(.98); }
.btn:active::after { opacity: .12; }
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 2px 8px rgba(59,130,246,.35), 0 1px 3px rgba(59,130,246,.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
  box-shadow: 0 4px 16px rgba(59,130,246,.45), 0 2px 6px rgba(59,130,246,.25);
  transform: translateY(-1px);
}
.btn-secondary {
  background: white;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.btn-secondary:hover {
  background: #f8fafc;
  border-color: #c7d0e2;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.btn-danger {
  background: linear-gradient(135deg, #fff1f1, #ffe4e4);
  border: 1.5px solid #fca5a5;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  box-shadow: 0 2px 8px rgba(220,38,38,.15);
}

/* ── Badges ── */
.badge {
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  letter-spacing: .3px;
  font-size: 10.5px;
}

/* ── Flash messages ── */
.flash {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.flash-success {
  background: linear-gradient(90deg, #f0fdf4, #dcfce7);
  border: 1px solid #86efac;
  color: #15803d;
}
.flash-error {
  background: linear-gradient(90deg, #fff1f2, #fee2e2);
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

/* ── Detail header ── */
.detail-header {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 100%);
  border: 1px solid rgba(59,130,246,.1);
  box-shadow: 0 2px 16px rgba(59,130,246,.06);
}
.detail-avatar {
  box-shadow: 0 4px 20px rgba(59,130,246,.3);
}

/* ── Empty state ── */
.empty { opacity: .7; }
.empty .icon { opacity: .6; font-size: 48px; }

/* ── Kanban ── */
.kanban-card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
}
.kanban-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

/* ── Scrollbar premium ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c7d2fe, #a5b4fc);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Utility classes ── */
.glass {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.5);
}
.shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.shadow-md  { box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); }
.shadow-lg  { box-shadow: 0 10px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06); }
.rounded-xl { border-radius: 16px; }
.rounded-2xl{ border-radius: 20px; }
.text-gradient {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 16px 0;
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulseAccent 2s infinite;
}

/* Acción botones (cliente_detalle) */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cl, #f8fafc);
  border: 1.5px solid color-mix(in srgb, var(--c, #4f46e5) 20%, transparent);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
  text-align: left;
  min-width: 140px;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c, #4f46e5) 20%, transparent);
  border-color: var(--c, #4f46e5);
}
.action-btn .action-icon {
  font-size: 22px;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c, #4f46e5) 12%, white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.action-btn .action-name { font-size: 13px; font-weight: 700; color: var(--c, #4f46e5); }
.action-btn .action-sub  { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* Modales de acción */
.action-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg2);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 420px;
  max-width: 95vw;
  z-index: 1000;
  overflow: hidden;
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity:0; transform: translate(-50%,-46%); }
  to   { opacity:1; transform: translate(-50%,-50%); }
}
.modal-header {
  padding: 16px 20px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close {
  background: rgba(255,255,255,.2);
  border: none;
  color: white;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,.35); }
.modal-body { padding: 20px; }
.modal-body .form-group { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.modal-body label { font-size: 12px; font-weight: 600; color: var(--text2); }
.modal-body input,
.modal-body select,
.modal-body textarea { font-size: 13px; }

/* Toast mejorado */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  z-index: 9999;
  animation: toastIn .3s ease;
  border-left: 4px solid var(--accent);
}
@keyframes toastIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* IA Panel */
#ia-panel {
  animation: fadeSlideIn .25s ease;
}

/* Stagger en lista de cards */
.card:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3) { animation-delay: .10s; }
.card:nth-child(4) { animation-delay: .15s; }
.stat-card:nth-child(2) { animation-delay: .06s; }
.stat-card:nth-child(3) { animation-delay: .12s; }
.stat-card:nth-child(4) { animation-delay: .18s; }

/* Línea de carga arriba de la página */
@keyframes loadingBar {
  0%   { width: 0%;   left: 0; }
  50%  { width: 60%;  left: 20%; }
  100% { width: 0%;   left: 100%; }
}
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s;
}

/* Estilos de sección en formularios */
.form-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  margin-top: 6px;
}

/* Input con ícono */
.input-with-icon {
  position: relative;
}
.input-with-icon input {
  padding-left: 36px;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text4);
  font-size: 14px;
  pointer-events: none;
}

/* ════════════════════════════════
   BOTÓN TEMA CLARO/OSCURO
════════════════════════════════ */
#theme-toggle-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--text2);
  transition: all .18s;
  flex-shrink: 0;
}
#theme-toggle-btn:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
  transform: scale(1.08);
}
html.theme-dark #theme-toggle-btn {
  border-color: #475569;
  color: #cbd5e1;
}
html.theme-dark #theme-toggle-btn:hover {
  background: rgba(59,130,246,.18);
  border-color: var(--accent);
}

/* ════════════════════════════════
   MÓDULOS PANEL OSCURO
════════════════════════════════ */
html.theme-dark #modulesPanel,
html.theme-dark .modules-panel {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* ════════════════════════════════
   DROPDOWNS / SELECTS OSCURO (fixes para option)
════════════════════════════════ */
html.theme-dark option {
  background: #1e293b;
  color: #f1f5f9;
}

/* ════════════════════════════════
   ESTADO CONTACTO DROPDOWN OSCURO
════════════════════════════════ */
html.theme-dark .ec-select {
  background: #162032 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* ════════════════════════════════
   MODAL OVERLAY OSCURO
════════════════════════════════ */
html.theme-dark .modal-overlay,
html.theme-dark #modal-overlay {
  background: rgba(0,0,0,.65) !important;
}

/* ════════════════════════════════
   POPUP SOFTPHONE OSCURO
════════════════════════════════ */
html.theme-dark #popup-lead-info {
  background: linear-gradient(145deg, #1e293b, #162032) !important;
  border-color: #475569 !important;
}

/* ════════════════════════════════
   MOBILE RESPONSIVE — Task 8
   Breakpoint: ≤ 768px
════════════════════════════════ */

/* Hamburger button (hidden on desktop) */
#hamburger-btn {
  display: none;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  width: 36px; height: 36px;
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--text2);
  transition: background .15s;
  flex-shrink: 0;
}
#hamburger-btn:hover { background: var(--accent-lt); }

/* Sidebar overlay backdrop */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
}
#sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
  /* ── Show hamburger ── */
  #hamburger-btn { display: flex; }

  /* ── Sidebar: slide-in drawer ── */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transform: translateX(-110%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
    overflow-y: auto;
    width: var(--sidebar-w);
  }
  .sidebar.open { transform: translateX(0); }

  /* ── Main content: full width ── */
  .main {
    margin-left: 0 !important;
    padding: 12px !important;
  }

  /* ── Topbar: compact ── */
  .topbar {
    padding: 0 12px;
    height: 52px;
    gap: 8px;
  }
  .topbar-left { gap: 8px; }
  .topbar-brand { font-size: 14px; }
  .topbar-brand img { width: 26px; height: 26px; }

  /* Hide secondary topbar items on very small screens */
  .topbar-search { display: none; }

  /* ── KPI tiles: single column ── */
  .kpi-tiles,
  .grid-2,
  .stats-grid,
  .grid-3,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── Tables: horizontal scroll ── */
  .table-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 520px;
  }

  /* ── Cards: full width ── */
  .card, .stat-card, .kpi-card {
    border-radius: 10px;
    padding: 14px !important;
  }

  /* ── Stale leads section ── */
  #stale-section .stale-list-item {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Pipeline kanban: horizontal scroll ── */
  .kanban-board,
  .pipeline-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 8px;
  }
  .kanban-col { min-width: 220px; }

  /* ── Forms: full width inputs ── */
  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .form-group { width: 100% !important; }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  /* ── Buttons: touch-friendly ── */
  .btn, button[type="submit"] {
    min-height: 44px;
    font-size: 15px;
  }

  /* ── Call / WhatsApp action buttons ── */
  .call-btn, .wa-btn, .action-call, .action-wa {
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  }

  /* ── Modal: full screen on mobile ── */
  .modal-box, .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh !important;
    border-radius: 12px !important;
    overflow-y: auto;
  }

  /* ── CSV stepper: stack on mobile ── */
  .csv-stepper {
    gap: 6px;
    font-size: 12px;
  }
  .csv-stepper .step-label { display: none; }

  /* ── Reportes charts: full width ── */
  .chart-wrap canvas { max-width: 100%; }

  /* ── Page headers: smaller ── */
  .page-header h1, .section-title { font-size: 18px !important; }

  /* ── Tabs: scroll horizontally ── */
  .tabs-bar, .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* ── Topbar actions: tighter ── */
  .topbar-actions { gap: 6px; }
  .topbar-actions .notif-btn,
  .topbar-actions #stale-badge-wrap,
  .topbar-actions #theme-toggle-btn { flex-shrink: 0; }
}

/* ── Extra-small screens (≤ 400px) ── */
@media (max-width: 400px) {
  .main { padding: 8px !important; }
  .topbar { padding: 0 8px; height: 48px; }
  .kpi-tile .kpi-value { font-size: 22px; }
  .sidebar { width: 240px; }
}

/* Dark mode sidebar on mobile */
@media (max-width: 768px) {
  html.theme-dark .sidebar {
    box-shadow: 4px 0 32px rgba(0,0,0,.5);
  }
  html.theme-dark #sidebar-overlay {
    background: rgba(0,0,0,.6);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GLASS MORPHISM THEME v2 — B.R.I.S.A CRM
   CSS Custom Properties: cambiar html.theme-light actualiza TODO.
═══════════════════════════════════════════════════════════════════ */

/* ── VARIABLES MODO CLARO (default — sin clase) ── */
html {
  /* Fondo: blanco brillante puro — máximo contraste y limpieza */
  --g-body-bg: #ffffff;
  /* Orbes muy sutiles — casi invisibles sobre blanco puro */
  --g-orb1: rgba(59,130,246,.07); --g-orb2: rgba(139,92,246,.05);
  --g-orb3: rgba(37,99,235,.06);  --g-orb4: rgba(99,102,241,.04);
  /* Glass panels — casi sólidos sobre fondo blanco */
  --g-sidebar-bg: rgba(255,255,255,.97);
  --g-sidebar-border: rgba(226,232,240,.90);
  --g-sidebar-shadow: 2px 0 28px rgba(59,130,246,.08);
  --g-topbar-bg: rgba(255,255,255,.98);
  --g-topbar-border: rgba(226,232,240,.85);
  --g-topbar-title-bg: linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#3b82f6 100%);
  --g-card-bg: rgba(255,255,255,.95);
  --g-card-border: rgba(226,232,240,.80);
  --g-stat-bg: rgba(255,255,255,.95);
  --g-stat-border: rgba(226,232,240,.75);
  --g-input-bg: rgba(255,255,255,.98);
  --g-input-border: rgba(59,130,246,.22);
  --g-input-color: #0f172a;
  --g-input-placeholder: rgba(100,116,139,.50);
  --g-select-option-bg: #ffffff; --g-select-option-color: #0f172a;
  --g-kanban-col-bg: rgba(248,250,252,.90);
  --g-kanban-col-border: rgba(226,232,240,.70);
  --g-kanban-card-bg: rgba(255,255,255,.95);
  --g-kanban-card-border: rgba(226,232,240,.80);
  --g-modal-bg: rgba(255,255,255,.15);
  --g-modal-border: rgba(255,255,255,.35);
  /* Texto negro — máximo contraste sobre fondo blanco */
  --g-text-primary: #0f172a;
  --g-text-secondary: #1e293b;
  --g-text-muted: #475569;
  --g-nav-link: #3730a3;
  --g-nav-hover-bg: rgba(255,255,255,.55);
  --g-nav-hover-color: #312e81;
  --g-nav-active-bg: rgba(255,255,255,.68);
  --g-nav-active-color: #4338ca;
  --g-nav-active-shadow: 0 2px 8px rgba(0,0,0,.06);
  --g-logo-bg: linear-gradient(135deg,#4f46e5,#7c3aed,#db2777);
  --g-logo-border: rgba(0,0,0,.06);
  --g-th-color: #334155; --g-th-border: rgba(0,0,0,.07);
  --g-td-color: #0f172a; --g-td-border: rgba(0,0,0,.05);
  --g-tr-hover: rgba(0,0,0,.025);
  --g-thead-bg: rgba(0,0,0,.02);
  --g-label-color: #0f172a;
  --g-btn-sec-bg: rgba(255,255,255,.70);
  --g-btn-sec-color: #3730a3;
  --g-btn-sec-border: rgba(0,0,0,.10);
  --g-action-btn-bg: rgba(255,255,255,.65);
  --g-action-btn-border: rgba(0,0,0,.08);
  --g-flash-ok-bg: rgba(22,163,74,.10); --g-flash-ok-color: #15803d; --g-flash-ok-border: rgba(22,163,74,.28);
  --g-flash-err-bg: rgba(220,38,38,.08); --g-flash-err-color: #b91c1c; --g-flash-err-border: rgba(220,38,38,.28);
  --g-user-name: #0f172a; --g-user-role: #475569;
  --g-user-area-bg: rgba(0,0,0,.02); --g-user-area-border: rgba(0,0,0,.06);
  --g-detail-bg: rgba(255,255,255,.65); --g-detail-border: rgba(0,0,0,.07);
  --g-badge-gray-bg: rgba(0,0,0,.04); --g-badge-gray-color: #334155;
  --g-badge-gray-border: rgba(0,0,0,.08);
  /* Highlight interno glass */
  --g-inset-highlight: inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(0,0,0,.03);
  --g-inset-highlight-strong: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.04);
}

/* ── VARIABLES MODO OSCURO (clase theme-dark en <html>) ── */
html.theme-dark {
  --g-body-bg: linear-gradient(135deg,#0f0c29 0%,#141e30 40%,#1a1a2e 70%,#16213e 100%);
  --g-orb1: rgba(59,130,246,.65); --g-orb2: rgba(124,58,237,.55);
  --g-orb3: rgba(37,99,235,.50); --g-orb4: rgba(219,39,119,.45);
  --g-sidebar-bg: rgba(15,23,42,.55);
  --g-sidebar-border: rgba(255,255,255,.10);
  --g-sidebar-shadow: 4px 0 32px rgba(0,0,0,.35);
  --g-topbar-bg: rgba(15,23,42,.65);
  --g-topbar-border: rgba(255,255,255,.08);
  --g-topbar-title-bg: linear-gradient(135deg,#f1f5f9 30%,#94a3b8 100%);
  --g-card-bg: rgba(255,255,255,.07);
  --g-card-border: rgba(255,255,255,.12);
  --g-stat-bg: rgba(255,255,255,.07);
  --g-stat-border: rgba(255,255,255,.14);
  --g-input-bg: rgba(255,255,255,.08);
  --g-input-border: rgba(255,255,255,.15);
  --g-input-color: #f1f5f9;
  --g-input-placeholder: rgba(148,163,184,.5);
  --g-select-option-bg: #1e293b; --g-select-option-color: #f1f5f9;
  --g-kanban-col-bg: rgba(255,255,255,.06);
  --g-kanban-col-border: rgba(255,255,255,.10);
  --g-kanban-card-bg: rgba(255,255,255,.09);
  --g-kanban-card-border: rgba(255,255,255,.12);
  --g-modal-bg: rgba(15,23,42,.85);
  --g-modal-border: rgba(255,255,255,.12);
  --g-text-primary: #f1f5f9;
  --g-text-secondary: rgba(203,213,225,.85);
  --g-text-muted: rgba(148,163,184,.8);
  --g-nav-link: rgba(203,213,225,.75);
  --g-nav-hover-bg: rgba(59,130,246,.18);
  --g-nav-hover-color: #e0e7ff;
  --g-nav-active-bg: linear-gradient(135deg,rgba(59,130,246,.35),rgba(124,58,237,.25));
  --g-nav-active-color: #c7d2fe;
  --g-nav-active-shadow: 0 0 0 1px rgba(59,130,246,.4);
  --g-logo-bg: linear-gradient(135deg,#818cf8,#c084fc,#f472b6);
  --g-logo-border: rgba(255,255,255,.08);
  --g-th-color: rgba(148,163,184,.8); --g-th-border: rgba(255,255,255,.08);
  --g-td-color: rgba(203,213,225,.85); --g-td-border: rgba(255,255,255,.06);
  --g-tr-hover: rgba(59,130,246,.08);
  --g-thead-bg: rgba(255,255,255,.05);
  --g-label-color: rgba(203,213,225,.85);
  --g-btn-sec-bg: rgba(255,255,255,.10);
  --g-btn-sec-color: #e2e8f0;
  --g-btn-sec-border: rgba(255,255,255,.20);
  --g-action-btn-bg: rgba(255,255,255,.08);
  --g-action-btn-border: rgba(255,255,255,.15);
  --g-flash-ok-bg: rgba(22,163,74,.2); --g-flash-ok-color: #4ade80; --g-flash-ok-border: rgba(74,222,128,.35);
  --g-flash-err-bg: rgba(220,38,38,.2); --g-flash-err-color: #f87171; --g-flash-err-border: rgba(239,68,68,.35);
  --g-user-name: #e2e8f0; --g-user-role: rgba(148,163,184,.6);
  --g-user-area-bg: rgba(255,255,255,.05); --g-user-area-border: rgba(255,255,255,.08);
  --g-detail-bg: rgba(255,255,255,.07); --g-detail-border: rgba(255,255,255,.12);
  --g-badge-gray-bg: rgba(255,255,255,.1); --g-badge-gray-color: rgba(148,163,184,.9);
  --g-badge-gray-border: rgba(255,255,255,.15);
}

/* ── FONDO ANIMADO ── */
body {
  background: var(--g-body-bg) !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 600px 500px at 15% 20%,  var(--g-orb1) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 85% 80%,  var(--g-orb2) 0%, transparent 70%),
    radial-gradient(ellipse 400px 350px at 80% 15%,  var(--g-orb3) 0%, transparent 70%),
    radial-gradient(ellipse 350px 300px at 20% 85%,  var(--g-orb4) 0%, transparent 70%);
  animation: glassOrbes 18s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 300px 250px at 50% 50%, var(--g-orb3) 0%, transparent 60%),
    radial-gradient(ellipse 450px 300px at 70% 30%, var(--g-orb4) 0%, transparent 60%);
  animation: glassOrbes2 22s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes glassOrbes  {
  0%   { transform: translate(0,0)    scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.05); }
  66%  { transform: translate(-20px,30px) scale(.97); }
  100% { transform: translate(15px,10px)  scale(1.02); }
}
@keyframes glassOrbes2 {
  0%   { transform: translate(0,0)    scale(1); }
  50%  { transform: translate(-40px,20px) scale(1.08); }
  100% { transform: translate(20px,-30px) scale(.95); }
}
/* Canvas de partículas en z-index:1, por encima de los orbes (z-index:0).
   Todo el contenido va a z-index:2+ para quedar encima del canvas.
   Sidebar z-index:100 y topbar z-index:50 ya están bien. */
#bgCanvas { z-index: 1 !important; }
.content, .card, .stat-card, .flash, .detail-header,
.kanban-board, .main-content { position: relative; z-index: 2; }

/* ── SIDEBAR ── */
html .sidebar[class] {
  background: var(--g-sidebar-bg) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.02) !important;
  border-right: 1px solid var(--g-sidebar-border) !important;
  box-shadow: var(--g-sidebar-shadow) !important;
}
html .sidebar-logo[class] {
  background: transparent !important;
  border-bottom: 1px solid var(--g-logo-border) !important;
}
html .sidebar-logo[class] h1 {
  background: var(--g-logo-bg) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.nav-section { color: var(--g-text-muted) !important; }
html .nav-link[class] { color: var(--g-nav-link) !important; border-radius: 10px !important; }
html .nav-link[class]:hover {
  background: var(--g-nav-hover-bg) !important;
  color: var(--g-nav-hover-color) !important;
}
html .nav-link.active[class] {
  background: var(--g-nav-active-bg) !important;
  color: var(--g-nav-active-color) !important;
  box-shadow: var(--g-nav-active-shadow) !important;
}
html .sidebar-user[class] {
  background: var(--g-user-area-bg) !important;
  border-top: 1px solid var(--g-user-area-border) !important;
}
.user-info .name { color: var(--g-user-name) !important; }
.user-info .role { color: var(--g-user-role) !important; }

/* ── TOPBAR ── */
html .topbar[class] {
  background: var(--g-topbar-bg) !important;
  backdrop-filter: blur(36px) saturate(200%) brightness(1.01) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.01) !important;
  border-bottom: 1px solid var(--g-topbar-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 4px 20px rgba(0,0,0,.08), 0 8px 32px rgba(59,130,246,.06) !important;
}
.topbar-title {
  background: var(--g-topbar-title-bg) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── CARDS ── */
html .card[class] {
  background: var(--g-card-bg) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid var(--g-card-border) !important;
  /* Sombra multicapa 4K: ambiente + direccional + highlight interno */
  box-shadow:
    0 1px 0 rgba(255,255,255,.90),
    0 2px 4px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.08),
    0 24px 48px rgba(59,130,246,.07),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.03) !important;
  border-radius: 18px !important;
}
html .card[class]:hover {
  border-color: rgba(0,0,0,.09) !important;
  transform: none;
  box-shadow:
    0 4px 16px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}
html .card-title[class] { color: var(--g-text-primary) !important; border-bottom: 1px solid var(--g-card-border) !important; }

/* ── STAT CARDS ── */
html .stat-card[class] {
  background: var(--g-stat-bg) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid var(--g-stat-border) !important;
  border-radius: 20px !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.08),
    0 20px 40px rgba(59,130,246,.06),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.03) !important;
}
html .stat-card[class]:hover {
  transform: none !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.08),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.03) !important;
}
/* Iconos con color sólido y vibrante para que resalten sobre fondo blanco */
html:not(.theme-dark) .stat-card.blue[class]   .stat-icon { background: linear-gradient(135deg,#4f46e5,#6366f1) !important; color: #fff !important; }
html:not(.theme-dark) .stat-card.green[class]  .stat-icon { background: linear-gradient(135deg,#059669,#10b981) !important; color: #fff !important; }
html:not(.theme-dark) .stat-card.yellow[class] .stat-icon { background: linear-gradient(135deg,#d97706,#f59e0b) !important; color: #fff !important; }
html:not(.theme-dark) .stat-card.purple[class] .stat-icon { background: linear-gradient(135deg,#7c3aed,#a78bfa) !important; color: #fff !important; }
/* Iconos dark mode — semi-transparentes */
html.theme-dark .stat-card.blue[class]   .stat-icon { background: linear-gradient(135deg,rgba(59,130,246,.5),rgba(59,130,246,.3))   !important; color: #a5b4fc !important; }
html.theme-dark .stat-card.green[class]  .stat-icon { background: linear-gradient(135deg,rgba(22,163,74,.5),rgba(16,185,129,.3))   !important; color: #6ee7b7 !important; }
html.theme-dark .stat-card.yellow[class] .stat-icon { background: linear-gradient(135deg,rgba(217,119,6,.5),rgba(245,158,11,.3))   !important; color: #fcd34d !important; }
html.theme-dark .stat-card.purple[class] .stat-icon { background: linear-gradient(135deg,rgba(124,58,237,.5),rgba(167,139,250,.3)) !important; color: #c4b5fd !important; }
.stat-icon { border-radius: 14px !important; box-shadow: 0 4px 16px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.stat-value { color: var(--g-text-primary) !important; }
.stat-label { color: var(--g-text-muted) !important; }

/* ── BOTONES ── */
.btn { border-radius: 10px !important; transition: all .2s ease !important; }
.btn-primary {
  background: linear-gradient(135deg,#4f46e5,#6366f1) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.35), 0 1px 3px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg,#4338ca,#4f46e5) !important;
  transform: none !important;
  box-shadow: 0 6px 16px rgba(59,130,246,.40), 0 2px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html .btn-secondary[class] {
  background: var(--g-btn-sec-bg) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-btn-sec-border) !important;
  color: var(--g-btn-sec-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
html .btn-secondary[class]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
html .btn-danger[class] {
  background: linear-gradient(135deg,rgba(220,38,38,.15),rgba(239,68,68,.10)) !important;
  border: 1px solid rgba(220,38,38,.35) !important;
  color: #b91c1c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
html.theme-dark .btn-danger[class] {
  background: linear-gradient(135deg,rgba(220,38,38,.4),rgba(239,68,68,.25)) !important;
  border: 1px solid rgba(220,38,38,.45) !important;
  color: #fca5a5 !important;
  box-shadow: none !important;
}

/* ── TABLAS ── */
table thead tr { background: var(--g-thead-bg) !important; }
th { background: transparent !important; color: var(--g-th-color) !important; border-bottom: 1px solid var(--g-th-border) !important; }
td { border-bottom: 1px solid var(--g-td-border) !important; color: var(--g-td-color) !important; }
tr:hover td { background: var(--g-tr-hover) !important; }

/* ── INPUTS ── */
html input[class], html select[class], html textarea[class] {
  background: var(--g-input-bg) !important;
  border: 1.5px solid var(--g-input-border) !important;
  color: var(--g-input-color) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
html input[class]:focus, html select[class]:focus, html textarea[class]:focus {
  border-color: rgba(59,130,246,.7) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}
input::placeholder, textarea::placeholder { color: var(--g-input-placeholder) !important; }
label { color: var(--g-label-color) !important; }
select option { background: var(--g-select-option-bg) !important; color: var(--g-select-option-color) !important; }
html .search-input[class] {
  background: var(--g-input-bg) !important;
  border: 1.5px solid var(--g-input-border) !important;
  color: var(--g-input-color) !important;
}

/* ── BADGES (default = claro: texto oscuro) ── */
.badge-blue   { background: rgba(37,99,235,.12);  color: #1d4ed8; border: 1px solid rgba(37,99,235,.25); }
.badge-green  { background: rgba(22,163,74,.12);  color: #15803d; border: 1px solid rgba(22,163,74,.25); }
.badge-red    { background: rgba(220,38,38,.12);  color: #dc2626; border: 1px solid rgba(220,38,38,.25); }
.badge-yellow { background: rgba(217,119,6,.12);  color: #b45309; border: 1px solid rgba(217,119,6,.25); }
.badge-purple { background: rgba(124,58,237,.12); color: #6d28d9; border: 1px solid rgba(124,58,237,.25); }
.badge-gray   { background: var(--g-badge-gray-bg); color: var(--g-badge-gray-color); border: 1px solid var(--g-badge-gray-border); }
.trend-up   { background: rgba(22,163,74,.12);  color: #15803d; border: 1px solid rgba(22,163,74,.25); }
.trend-down { background: rgba(220,38,38,.12);  color: #dc2626; border: 1px solid rgba(220,38,38,.25); }
.trend-neu  { background: var(--g-badge-gray-bg); color: var(--g-text-muted); }
/* badges en oscuro — texto claro vibrante */
html.theme-dark .badge-blue   { color: #93c5fd; background: rgba(37,99,235,.3);  border-color: rgba(37,99,235,.4); }
html.theme-dark .badge-green  { color: #86efac; background: rgba(22,163,74,.3);  border-color: rgba(22,163,74,.4); }
html.theme-dark .badge-red    { color: #fca5a5; background: rgba(220,38,38,.3);  border-color: rgba(220,38,38,.4); }
html.theme-dark .badge-yellow { color: #fde68a; background: rgba(217,119,6,.3);  border-color: rgba(217,119,6,.4); }
html.theme-dark .badge-purple { color: #d8b4fe; background: rgba(124,58,237,.3); border-color: rgba(124,58,237,.4); }
html.theme-dark .trend-up   { color: #4ade80; background: rgba(22,163,74,.25);  border-color: rgba(74,222,128,.3); }
html.theme-dark .trend-down { color: #f87171; background: rgba(220,38,38,.25);  border-color: rgba(239,68,68,.3); }

/* ── FLASH ── */
html .flash-success[class] {
  background: var(--g-flash-ok-bg) !important; backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-flash-ok-border) !important; color: var(--g-flash-ok-color) !important; border-radius: 12px !important;
}
html .flash-error[class] {
  background: var(--g-flash-err-bg) !important; backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-flash-err-border) !important; color: var(--g-flash-err-color) !important; border-radius: 12px !important;
}

/* ── DETAIL HEADER ── */
html .detail-header[class] {
  background: var(--g-detail-bg) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--g-detail-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

/* ── ACTION BUTTONS ── */
html .action-btn[class] {
  background: var(--g-action-btn-bg) !important;
  border: 1px solid var(--g-action-btn-border) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
html .action-btn[class]:hover { transform: translateY(-1px) scale(1.05) !important; }

/* ── KANBAN ── */
html .kanban-col[class] {
  background: var(--g-kanban-col-bg) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-kanban-col-border) !important; border-radius: 14px !important;
}
html .kanban-card[class] {
  background: var(--g-kanban-card-bg) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--g-kanban-card-border) !important; border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  color: var(--g-text-secondary) !important;
}
html .kanban-card[class]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59,130,246,.35) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,rgba(59,130,246,.6),rgba(124,58,237,.4)); border-radius: 99px; }

/* ── MODALES ── */
html .action-modal[class], html .modal-content[class] {
  background: var(--g-modal-bg) !important;
  backdrop-filter: blur(48px) saturate(220%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.08) !important;
  border: 1px solid var(--g-modal-border) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.25) inset !important;
}
/* Modo claro: modal ultra-transparente (glass puro) */
html:not(.theme-dark) .action-modal[class],
html:not(.theme-dark) .modal-content[class] {
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(48px) saturate(200%) brightness(1.10) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.10) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.30) inset !important;
}
html .modal-overlay[class] {
  background: rgba(15,23,42,.35) !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
/* Modo claro: overlay más suave */
html:not(.theme-dark) .modal-overlay[class] {
  background: rgba(15,23,42,.20) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}

/* ── TEXTO GENERAL ── */
body, .content { color: var(--g-text-secondary) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--g-text-primary) !important; font-weight: 700 !important; }
td, p, li { color: var(--g-text-secondary) !important; }
/* Modo claro: asegurar negro puro en tablas y contenido */
html:not(.theme-dark) td { color: #0f172a !important; }
html:not(.theme-dark) th { color: #334155 !important; font-weight: 600 !important; }
html:not(.theme-dark) p, html:not(.theme-dark) li { color: #1e293b !important; }
html:not(.theme-dark) label { color: #0f172a !important; font-weight: 500 !important; }
html:not(.theme-dark) .nav-section { color: #64748b !important; font-weight: 600 !important; letter-spacing: .05em !important; }
html:not(.theme-dark) .stat-value { color: #0f172a !important; font-weight: 700 !important; }
html:not(.theme-dark) .stat-label { color: #475569 !important; }
html:not(.theme-dark) .card-title { color: #0f172a !important; font-weight: 700 !important; }
html:not(.theme-dark) .user-info .name { color: #0f172a !important; font-weight: 600 !important; }
html:not(.theme-dark) .user-info .role { color: #475569 !important; }

/* ── AVATARES ── */
.user-avatar { box-shadow: 0 0 0 2px rgba(59,130,246,.4), 0 4px 12px rgba(59,130,246,.25) !important; }

/* ═══════════════════════════════════════════════════════════════════
   CHROME LIQUID GLASS — Iconos sidebar + elementos translúcidos
   Imagen 1: metallic chrome buttons
   Imagen 3: liquid glass transparent panels
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables chrome / liquid glass ── */
html:not(.theme-dark) {
  --chrome-bg:           linear-gradient(180deg,#ffffff 0%,#e8e8e8 45%,#d0d0d0 50%,#e4e4e4 100%);
  --chrome-border:       linear-gradient(180deg,#ffffff 0%,#b8b8b8 50%,#888 100%);
  --chrome-shadow:       0 2px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(0,0,0,.08);
  --chrome-shadow-hover: 0 4px 14px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.10);
  --liq-bg:              rgba(255,255,255,.38);
  --liq-border:          rgba(255,255,255,.70);
  --liq-shadow:          0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.04);
  --liq-blur:            blur(20px) saturate(180%) brightness(1.04);
}
html.theme-dark {
  --chrome-bg:           linear-gradient(180deg,rgba(80,80,100,.55) 0%,rgba(40,40,60,.65) 45%,rgba(25,25,45,.70) 50%,rgba(50,50,75,.60) 100%);
  --chrome-border:       rgba(255,255,255,.18);
  --chrome-shadow:       0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25);
  --chrome-shadow-hover: 0 4px 16px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30);
  --liq-bg:              rgba(255,255,255,.06);
  --liq-border:          rgba(255,255,255,.12);
  --liq-shadow:          0 8px 32px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
  --liq-blur:            blur(20px) saturate(160%);
}

/* ════════════════════════════════════════
   SIDEBAR NAV-LINK — Chrome glass capsule
   ════════════════════════════════════════ */

/* Contenedor del icono emoji dentro del nav-link → glassmorphism pill */
html .nav-link[class] .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
  position: relative !important;
}

/* Modo claro: chrome metálico */
html:not(.theme-dark) .nav-link[class] .icon {
  background: var(--chrome-bg) !important;
  box-shadow: var(--chrome-shadow) !important;
  border: 1px solid rgba(180,180,180,.60) !important;
  /* Brillo superior tipo lente */
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.35) 30%,
      rgba(255,255,255,.00) 50%,
      rgba(0,0,0,.06) 80%,
      rgba(0,0,0,.10) 100%
    ),
    var(--chrome-bg) !important;
}
html:not(.theme-dark) .nav-link[class]:hover .icon {
  box-shadow: var(--chrome-shadow-hover) !important;
  transform: none !important;
  border-color: rgba(120,120,120,.55) !important;
}
html:not(.theme-dark) .nav-link.active[class] .icon {
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.20) 35%,
      rgba(59,130,246,.10) 60%,
      rgba(59,130,246,.20) 100%
    ),
    linear-gradient(180deg,#ededff 0%,#c8c8ff 45%,#a8a8e8 50%,#c0c0f8 100%) !important;
  border-color: rgba(59,130,246,.40) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.30), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(59,130,246,.15) !important;
}

/* Modo oscuro: dark liquid glass */
html.theme-dark .nav-link[class] .icon {
  background: var(--chrome-bg) !important;
  box-shadow: var(--chrome-shadow) !important;
  border: 1px solid var(--chrome-border) !important;
}
html.theme-dark .nav-link[class]:hover .icon {
  box-shadow: var(--chrome-shadow-hover) !important;
  transform: none !important;
  border-color: rgba(255,255,255,.22) !important;
}
html.theme-dark .nav-link.active[class] .icon {
  background: linear-gradient(180deg,rgba(59,130,246,.55) 0%,rgba(59,130,246,.45) 45%,rgba(67,56,202,.55) 50%,rgba(59,130,246,.48) 100%) !important;
  border-color: rgba(129,140,248,.35) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.40), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30) !important;
}

/* ════════════════════════════════════════
   NAV-LINK wrapper — liquid glass hover
   ════════════════════════════════════════ */

html:not(.theme-dark) .nav-link[class]:hover {
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
html:not(.theme-dark) .nav-link.active[class] {
  background: rgba(255,255,255,.38) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.08), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

html.theme-dark .nav-link[class]:hover {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.theme-dark .nav-link.active[class] {
  background: rgba(59,130,246,.14) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(129,140,248,.18) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ════════════════════════════════════════
   BOTONES — chrome glass (modo claro)
   ════════════════════════════════════════ */

/* btn-secondary → liquid glass chrome */
html:not(.theme-dark) .btn-secondary[class] {
  background: linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(235,235,240,.80) 100%) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid rgba(180,180,190,.55) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.05) !important;
  color: #374151 !important;
}
html:not(.theme-dark) .btn-secondary[class]:hover {
  background: linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(240,240,250,.90) 100%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.13), 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(0,0,0,.06) !important;
  border-color: rgba(140,140,160,.60) !important;
  color: #1e293b !important;
}

/* Botones de acción (action-btn) → chrome glass */
html:not(.theme-dark) .action-btn[class] {
  background: linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(230,230,238,.75) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(180,180,195,.50) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html:not(.theme-dark) .action-btn[class]:hover {
  background: linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(240,240,252,.88) 100%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.04) !important;
  transform: none !important;
}

/* ════════════════════════════════════════
   CARDS — Liquid Glass (más transparentes)
   ════════════════════════════════════════ */

html:not(.theme-dark) .card[class] {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(52px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.06),
    inset 0 1.5px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}
html:not(.theme-dark) .card[class]:hover {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(0,0,0,.09) !important;
  transform: none !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}

/* Stat cards — liquid glass claro */
html:not(.theme-dark) .stat-card[class] {
  background: rgba(255,255,255,.52) !important;
  backdrop-filter: blur(52px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 8px 20px rgba(0,0,0,.06),
    inset 0 1.5px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}

/* Dark mode cards — liquid glass oscuro */
html.theme-dark .card[class] {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(40px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.18),
    0 16px 40px rgba(0,0,0,.22),
    inset 0 1.5px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.22) !important;
}
html.theme-dark .stat-card[class] {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(40px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.20),
    0 16px 36px rgba(0,0,0,.24),
    inset 0 1.5px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
}

/* ════════════════════════════════════════
   SIDEBAR — Liquid glass claro / oscuro
   ════════════════════════════════════════ */

html:not(.theme-dark) .sidebar[class] {
  background: rgba(255,255,255,.64) !important;
  backdrop-filter: blur(52px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
  border-right: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,.05), inset -1px 0 0 rgba(255,255,255,.80) !important;
}
html.theme-dark .sidebar[class] {
  background: rgba(15,23,42,.52) !important;
  backdrop-filter: blur(48px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(160%) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
}

/* ════════════════════════════════════════
   TOPBAR — Liquid glass
   ════════════════════════════════════════ */

html:not(.theme-dark) .topbar[class] {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(52px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.80), 0 4px 16px rgba(0,0,0,.05) !important;
}
html.theme-dark .topbar[class] {
  background: rgba(15,23,42,.50) !important;
  backdrop-filter: blur(44px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.18) !important;
}

/* ════════════════════════════════════════
   DARK GLASS — kanban, detail-header, action-modal
   ════════════════════════════════════════ */
html.theme-dark .kanban-col[class] {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(32px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
html.theme-dark .kanban-card[class] {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.theme-dark .detail-header[class] {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(40px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html.theme-dark .action-modal[class] {
  background: rgba(8,14,32,.40) !important;
  backdrop-filter: blur(48px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
html.theme-dark .glass[class] {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ════════════════════════════════════════
   LIGHT GLASS — kanban, detail-header, action-modal
   ════════════════════════════════════════ */
html:not(.theme-dark) .kanban-col[class] {
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
html:not(.theme-dark) .kanban-card[class] {
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
html:not(.theme-dark) .kanban-card[class]:hover {
  box-shadow: 0 6px 20px rgba(59,130,246,.10), inset 0 1px 0 rgba(255,255,255,.90) !important;
  transform: none !important;
}
html:not(.theme-dark) .detail-header[class] {
  background: rgba(255,255,255,.22) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 2px 16px rgba(59,130,246,.05), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
html:not(.theme-dark) .action-modal[class] {
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(48px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.06),
    0 32px 64px rgba(0,0,0,.08),
    inset 0 1.5px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}
html:not(.theme-dark) .glass[class] {
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* ════════════════════════════════════════
   INPUTS — Liquid glass
   ════════════════════════════════════════ */

html:not(.theme-dark) .form-control[class],
html:not(.theme-dark) .form-select[class],
html:not(.theme-dark) input[type="text"],
html:not(.theme-dark) input[type="email"],
html:not(.theme-dark) input[type="password"],
html:not(.theme-dark) input[type="number"],
html:not(.theme-dark) input[type="search"],
html:not(.theme-dark) textarea,
html:not(.theme-dark) select {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid rgba(200,200,210,.55) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.60), 0 1px 0 rgba(255,255,255,.90) !important;
  color: #0f172a !important;
}
html:not(.theme-dark) .form-control[class]:focus,
html:not(.theme-dark) .form-select[class]:focus,
html:not(.theme-dark) input:focus,
html:not(.theme-dark) textarea:focus,
html:not(.theme-dark) select:focus {
  background: rgba(255,255,255,.80) !important;
  border-color: rgba(59,130,246,.45) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12), inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.95) !important;
  outline: none !important;
}

html.theme-dark .form-control[class],
html.theme-dark .form-select[class],
html.theme-dark input[type="text"],
html.theme-dark input[type="email"],
html.theme-dark input[type="password"],
html.theme-dark input[type="number"],
html.theme-dark textarea,
html.theme-dark select {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* ════════════════════════════════════════
   SOFTPHONE — inputs always dark (override global theme rules)
   ════════════════════════════════════════ */
.pbx-phone input, .pbx-phone select, .pbx-phone textarea,
html:not(.theme-dark) .pbx-phone input,
html:not(.theme-dark) .pbx-phone select,
html:not(.theme-dark) .pbx-phone textarea {
  background: #060b1c !important;
  color: #e2e8f0 !important;
  border-color: rgba(59,130,246,.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55) !important;
}
.pbx-phone input:focus, .pbx-phone select:focus,
html:not(.theme-dark) .pbx-phone input:focus,
html:not(.theme-dark) .pbx-phone select:focus {
  border-color: rgba(59,130,246,.60) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), inset 0 2px 8px rgba(0,0,0,.55) !important;
}
.pbx-phone input::placeholder,
html:not(.theme-dark) .pbx-phone input::placeholder {
  color: #2d3f60 !important;
}

/* ════════════════════════════════════════
   MODALES — Liquid glass premium
   ════════════════════════════════════════ */

html:not(.theme-dark) .modal[class] {
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(48px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.06),
    0 32px 64px rgba(0,0,0,.10),
    inset 0 1.5px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.02) !important;
}
html.theme-dark .modal[class] {
  background: rgba(10,15,35,.55) !important;
  backdrop-filter: blur(48px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

/* ════════════════════════════════════════
   TABLAS — Liquid glass rows
   ════════════════════════════════════════ */

html:not(.theme-dark) table thead th {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(200,200,215,.50) !important;
}
html:not(.theme-dark) tbody tr:hover td {
  background: rgba(255,255,255,.70) !important;
}

/* ════════════════════════════════════════
   HIGHLIGHT "GLOSS" — línea brillante top
   en todos los elementos glass claro
   ════════════════════════════════════════ */

/* Gloss sutil — solo línea de luz en el borde superior, sin tapar la transparencia */
html:not(.theme-dark) .card[class]::before,
html:not(.theme-dark) .stat-card[class]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 40% !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,.18) 0%,
    transparent 100%
  ) !important;
  z-index: 0 !important;
}
html:not(.theme-dark) .card[class],
html:not(.theme-dark) .stat-card[class] {
  position: relative !important;
  overflow: hidden !important;
}

/* Orbes del fondo — más vibrantes para que se vean a través del vidrio */
html:not(.theme-dark) .glass-orb-1 {
  background: radial-gradient(circle, rgba(59,130,246,.55) 0%, rgba(139,92,246,.30) 50%, transparent 75%) !important;
}
html:not(.theme-dark) .glass-orb-2 {
  background: radial-gradient(circle, rgba(59,130,246,.45) 0%, rgba(59,130,246,.25) 50%, transparent 75%) !important;
}
html.theme-dark .glass-orb-1 {
  background: radial-gradient(circle, rgba(59,130,246,.50) 0%, rgba(59,130,246,.28) 50%, transparent 75%) !important;
}
html.theme-dark .glass-orb-2 {
  background: radial-gradient(circle, rgba(139,92,246,.45) 0%, rgba(59,130,246,.22) 50%, transparent 75%) !important;
}

/* ════════════════════════════════════════
   DASHBOARD — dark mode overrides
   ════════════════════════════════════════ */

html.theme-dark .kpi-tile {
  background: #0f1929 !important;
  border-color: rgba(59,130,246,.15) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.3) !important;
}
html.theme-dark .kpi-tile:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
}
html.theme-dark .kpi-t1 .kpi-icon { background: rgba(249,115,22,.15) !important; }
html.theme-dark .kpi-t2 .kpi-icon { background: rgba(239,68,68,.15) !important; }
html.theme-dark .kpi-t3 .kpi-icon { background: rgba(59,130,246,.15) !important; }
html.theme-dark .kpi-t4 .kpi-icon { background: rgba(124,58,237,.15) !important; }
html.theme-dark .kpi-t5 .kpi-icon { background: rgba(30,64,175,.15) !important; }
html.theme-dark .kpi-t6 .kpi-icon { background: rgba(22,163,74,.15) !important; }
html.theme-dark .kpi-tile .kpi-lbl { color: #94a3b8 !important; }

html.theme-dark .card-hdr {
  background: linear-gradient(90deg,#0d1b2e,#0f1929) !important;
  border-bottom-color: rgba(59,130,246,.18) !important;
}
html.theme-dark .card-hdr-title { color: #e2e8f0 !important; }
html.theme-dark .card-hdr-link  { color: #60a5fa !important; }

/* ════════════════════════════════════════════════════════════
   DARK MODE — override hardcoded white inline styles
   (productos/catálogo y otros templates con style="background:white")
   ════════════════════════════════════════════════════════════ */

/* Inputs y selects con background:white inline */
html.theme-dark input[style*="background:white"],
html.theme-dark input[style*="background: white"],
html.theme-dark select[style*="background:white"],
html.theme-dark select[style*="background: white"],
html.theme-dark textarea[style*="background:white"],
html.theme-dark textarea[style*="background: white"] {
  background: var(--g-input-bg) !important;
  color: var(--g-input-color) !important;
  border-color: var(--g-input-border) !important;
}

/* Cards / contenedores con background:white inline (auto-card, etc.) */
html.theme-dark [style*="background:white"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#ffffff"],
html.theme-dark [style*="background: #ffffff"] {
  background: var(--g-card-bg) !important;
  color: var(--g-text-primary) !important;
}

/* Modales / contenedores con border-radius y background:white */
html.theme-dark [style*="background:white"][style*="border-radius"],
html.theme-dark [style*="background: white"][style*="border-radius"],
html.theme-dark [style*="background:#fff"][style*="border-radius"],
html.theme-dark [style*="background: #fff"][style*="border-radius"] {
  background: rgba(15,23,42,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--g-text-primary) !important;
}

/* Texto heredado dentro de contenedores que antes eran blancos */
html.theme-dark [style*="background:white"] *,
html.theme-dark [style*="background: white"] *,
html.theme-dark [style*="background:#fff"] *,
html.theme-dark [style*="background: #fff"] * {
  color: var(--g-text-primary) !important;
}

/* Catálogo/Productos — auto-card */
html.theme-dark .auto-card {
  background: var(--g-card-bg) !important;
  border-color: var(--g-card-border) !important;
  color: var(--g-text-primary) !important;
}
html.theme-dark .auto-card * {
  color: var(--g-text-primary) !important;
}
html.theme-dark .auto-card input,
html.theme-dark .auto-card select,
html.theme-dark .auto-card textarea {
  background: var(--g-input-bg) !important;
  color: var(--g-input-color) !important;
  border-color: var(--g-input-border) !important;
}

/* Modales de productos (detalle/editar/nuevo) */
html.theme-dark #modal-detalle,
html.theme-dark #modal-editar,
html.theme-dark #modal-nuevo {
  background: rgba(15,23,42,.92) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  color: var(--g-text-primary) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
html.theme-dark #modal-detalle *,
html.theme-dark #modal-editar *,
html.theme-dark #modal-nuevo * {
  color: var(--g-text-primary) !important;
}
html.theme-dark #modal-detalle input,
html.theme-dark #modal-detalle select,
html.theme-dark #modal-detalle textarea,
html.theme-dark #modal-editar input,
html.theme-dark #modal-editar select,
html.theme-dark #modal-editar textarea,
html.theme-dark #modal-nuevo input,
html.theme-dark #modal-nuevo select,
html.theme-dark #modal-nuevo textarea {
  background: var(--g-input-bg) !important;
  color: var(--g-input-color) !important;
  border-color: var(--g-input-border) !important;
}

/* Sticky headers dentro de modales en dark mode */
html.theme-dark [style*="position:sticky"],
html.theme-dark [style*="position: sticky"] {
  background: rgba(15,23,42,.95) !important;
}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — cuerpo blanco puro, orbes muy suaves
   ════════════════════════════════════════════════════════════ */
html:not(.theme-dark) body {
  background: #ffffff !important;
}
html:not(.theme-dark) body::before,
html:not(.theme-dark) body::after {
  opacity: 0.35 !important;
}