/* =============================================================
   LØVEK PANEL — Design System with Theme Support
   10 presets pro: 5 dark, 5 light
   ============================================================= */

/* ── Default theme: Slate Minimal (dark) ── */
:root {
  --bg-body:         #0f172a;
  --bg-surface:      #1e293b;
  --bg-card:         #1e293b;
  --bg-glass:        rgba(30,41,59,0.6);
  --bg-input:        rgba(15,23,42,0.75);
  --bg-hover:        rgba(56,189,248,0.07);
  --border-color:    rgba(255,255,255,0.07);
  --border-input:    #334155;
  --border-card:     rgba(255,255,255,0.08);
  --border-card-hvr: rgba(56,189,248,0.40);
  --text-primary:    #f8fafc;
  --text-muted:      #64748b;
  --text-on-accent:  #0c1a2e;
  --accent:          #38bdf8;
  --accent-soft:     rgba(56,189,248,0.12);
  --accent-grad:     #7dd3fc;
  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #334155;
  --chart-c1: #60a5fa; --chart-c2: #fb923c; --chart-c3: #4ade80;
  --chart-c4: #e879f9; --chart-c5: #22d3ee; --chart-c6: #facc15;
  --chart-c7: #a78bfa; --chart-c8: #f87171;
  --chart-grid: #0f172a;
}

/* ── Zinc & Emerald (oscuro) ── */
[data-theme="zinc-emerald"] {
  --bg-body:         #09090b;
  --bg-surface:      #18181b;
  --bg-card:         #1f1f23;
  --bg-glass:        rgba(24,24,27,0.65);
  --bg-input:        rgba(9,9,11,0.8);
  --bg-hover:        rgba(16,185,129,0.07);
  --border-color:    rgba(255,255,255,0.07);
  --border-input:    #3f3f46;
  --border-card:     rgba(255,255,255,0.08);
  --border-card-hvr: rgba(16,185,129,0.40);
  --text-primary:    #f4f4f5;
  --text-muted:      #71717a;
  --text-on-accent:  #021c10;
  --accent:          #10b981;
  --accent-soft:     rgba(16,185,129,0.12);
  --accent-grad:     #34d399;
  --scrollbar-track: #09090b;
  --scrollbar-thumb: #3f3f46;
  --chart-c1: #60a5fa; --chart-c2: #fb923c; --chart-c3: #4ade80;
  --chart-c4: #e879f9; --chart-c5: #22d3ee; --chart-c6: #facc15;
  --chart-c7: #a78bfa; --chart-c8: #f87171;
  --chart-grid: #09090b;
}

/* ── Nordic Charcoal (oscuro) ── */
[data-theme="nordic-charcoal"] {
  --bg-body:         #1c1c1e;
  --bg-surface:      #2c2c2e;
  --bg-card:         #323234;
  --bg-glass:        rgba(44,44,46,0.65);
  --bg-input:        rgba(28,28,30,0.8);
  --bg-hover:        rgba(142,142,147,0.09);
  --border-color:    rgba(255,255,255,0.08);
  --border-input:    #3d3d3f;
  --border-card:     rgba(255,255,255,0.09);
  --border-card-hvr: rgba(142,142,147,0.50);
  --text-primary:    #ffffff;
  --text-muted:      #6d6d72;
  --text-on-accent:  #1c1c1e;
  --accent:          #8e8e93;
  --accent-soft:     rgba(142,142,147,0.12);
  --accent-grad:     #aeaeb2;
  --scrollbar-track: #1c1c1e;
  --scrollbar-thumb: #3a3a3c;
  --chart-c1: #60a5fa; --chart-c2: #fb923c; --chart-c3: #4ade80;
  --chart-c4: #e879f9; --chart-c5: #22d3ee; --chart-c6: #facc15;
  --chart-c7: #a78bfa; --chart-c8: #f87171;
  --chart-grid: #1c1c1e;
}

/* ── Midnight Luxury (oscuro) ── */
[data-theme="midnight-luxury"] {
  --bg-body:         #0a0a1a;
  --bg-surface:      #16162e;
  --bg-card:         #1c1c38;
  --bg-glass:        rgba(22,22,46,0.65);
  --bg-input:        rgba(10,10,26,0.8);
  --bg-hover:        rgba(129,140,248,0.07);
  --border-color:    rgba(129,140,248,0.10);
  --border-input:    #2d2d55;
  --border-card:     rgba(129,140,248,0.10);
  --border-card-hvr: rgba(129,140,248,0.40);
  --text-primary:    #f3f4f6;
  --text-muted:      #9b99cc;
  --text-on-accent:  #0a0a1a;
  --accent:          #818cf8;
  --accent-soft:     rgba(129,140,248,0.12);
  --accent-grad:     #a5b4fc;
  --scrollbar-track: #0a0a1a;
  --scrollbar-thumb: #2d2d55;
  --chart-c1: #60a5fa; --chart-c2: #fb923c; --chart-c3: #4ade80;
  --chart-c4: #e879f9; --chart-c5: #22d3ee; --chart-c6: #facc15;
  --chart-c7: #a78bfa; --chart-c8: #f87171;
  --chart-grid: #0a0a1a;
}

/* ── Deep Cyberpunk (oscuro) ── */
[data-theme="deep-cyberpunk"] {
  --bg-body:         #0d0c15;
  --bg-surface:      #1a1829;
  --bg-card:         #201e32;
  --bg-glass:        rgba(26,24,41,0.68);
  --bg-input:        rgba(13,12,21,0.85);
  --bg-hover:        rgba(244,63,94,0.07);
  --border-color:    rgba(244,63,94,0.09);
  --border-input:    #2d2840;
  --border-card:     rgba(244,63,94,0.09);
  --border-card-hvr: rgba(244,63,94,0.40);
  --text-primary:    #f1f5f9;
  --text-muted:      #9087a0;
  --text-on-accent:  #ffffff;
  --accent:          #f43f5e;
  --accent-soft:     rgba(244,63,94,0.12);
  --accent-grad:     #fb7185;
  --scrollbar-track: #0d0c15;
  --scrollbar-thumb: #2d2840;
  --chart-c1: #60a5fa; --chart-c2: #fb923c; --chart-c3: #4ade80;
  --chart-c4: #e879f9; --chart-c5: #22d3ee; --chart-c6: #facc15;
  --chart-c7: #a78bfa; --chart-c8: #f87171;
  --chart-grid: #0d0c15;
}

/* ── Clean Canvas (claro) ── */
[data-theme="clean-canvas"] {
  --bg-body:         #f9fafb;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,0.78);
  --bg-input:        rgba(249,250,251,0.92);
  --bg-hover:        rgba(79,70,229,0.06);
  --border-color:    rgba(0,0,0,0.08);
  --border-input:    #d1d5db;
  --border-card:     rgba(0,0,0,0.08);
  --border-card-hvr: rgba(79,70,229,0.35);
  --text-primary:    #111827;
  --text-muted:      #6b7280;
  --text-on-accent:  #ffffff;
  --accent:          #4f46e5;
  --accent-soft:     rgba(79,70,229,0.10);
  --accent-grad:     #818cf8;
  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #d1d5db;
  --chart-c1: #2563eb; --chart-c2: #ea580c; --chart-c3: #16a34a;
  --chart-c4: #c026d3; --chart-c5: #0891b2; --chart-c6: #ca8a04;
  --chart-c7: #7c3aed; --chart-c8: #dc2626;
  --chart-grid: #f9fafb;
}

/* ── Soft Cream & Sage (claro) ── */
[data-theme="soft-cream-sage"] {
  --bg-body:         #f7f7f4;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,0.80);
  --bg-input:        rgba(247,247,244,0.92);
  --bg-hover:        rgba(40,87,69,0.06);
  --border-color:    rgba(0,0,0,0.07);
  --border-input:    #d4d4c8;
  --border-card:     rgba(0,0,0,0.07);
  --border-card-hvr: rgba(40,87,69,0.35);
  --text-primary:    #2c2c2a;
  --text-muted:      #6b7565;
  --text-on-accent:  #ffffff;
  --accent:          #285745;
  --accent-soft:     rgba(40,87,69,0.10);
  --accent-grad:     #3d7a62;
  --scrollbar-track: #eeeeea;
  --scrollbar-thumb: #c4c4b8;
  --chart-c1: #2563eb; --chart-c2: #ea580c; --chart-c3: #16a34a;
  --chart-c4: #c026d3; --chart-c5: #0891b2; --chart-c6: #ca8a04;
  --chart-c7: #7c3aed; --chart-c8: #dc2626;
  --chart-grid: #f7f7f4;
}

/* ── Corporate Ocean (claro) ── */
[data-theme="corporate-ocean"] {
  --bg-body:         #f0f4f8;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,0.80);
  --bg-input:        rgba(240,244,248,0.92);
  --bg-hover:        rgba(2,132,199,0.06);
  --border-color:    rgba(0,0,0,0.07);
  --border-input:    #bfd7ea;
  --border-card:     rgba(0,0,0,0.07);
  --border-card-hvr: rgba(2,132,199,0.35);
  --text-primary:    #0f172a;
  --text-muted:      #64748b;
  --text-on-accent:  #ffffff;
  --accent:          #0284c7;
  --accent-soft:     rgba(2,132,199,0.10);
  --accent-grad:     #38bdf8;
  --scrollbar-track: #e0eaf0;
  --scrollbar-thumb: #94a3b8;
  --chart-c1: #2563eb; --chart-c2: #ea580c; --chart-c3: #16a34a;
  --chart-c4: #c026d3; --chart-c5: #0891b2; --chart-c6: #ca8a04;
  --chart-c7: #7c3aed; --chart-c8: #dc2626;
  --chart-grid: #f0f4f8;
}

/* ── Minimalist Sand (claro) ── */
[data-theme="minimalist-sand"] {
  --bg-body:         #f5f5f0;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,0.80);
  --bg-input:        rgba(245,245,240,0.92);
  --bg-hover:        rgba(24,24,27,0.06);
  --border-color:    rgba(0,0,0,0.08);
  --border-input:    #d4d4cf;
  --border-card:     rgba(0,0,0,0.08);
  --border-card-hvr: rgba(24,24,27,0.30);
  --text-primary:    #3f3f46;
  --text-muted:      #71717a;
  --text-on-accent:  #f9fafb;
  --accent:          #18181b;
  --accent-soft:     rgba(24,24,27,0.08);
  --accent-grad:     #3f3f46;
  --scrollbar-track: #ebebE5;
  --scrollbar-thumb: #a1a1aa;
  --chart-c1: #2563eb; --chart-c2: #ea580c; --chart-c3: #16a34a;
  --chart-c4: #c026d3; --chart-c5: #0891b2; --chart-c6: #ca8a04;
  --chart-c7: #7c3aed; --chart-c8: #dc2626;
  --chart-grid: #f5f5f0;
}

/* ── Lavender Mist (claro) ── */
[data-theme="lavender-mist"] {
  --bg-body:         #f8f7fc;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,0.80);
  --bg-input:        rgba(248,247,252,0.92);
  --bg-hover:        rgba(139,92,246,0.07);
  --border-color:    rgba(139,92,246,0.10);
  --border-input:    #d8d0f4;
  --border-card:     rgba(139,92,246,0.10);
  --border-card-hvr: rgba(139,92,246,0.35);
  --text-primary:    #1e1b39;
  --text-muted:      #6d6b8a;
  --text-on-accent:  #ffffff;
  --accent:          #8b5cf6;
  --accent-soft:     rgba(139,92,246,0.10);
  --accent-grad:     #a78bfa;
  --scrollbar-track: #ede9fb;
  --scrollbar-thumb: #c4b5fd;
  --chart-c1: #2563eb; --chart-c2: #ea580c; --chart-c3: #16a34a;
  --chart-c4: #c026d3; --chart-c5: #0891b2; --chart-c6: #ca8a04;
  --chart-c7: #7c3aed; --chart-c8: #dc2626;
  --chart-grid: #f8f7fc;
}

/* ============================================================
   Global overrides — all theme vars applied
   ============================================================ */

*, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.1s ease; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

/* Force all text inputs to follow theme */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
select, textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}
select option {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

/* ── Semantic utility classes ── */
.u-surface  { background-color: var(--bg-surface) !important; }
.u-body     { background-color: var(--bg-body) !important; }
.u-card     { background-color: var(--bg-card) !important; }
.u-input    { background-color: var(--bg-input) !important; }
.u-text     { color: var(--text-primary) !important; }
.u-muted    { color: var(--text-muted) !important; }
.u-accent   { color: var(--accent) !important; }
.u-bg-accent      { background-color: var(--accent) !important; }
.u-bg-accent-soft { background-color: var(--accent-soft) !important; }
.u-border   { border-color: var(--border-color) !important; }

/* Nav item */
.nav-inactive { color: var(--text-muted); }
.nav-inactive:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Accent backward-compat aliases */
.text-gold   { color: var(--accent) !important; }
.bg-gold     { background-color: var(--accent) !important; }
.border-gold { border-color: var(--accent) !important; }
.focus\:border-gold:focus { border-color: var(--accent) !important; }

/* ── Card component ── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hvr);
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease both; }

/* ── Progress bar ── */
.progress-track { background: var(--border-card); border-radius: 9999px; overflow: hidden; }
.progress-fill  {
  background: linear-gradient(90deg, var(--accent), var(--accent-grad));
  height: 100%;
  transition: width 0.6s ease;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Role chip ── */
.role-chip {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Tables ── */
table.lovek-table { width: 100%; border-collapse: collapse; }
table.lovek-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
}
table.lovek-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
  font-size: 0.875rem;
  color: var(--text-primary);
}
table.lovek-table tbody tr:hover { background: var(--accent-soft); }

/* Tablas largas con scroll interno y cabecera fija al hacer scroll */
.ct-scroll { overflow-y: auto; }
.ct-scroll table.lovek-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
/* El pie de totales también se queda pegado: la suma tiene que verse sin llegar
   al final del scroll. El fondo del pie ya es opaco (ver "Pie de totales"). */
.ct-scroll table.lovek-table tfoot td,
.ct-scroll table.lovek-table tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Esquinas de las tablas (2026-10-08). La tarjeta es redonda pero no recorta lo de dentro: una
   caja con scroll pegada a sus bordes (card p-0, como el P&L) pintaba cabecera, pie y barra de
   scroll en un rectángulo encima de la esquina. La caja hereda el radio de la tarjeta y, como
   tiene overflow, recorta a él. Dentro de una tarjeta con padding, la caja lleva su propio radio
   para que la banda de la cabecera no quede en pico. */
.card.p-0 > .ct-scroll,
.card.p-0 > .overflow-x-auto,
.card.p-0 > .overflow-auto { border-radius: inherit; }
.card:not(.p-0) .ct-scroll,
.card:not(.p-0) .overflow-x-auto:has(> table.lovek-table) { border-radius: 12px; }
/* El carril de la barra de scroll lleva el color del fondo de la página: dentro de una tarjeta
   era una tira oscura y cuadrada. En las cajas de tabla, solo se ve el pulgar. */
.card .ct-scroll::-webkit-scrollbar-track,
.card .ct-scroll::-webkit-scrollbar-corner,
.card .overflow-x-auto::-webkit-scrollbar-track,
.card .overflow-x-auto::-webkit-scrollbar-corner,
.card.ct-scroll::-webkit-scrollbar-track,
.card.ct-scroll::-webkit-scrollbar-corner { background: transparent; }

/* ── Theme picker (settings page) ── */
.theme-card {
  border: 2px solid var(--border-card);
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  background: var(--bg-card);
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-card.active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }

.theme-swatches { display: flex; gap: 5px; margin-bottom: 0.6rem; }
.theme-swatch   { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); }

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ── Responsive: sidebar overlay ── */
#sidebarOverlay {
  transition: opacity 0.3s ease;
}

/* ── Responsive: disable card hover lift on touch ── */
@media (hover: none) {
  .card:hover { transform: none; }
}

/* ── Responsive: tables scroll on mobile ── */
@media (max-width: 639px) {
  table.lovek-table th,
  table.lovek-table td {
    font-size: 0.78rem;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
  }
}

/* ── Responsive: chart canvases don't overflow on small screens ── */
canvas {
  max-width: 100%;
}

/* ── Responsive: pre-formatted email text wraps on mobile ── */
@media (max-width: 639px) {
  pre.whitespace-pre-wrap {
    font-size: 0.75rem;
  }
}

/* ── Responsive: hide sidebar scrollbar on mobile when open ── */
@media (max-width: 767px) {
  body.sidebar-open {
    overflow: hidden;
  }
}

/* ── Ocultar el indicador nativo del input[type=date] (usamos icono propio) ── */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* ── Bloque de gastos colapsable ── */
.mdl-gastos-block { border-radius: 6px; overflow: hidden; }

.mdl-gastos-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  user-select: none;
  transition: background .15s, opacity .15s;
}
.mdl-gastos-summary::-webkit-details-marker { display: none; }
.mdl-gastos-summary:hover { background: rgba(56,189,248,.18); }

.mdl-gastos-hint {
  font-size: .7rem;
  font-weight: 400;
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mdl-gastos-chevron { transition: transform .2s; }
.mdl-gastos-block[open] .mdl-gastos-chevron { transform: rotate(180deg); }
.mdl-gastos-block[open] .mdl-gastos-hint { display: none; }

/* =============================================================
   GLASS THEMES (premium) — añadidos 2026-07-21
   Vidrio + glow ambiental + acento oro champán.
   Dos variantes: midnight-glass (oscuro) y daylight-glass (claro).
   Reutilizan el mismo contrato de tokens que el resto de temas.
   ============================================================ */

/* ── Midnight Glass (oscuro) ── */
[data-theme="midnight-glass"] {
  --bg-body:         #0b0d14;
  --bg-surface:      #12151f;
  --bg-card:         #141a28;
  --bg-glass:        #141a28;
  --bg-input:        rgba(255,255,255,0.05);
  --bg-hover:        rgba(232,201,143,0.08);
  --border-color:    rgba(255,255,255,0.08);
  --border-input:    rgba(255,255,255,0.14);
  --border-card:     rgba(255,255,255,0.09);
  --border-card-hvr: rgba(232,201,143,0.45);
  --text-primary:    #f2f0ea;
  --text-muted:      #9aa0b4;
  --text-on-accent:  #1a1406;
  --accent:          #e8c98f;
  --accent-soft:     rgba(232,201,143,0.14);
  --accent-grad:     #d9b676;
  --scrollbar-track: #0b0d14;
  --scrollbar-thumb: rgba(255,255,255,0.16);
  --chart-c1: #e8c98f; --chart-c2: #8b7bff; --chart-c3: #2dd4bf;
  --chart-c4: #fb7185; --chart-c5: #7dd3fc; --chart-c6: #fbbf24;
  --chart-c7: #c4b5fd; --chart-c8: #f472b6;
  --chart-grid: rgba(255,255,255,0.06);
  --glass-hi: rgba(255,255,255,0.08);
}

/* ── Daylight Glass (claro) ── */
[data-theme="daylight-glass"] {
  --bg-body:         #e9edf5;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        #ffffff;
  --bg-input:        rgba(255,255,255,0.72);
  --bg-hover:        rgba(176,137,74,0.08);
  --border-color:    rgba(23,28,48,0.08);
  --border-input:    rgba(23,28,48,0.16);
  --border-card:     rgba(255,255,255,0.75);
  --border-card-hvr: rgba(176,137,74,0.55);
  --text-primary:    #1e2333;
  --text-muted:      #6b7185;
  --text-on-accent:  #2a1e05;
  --accent:          #a17a2f;
  --accent-soft:     rgba(176,137,74,0.15);
  --accent-grad:     #c9a662;
  --scrollbar-track: #e9edf5;
  --scrollbar-thumb: rgba(23,28,48,0.20);
  --chart-c1: #b0894a; --chart-c2: #6d5dfc; --chart-c3: #0d9488;
  --chart-c4: #e11d63; --chart-c5: #0284c7; --chart-c6: #d97706;
  --chart-c7: #7c3aed; --chart-c8: #db2777;
  --chart-grid: rgba(23,28,48,0.07);
  --glass-hi: rgba(255,255,255,0.90);
}

/* ── Glow ambiental GLOBAL: todos los temas, en su propio color de acento. Fijo. ── */
body {
  background-image:
    radial-gradient(58% 52% at 12% -8%,  color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(50% 50% at 100% 12%, color-mix(in srgb, var(--accent-grad) 15%, transparent), transparent 62%),
    radial-gradient(60% 58% at 50% 118%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  background-attachment: fixed;
}

/* ============================================================
   SKIN moderno (rediseño) — GLOBAL, para TODOS los temas.
   Cada tema aporta sus colores (tokens); el skin aporta la
   estructura: vidrio (color-mix vuelve translúcido el --bg-card
   de cada tema) + blur + profundidad + componentes.
   No toca el markup salvo ui.* (ver layout.js). Iteración 2 (global).
   ============================================================ */

/* Tarjetas: vidrio en el color del tema + profundidad + hover con elevación */
.card {
  background: var(--bg-card);
  /* Sheen superior (brillo de vidrio, visible en oscuro) + superficie translúcida
     bastante opaca (90%) para que el --bg-card —más claro que el fondo— dé elevación. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
    color-mix(in srgb, var(--bg-card) 90%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  box-shadow:
    0 20px 50px -24px rgba(0,0,0,.60),
    0 3px 10px -5px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.015);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 66px -26px rgba(0,0,0,.66),
    0 4px 12px -5px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px var(--border-card-hvr);
  border-color: var(--border-card-hvr);
}

/* Sidebar y topbar → vidrio (color-mix sobre --bg-surface de cada tema) */
#sidebar {
  background: var(--bg-surface) !important;
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent) !important;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.045), 1px 0 40px -24px rgba(0,0,0,.6);
}
header.u-surface {
  background: var(--bg-surface) !important;
  background: color-mix(in srgb, var(--bg-surface) 80%, transparent) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.045);
}

/* Nav: item activo = píldora suave con barra de acento (no bloque sólido) */
nav a.active-nav {
  background-color: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--border-card-hvr);
}
nav a.nav-inactive:hover { background-color: var(--bg-hover) !important; }

/* KPI: chip de icono en degradado de acento con brillo */
.card .u-bg-accent-soft {
  background: linear-gradient(150deg, var(--accent), var(--accent-grad)) !important;
  color: var(--text-on-accent) !important;
  box-shadow: 0 6px 18px -8px var(--accent);
}

/* Tablas: cabecera glass fija, más aire, hover de acento */
table.lovek-table th {
  background: var(--bg-surface);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0;
  border-bottom: 1px solid var(--border-card);
  padding: .8rem .9rem;
  letter-spacing: .03em;
}
table.lovek-table td { padding: .72rem .9rem; border-bottom: 1px solid var(--border-color); }
table.lovek-table tbody tr:hover { background: var(--accent-soft); }

/* Cabeceras ordenables (js/table-sort.js): flecha a la derecha del rótulo.
   Se aplica a cualquier tabla del panel, lleve o no la clase .lovek-table. */
th.ts-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .15s ease;
}
th.ts-th:hover,
th.ts-th:focus-visible { color: var(--accent); }
th.ts-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.ts-th.ts-activa { color: var(--accent); }
th.ts-th .ts-ico {
  margin-left: .35rem;
  font-size: .7em;
  opacity: .35;
  transition: opacity .15s ease;
}
th.ts-th:hover .ts-ico { opacity: .7; }
th.ts-th.ts-activa .ts-ico { opacity: 1; color: var(--accent); }

/* role-chip / píldoras */
.role-chip {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border-card-hvr);
  border-radius: 999px;
}

/* Scrollbar fino */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}

/* KPI: chip de tendencia (semántico verde/rojo) + sparkline */
.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kpi-trend.up   { color: #12b76a; background: rgba(18,183,106,.15); }
.kpi-trend.down { color: #f04438; background: rgba(240,68,56,.15); }
.kpi-spark { opacity: .9; flex-shrink: 0; }

/* KPI: desglose del importe en líneas (p.ej. reparto de comisiones por manager).
   Plegado por defecto: desplegarlo estira toda la fila del grid. */
.kpi-details > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .6rem; font-size: .72rem; color: var(--text-muted);
  user-select: none;
}
.kpi-details > summary::-webkit-details-marker { display: none; }
.kpi-details > summary:hover { color: var(--accent); }
.kpi-details > summary i { font-size: .62rem; transition: transform .15s ease; }
.kpi-details[open] > summary i { transform: rotate(180deg); }
.kpi-breakdown {
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--border-card);
}
.kpi-bd-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: 1.5px 0; font-size: .72rem; line-height: 1.35;
}
.kpi-bd-name { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-bd-pct  { margin-left: .3rem; opacity: .7; font-variant-numeric: tabular-nums; }
.kpi-bd-val  { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-bd-note { margin-top: .45rem; font-size: .7rem; line-height: 1.35; color: var(--text-muted); }

/* ── Columnas de importes: SIEMPRE a la izquierda ──────────────────────────
   Pedido por Max (2026-08-18, extendido a todo el panel el mismo día): el importe
   alineado a la DERECHA y el rótulo a la izquierda dejan la cifra a media pantalla de
   su cabecera en cuanto el monitor es ancho —las tablas son width:100%— y hay que ir
   cruzando la vista para leer la fila. Se alinean los dos a la izquierda; las cifras
   van en tabular-nums, así que siguen cuadrando en columna.

   Se hace desde aquí y no fichero a fichero para que valga en las ~20 pantallas de
   golpe y para que una tabla nueva que copie el patrón de otra herede el criterio.
   Las celdas con colspan quedan fuera: ahí `text-right` no alinea una cifra, pega el
   rótulo de un total a la cifra que tiene al lado, y a la izquierda se despegaría. */
table th.text-right:not([colspan]),
table td.text-right:not([colspan]),
table th.col-num,
table td.col-num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* ── Columnas que miden lo que su contenido ─────────────────────────────────
   Las tablas son width:100% y en auto-layout el sitio que sobra se reparte entre TODAS
   las columnas: una cifra de 9 caracteres acababa en una columna de 250 px mientras el
   texto largo de al lado (el concepto de una factura) se partía a una palabra por
   renglón. `width:1%` pide el mínimo y `nowrap` hace que ese mínimo sea la cifra entera;
   el sobrante se lo quedan las columnas sin la clase, que son las de texto. */
table th.col-ajustada,
table td.col-ajustada {
  width: 1%;
  white-space: nowrap;
}

/* Tablas con muchas columnas de cifras (MAC's · Facturación): menos relleno lateral para
   que quepan sin scroll horizontal. Solo el lateral: la altura de fila no cambia. */
table.lovek-table.tabla-densa th,
table.lovek-table.tabla-densa td {
  padding-left: .55rem;
  padding-right: .55rem;
}

/* ── Pie de totales ────────────────────────────────────────────────────────
   La fila de totales tiene que cantar sin leerla: línea gruesa de acento que la
   separa del cuerpo, fondo propio y una sombra interior que la hunde un poco
   respecto a las filas de datos. js/table-sort.js solo ordena el <tbody>, así que
   el pie nunca se mueve al ordenar por una cabecera. */
table tfoot td,
table tfoot th {
  border-top: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border-card));
  border-bottom: none;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-surface));
  box-shadow: inset 0 9px 12px -11px rgba(0, 0, 0, .85);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
table tfoot tr:hover { background: transparent; }

/* ── Marca LØVEK (wordmark de texto) ──
   Sustituto provisional del logo: lo pinta brandMark() de js/brand.js. Ocupa el mismo hueco
   que tenía la imagen (42px de alto en el menú, 48px en el acceso). Cuando lleguen los logos
   reales se rellenan en BRAND y esta clase deja de usarse. */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}
.brand-wordmark--sidebar { height: 42px; font-size: 1.55rem; }
.brand-wordmark--login   { height: 48px; font-size: 2.1rem; justify-content: center; }