/* =============================================================
   UNIKO 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.uniko-table { width: 100%; border-collapse: collapse; }
table.uniko-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.uniko-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
  font-size: 0.875rem;
  color: var(--text-primary);
}
table.uniko-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.uniko-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.uniko-table tfoot td,
.ct-scroll table.uniko-table tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* ── 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.uniko-table th,
  table.uniko-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.uniko-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.uniko-table td { padding: .72rem .9rem; border-bottom: 1px solid var(--border-color); }
table.uniko-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 .uniko-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 booker).
   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.uniko-table.tabla-densa th,
table.uniko-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; }

/* ── Hojas de Confirmación: facturas vencidas del cliente ──
   El pie de totales sigue destacado, como en todo el panel, pero en el rojo del aviso: la
   franja de acento azul dentro del recuadro rojo parecía otro bloque. */
table.hc-deuda th,
table.hc-deuda td { padding-left: .5rem; }
table.hc-deuda tfoot td {
  border-top-color: color-mix(in srgb, #ef4444 60%, transparent);
  background: color-mix(in srgb, #ef4444 16%, var(--bg-surface));
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* ── Hojas de Confirmación: las fechas de trabajo ── */
/*
   Desde 2026-09-23 las fechas se escriben a mano en un campo de texto normal (lo que se
   imprime) más un input[type=date] OPCIONAL para la fecha de alerta del semáforo. El
   calendario propio quedó DESACTIVADO —comentado en dashboard/js/hojas-confirmacion.js—;
   `.hc-fecha` y `.hc-cal*` se conservan por si algún día se vuelve a él.

   El date de alerta usa un selector nativo: `color-scheme` decide si sus partes (los dígitos y
   el icono del calendario) se pintan claras u oscuras. El tema por defecto es oscuro, así que
   la base va en `dark` y solo los temas claros lo bajan a `light`. Así el control nativo es
   legible en cualquier tema.
*/
.hc-fecha { cursor: pointer; user-select: none; }

.hc-fecha-alerta { color-scheme: dark; }
[data-theme="clean-canvas"]   .hc-fecha-alerta,
[data-theme="soft-cream-sage"] .hc-fecha-alerta,
[data-theme="corporate-ocean"] .hc-fecha-alerta,
[data-theme="minimalist-sand"] .hc-fecha-alerta,
[data-theme="lavender-mist"]  .hc-fecha-alerta,
[data-theme="daylight-glass"] .hc-fecha-alerta { color-scheme: light; }

/* El resto del panel esconde el indicador nativo del date y pinta su propio icono llamando a
   showPicker() (ver la regla de arriba). Aquí, al ser un campo OPCIONAL y secundario, se deja el
   indicador NATIVO: es lo más simple, siempre hay una forma visible de abrir el calendario y se
   evita el problema de `showPicker()` en focus (rompe el blur del campo de al lado). El selector
   es más específico que la regla global para poder ganarle. */
input[type="date"].hc-fecha-alerta::-webkit-calendar-picker-indicator {
  display: block;
  opacity: .7;
  cursor: pointer;
}

.hc-cal {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 4px);
  width: 268px;
  max-width: calc(100vw - 2rem);
  padding: .6rem;
  border-radius: .75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  user-select: none;   /* arrastrar para coger un rango no puede seleccionar el texto */
}
/* Cuando la fila cae al final de la pantalla, el calendario abre hacia arriba. */
.hc-cal.arriba { top: auto; bottom: calc(100% + 4px); }

.hc-cal-cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.hc-cal-titulo { font-size: .8rem; font-weight: 600; color: var(--text-primary); }
.hc-cal-nav {
  width: 1.6rem; height: 1.6rem; border: 0; border-radius: .4rem;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.hc-cal-nav:hover { background: var(--bg-hover); color: var(--text-primary); }

.hc-cal-sem, .hc-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.hc-cal-sem {
  font-size: .62rem; text-transform: uppercase; text-align: center;
  color: var(--text-muted); margin-bottom: .2rem;
}
/* Sin hueco entre columnas: los días de un rango tienen que verse como una barra seguida. */
.hc-cal-rejilla { row-gap: 2px; column-gap: 0; }

.hc-cal-dia {
  height: 2rem; border: 0; border-radius: .45rem;
  background: transparent; color: var(--text-primary);
  font-size: .78rem; cursor: pointer;
  /* El panel entero funde los fondos en 0,25 s (ver la regla global de más arriba). Aquí eso
     va en contra: arrastrando para coger un rango, los días se irían pintando medio segundo
     por detrás del ratón y el gesto parece que no responde. */
  transition: background-color .07s linear;
}
.hc-cal-dia:hover { background: var(--bg-hover); }
.hc-cal-dia.hoy:not(.sel) { color: var(--accent); font-weight: 600; }
/* Los días elegidos van a escuadra y solo los extremos de cada racha redondean: un rango
   queda como una barra continua y un día suelto como una pastilla. */
.hc-cal-dia.sel { background: var(--accent); color: #fff; border-radius: 0; }
.hc-cal-dia.sel:hover { filter: brightness(1.1); }
.hc-cal-dia.sel-ini { border-top-left-radius: .45rem; border-bottom-left-radius: .45rem; }
.hc-cal-dia.sel-fin { border-top-right-radius: .45rem; border-bottom-right-radius: .45rem; }

.hc-cal-pie {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--border);
}
.hc-cal-texto {
  font-size: .68rem; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-cal-borrar {
  flex: 0 0 auto; padding: .1rem .35rem; border: 0; border-radius: .3rem;
  background: none; color: var(--text-muted); font-size: .68rem; cursor: pointer;
}
.hc-cal-borrar:hover { color: #f87171; background: color-mix(in srgb, #ef4444 12%, transparent); }
.hc-cal-ayuda { margin: .35rem 0 0; font-size: .62rem; line-height: 1.25; color: var(--text-muted); }

/* ── Hojas de Confirmación: el aviso de la cabecera ── */
/*
   La X que cierra el aviso hasta mañana (ver updateHcAviso en layout.js). El color lo pone el
   propio aviso en línea, porque es el naranja que lo distingue del de walk-ins; aquí solo va
   lo que un atributo `style` no puede hacer: reaccionar al ratón.
*/
#hcAvisoCerrar:hover { background: color-mix(in srgb, #f97316 20%, transparent) !important; }
#hcAvisoCerrar:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; }

/* ── Hojas de Confirmación: «Otras tarifas» ── */
/*
   Un enlace, no un botón: desplegar los conceptos que casi ninguna hoja usa (derechos,
   travel/down days, fitting) no es una acción del formulario, es enseñar lo que ya estaba
   ahí. Con aspecto de botón competiría con «Añadir modelo» y «Quitar», que sí lo son.
*/
.hc-extras-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .15rem 0; border: 0; background: none;
  color: var(--text-muted); font-size: .72rem; cursor: pointer;
}
.hc-extras-link:hover { color: var(--accent); }
.hc-extras-link i { font-size: .6rem; width: .6rem; }
/* Cuántos hay puestos. Se ve con la línea plegada: si no, un modelo que cobra derechos
   parecería no cobrarlos. */
.hc-extras-cuenta {
  display: inline-block; min-width: 1rem; padding: 0 .3rem;
  border-radius: .6rem; background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); font-size: .62rem; font-weight: 600; text-align: center;
}

/* ── Hojas de Confirmación: la columna de acciones no se va con el scroll ── */
/*
   El listado tiene diez columnas y en pantallas medianas no caben: la tarjeta hace scroll
   horizontal (overflow-x-auto) y los botones de la derecha quedaban fuera de la vista, que es
   justo lo que hay que poder pulsar. Anclando esa columna al borde derecho se ven siempre, se
   desplace lo que se desplace lo demás.

   Necesita fondo propio —si no, el texto de las columnas de al lado se le ve por debajo al
   pasar— y una sombra que insinúe que ahí sigue habiendo tabla.
*/
.hc-tabla th.hc-acciones,
.hc-tabla td.hc-acciones {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-card);
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .45);
}