/* ============================================================================
   dlab-tokens.css — FUENTE ÚNICA de color de DLAB CRM
   ----------------------------------------------------------------------------
   Toda la uniformidad visual se lee desde aquí. Regla dura (ver skill
   .opencode/skills/paleta-dlab/SKILL.md): prohibido introducir hex/rgb()
   literales o clases bg-[#...] en templates, CSS o JS. Todo color vía
   var(--*) o clase dlab-* de Tailwind (mapeadas a estos tokens).

   Tema claro = valores canónicos actuales.
   Tema oscuro = fusión reporte Power BI (fondo #14181C, tarjeta #1C2228,
   azul #5B8DBE, lima #B5D334, ámbar #D9A441, rojo #C4574B).
   Se activa con <html data-theme="dark"> (ver static/js/dlab-theme.js).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca */
  --primary: #0B3D4E;
  --primary-dark: #082e3a;
  --primary-light: #1a5570;
  --accent: #B4E600;
  --accent-dark: #8fb500;
  --cyan: #3FA9C9;
  --cyan-light: #e0f5fd;

  /* Semánticos */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;

  /* Tonos auxiliares (tarjetas de aviso, gráficos y tooltips) */
  --tooltip-bg: #0f172a;
  --tooltip-fg: #ffffff;
  --warning-suave: #fffbeb;
  --danger-vivo: #ef4444;
  --chart-positive: #10b981;
  --chart-negative: #ef4444;

  /* Superficies y texto (claro) */
  --bg: #F5F5F0;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  /* Texto sobre colores de marca (contraste garantizado en claro) */
  --on-primary: #ffffff;
  --on-accent: #0B3D4E;

  /* Pastilla clara fija tras el logo de la empresa (logos oscuros sobre
     fondo transparente): NO cambia con el tema, siempre blanca. */
  --logo-chip: #ffffff;

  /* Componentes */
  --input-bg: #f8fafc;
  --table-head-bg: #f8fafc;
  --table-head-text: #64748b;
  --table-row-hover: rgba(0, 0, 0, 0.02);
  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-text: #475569;
  --nav-text-hover: #1e293b;
  --nav-active-bg: rgba(0, 200, 255, 0.1);
  --nav-active-glow: rgba(0, 200, 255, 0.4);
  --nav-active-text: #0088aa;
  --skeleton-1: #f1f5f9;
  --skeleton-2: #e2e8f0;
  --overlay: rgba(8, 22, 29, 0.5);
  --scroll-shadow: rgba(15, 23, 42, 0.13);
  --scroll-shadow-suave: rgba(15, 23, 42, 0.11);

  /* Badges claros */
  --badge-green-bg: #dcfce7;  --badge-green-fg: #166534;
  --badge-amber-bg: #fef3c7;  --badge-amber-fg: #92400e;
  --badge-red-bg: #fee2e2;    --badge-red-fg: #991b1b;
  --badge-blue-bg: #e0f5fd;   --badge-blue-fg: #0369a1;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 4px 24px rgba(11,61,78,.12);
  --shadow-lg: 0 12px 40px rgba(11,61,78,.18);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Marca adaptada a fondo oscuro (del tema Power BI) */
  --primary: #5B8DBE;
  --primary-dark: #3d6a94;
  --primary-light: #8fb4d4;
  --accent: #B5D334;
  --accent-dark: #93ad27;
  --cyan: #5B8DBE;
  --cyan-light: #24404f;

  --success: #4ade80;
  --warning: #D9A441;
  --danger: #C4574B;
  --info: #7aa7e8;
  --tooltip-bg: #0b0f13;
  --tooltip-fg: #e4ebf0;
  --warning-suave: rgba(217, 164, 65, 0.10);
  --danger-vivo: #C4574B;
  --chart-positive: #4ade80;
  --chart-negative: #C4574B;

  --bg: #14181C;
  --surface: #1C2228;
  --surface-2: #232b33;
  --surface-3: #2b343e;
  --border: #33404c;
  --border-strong: #46566a;
  --text-1: #e4ebf0;
  --text-2: #b0bdc8;
  --text-3: #8a98a5;

  --on-primary: #10181d;
  --on-accent: #14181C;

  /* Pastilla clara fija tras el logo de la empresa: igual que en claro. */
  --logo-chip: #ffffff;

  --input-bg: #232b33;
  --table-head-bg: #232b33;
  --table-head-text: #9fb0bd;
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --nav-bg: rgba(20, 24, 28, 0.72);
  --nav-text: #b6c2cc;
  --nav-text-hover: #eef3f6;
  --nav-active-bg: rgba(91, 141, 190, 0.18);
  --nav-active-glow: rgba(91, 141, 190, 0.45);
  --nav-active-text: #8fb4d4;
  --skeleton-1: #232b33;
  --skeleton-2: #2b343e;
  --overlay: rgba(0, 0, 0, 0.62);
  --scroll-shadow: rgba(0, 0, 0, 0.55);
  --scroll-shadow-suave: rgba(0, 0, 0, 0.45);

  --badge-green-bg: rgba(74, 222, 128, 0.14);  --badge-green-fg: #4ade80;
  --badge-amber-bg: rgba(217, 164, 65, 0.16);  --badge-amber-fg: #D9A441;
  --badge-red-bg: rgba(196, 87, 75, 0.16);     --badge-red-fg: #e88a7f;
  --badge-blue-bg: rgba(91, 141, 190, 0.18);   --badge-blue-fg: #8fb4d4;

  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --shadow-md: 0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}

/* ── Overrides de vendor y chrome global en oscuro ─────────────────────── */
/* Logo de la empresa con variante para modo oscuro: la principal (sobre su pastilla
   clara) en tema claro; la de modo oscuro, sin pastilla, en tema oscuro. */
.logo-tema-oscuro { display: none; }
[data-theme="dark"] .logo-tema-claro { display: none; }
[data-theme="dark"] .logo-tema-oscuro { display: block; }

[data-theme="dark"] body { background: var(--bg); color: var(--text-1); }
[data-theme="dark"] .top-navbar { background: var(--nav-bg); border-bottom-color: var(--border); }
[data-theme="dark"] .nav-link { color: var(--nav-text); }
[data-theme="dark"] .nav-link:hover:not(.active) { background: rgba(255,255,255,.06); color: var(--nav-text-hover); }
[data-theme="dark"] .nav-link.active {
  background-color: var(--nav-active-bg);
  box-shadow: 0 0 10px var(--nav-active-glow), inset 0 0 5px var(--nav-active-glow);
  color: var(--nav-active-text);
}
[data-theme="dark"] .hamburger-btn span { background: var(--text-2); }
[data-theme="dark"] .hamburger-btn:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .nav-center-scroll { background: transparent; }
@media (max-width: 1023px) {
  [data-theme="dark"] .nav-center-scroll { background: var(--surface); border-bottom-color: var(--border); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  [data-theme="dark"] .nav-dropdown-menu { background: rgba(255,255,255,.04) !important; border-left-color: var(--border) !important; }
}
[data-theme="dark"] .nav-scroll-arrow { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
[data-theme="dark"] .nav-scroll-arrow:hover { background: var(--surface-3); color: var(--nav-active-text); }
[data-theme="dark"] .btn-outline-salir { border-color: var(--border-strong); color: var(--text-2); }
[data-theme="dark"] .btn-outline-salir:hover { background: rgba(255,255,255,.06); color: var(--text-1); }

/* DataTables */
[data-theme="dark"] table.dataTable thead th { background: var(--table-head-bg); color: var(--table-head-text); border-bottom-color: var(--border); }
[data-theme="dark"] table.dataTable tbody td { color: var(--text-2); border-color: var(--border); }
[data-theme="dark"] table.dataTable tbody tr { background: transparent; }
[data-theme="dark"] table.dataTable tbody tr:hover { background-color: var(--table-row-hover) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--input-bg); border-color: var(--border-strong); color: var(--text-1); }
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--text-3); }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--text-3) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-2) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-1) !important; }
[data-theme="dark"] .dataTables_processing { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; }

/* Select2 */
[data-theme="dark"] .select2-container .select2-selection--single { background: var(--input-bg); border-color: var(--border-strong); }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-1); }
[data-theme="dark"] .select2-dropdown { background: var(--surface); border-color: var(--border-strong); }
[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--text-2); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background: var(--surface-3); color: var(--text-1); }
[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--input-bg); border-color: var(--border-strong); color: var(--text-1); }

/* SweetAlert2 */
[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--text-1) !important; }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--text-1) !important; }
[data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select { background: var(--input-bg) !important; border-color: var(--border-strong) !important; color: var(--text-1) !important; }

/* Formularios, botones y badges del chrome de base.html */
[data-theme="dark"] .field-input { background: var(--input-bg); border-color: var(--border-strong); color: var(--text-1); }
[data-theme="dark"] .btn-action-outline { border-color: var(--border-strong); color: var(--text-2); }
[data-theme="dark"] .btn-action-outline:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--text-3); }
[data-theme="dark"] .btn-action-solid { background: var(--primary); color: var(--on-primary); }
/* Botones de marca: fondo medio (azul) siempre con tinta oscura en oscuro */
[data-theme="dark"] .bg-dlab-primary.text-white,
[data-theme="dark"] .bg-dlab-cyan.text-white,
[data-theme="dark"] .btn-action-solid.text-white { color: var(--on-primary) !important; }
[data-theme="dark"] .btn-action-solid:hover { background: var(--primary-light); }
[data-theme="dark"] .btn-auditoria-outline { border-color: var(--border-strong); color: var(--text-2); }
[data-theme="dark"] .btn-auditoria-outline:hover { background: var(--surface-3); color: var(--text-1); }
[data-theme="dark"] .badge-aprobado { background: var(--badge-green-bg); color: var(--badge-green-fg); }
[data-theme="dark"] .badge-proceso { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
[data-theme="dark"] .badge-rechazado { background: var(--badge-red-bg); color: var(--badge-red-fg); }
[data-theme="dark"] .table-icon-btn { color: var(--text-3); }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--skeleton-1) 25%, var(--skeleton-2) 50%, var(--skeleton-1) 75%); background-size: 200% 100%; }
[data-theme="dark"] footer { background: var(--surface) !important; border-color: var(--border) !important; }

/* Campos de formulario que usaban #fff literal en foco */
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus { background: var(--surface); }
/* Toasts: fondo semántico claro en dark → texto oscuro */
[data-theme="dark"] .toast { color: #10181d; }
/* Peligro en hover usa --danger (tono medio en dark): texto oscuro legible */
[data-theme="dark"] .btn-danger:hover { color: #10181d; }

/* ── Capa de compatibilidad: clases Tailwind fijas de plantillas antiguas ───
   Muchas pantallas (Dashboard, Leads, Marketing, Configuración, Tablas…) aún
   usan bg-white / text-slate-* / border-slate-* literales que NO leen tokens y
   en oscuro dejaban tarjetas blancas y títulos invisibles. Aquí se remapean a
   tokens (fuente única) sin tocar cada plantilla; al migrar una plantilla a
   tokens estas reglas simplemente dejan de aplicarle. */
/* superficies */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="bg-white"],
[data-theme="dark"] [class~="bg-white/95"], [data-theme="dark"] [class~="bg-white/90"],
[data-theme="dark"] [class~="bg-white/80"], [data-theme="dark"] [class~="bg-white/70"],
[data-theme="dark"] [class~="bg-white/60"], [data-theme="dark"] [class~="bg-white/50"] { background-color: var(--surface) !important; color: var(--text-1) !important; }
[data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-gray-50,
[data-theme="dark"] [class~="bg-slate-50/50"], [data-theme="dark"] [class~="bg-slate-50/60"], [data-theme="dark"] [class~="bg-slate-50/70"], [data-theme="dark"] [class~="bg-slate-50/80"] { background-color: var(--surface-2); }
[data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-100 { background-color: var(--surface-3); }
[data-theme="dark"] .bg-slate-200, [data-theme="dark"] .bg-gray-200 { background-color: var(--border); }
[data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .hover\:bg-slate-100:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-3); }
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--surface-2); }
/* fondos tintados (avisos y estados) → badges semánticos */
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-100, [data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] [class~="bg-amber-50/30"], [data-theme="dark"] [class~="bg-amber-100/50"],
[data-theme="dark"] .bg-yellow-100, [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-100 { background-color: var(--badge-amber-bg); }
[data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100, [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100 { background-color: var(--badge-red-bg); }
[data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-green-100, [data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] [class~="bg-emerald-50/50"], [data-theme="dark"] [class~="bg-emerald-50/40"], [data-theme="dark"] [class~="bg-emerald-50/30"],
[data-theme="dark"] .bg-emerald-100, [data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100 { background-color: var(--badge-green-bg); }
[data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-100, [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-100,
[data-theme="dark"] .bg-cyan-50, [data-theme="dark"] .bg-cyan-100, [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100, [data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-100 { background-color: var(--badge-blue-bg); }
/* texto */
[data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-black { color: var(--text-1); }
[data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 { color: var(--text-2); }
[data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-slate-300,
[data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400 { color: var(--text-3); }
[data-theme="dark"] .hover\:text-slate-900:hover, [data-theme="dark"] .hover\:text-slate-800:hover,
[data-theme="dark"] .hover\:text-slate-700:hover { color: var(--text-1); }
[data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900, [data-theme="dark"] .text-yellow-700, [data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-orange-600, [data-theme="dark"] .text-orange-700 { color: var(--badge-amber-fg); }
[data-theme="dark"] .text-red-500, [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800, [data-theme="dark"] .text-red-900, [data-theme="dark"] .text-rose-800, [data-theme="dark"] .text-rose-900, [data-theme="dark"] .text-rose-500, [data-theme="dark"] .text-rose-600, [data-theme="dark"] .text-rose-700 { color: var(--badge-red-fg); }
[data-theme="dark"] .text-green-600, [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-teal-600, [data-theme="dark"] .text-teal-700 { color: var(--badge-green-fg); }
[data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-sky-600, [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700, [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-purple-600, [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-violet-600 { color: var(--badge-blue-fg); }
/* bordes y divisores */
[data-theme="dark"] .border-slate-50, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200 { border-color: var(--border); }
[data-theme="dark"] .border-slate-300, [data-theme="dark"] .border-gray-300 { border-color: var(--border-strong); }
[data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-300, [data-theme="dark"] .border-yellow-200 { border-color: var(--warning); }
[data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-300 { border-color: var(--danger); }
[data-theme="dark"] .border-green-200, [data-theme="dark"] .border-emerald-200 { border-color: var(--success); }
[data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-sky-200, [data-theme="dark"] .border-indigo-200 { border-color: var(--info); }
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
/* controles de formulario sin token propio */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--input-bg); color: var(--text-1); border-color: var(--border-strong); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-3); }
[data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] textarea:disabled { opacity: .6; }
/* menú desplegable de la barra y pestañas */
[data-theme="dark"] .nav-dropdown-menu { background-color: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .nav-dropdown-item { color: var(--text-2); }
[data-theme="dark"] .nav-dropdown-item:hover, [data-theme="dark"] .nav-dropdown-item.active { background-color: var(--nav-active-bg); color: var(--nav-active-text); }
[data-theme="dark"] .t-tab { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
[data-theme="dark"] .t-tab:hover { background: var(--border); color: var(--text-1); }
[data-theme="dark"] .t-tab.activa { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* DataTables: etiquetas «Mostrar N registros» / «Buscar» heredaban texto oscuro */
[data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_wrapper label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--text-2); }
[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: var(--border); }
/* Botones ámbar de Tailwind: texto claro sobre ámbar medio no llega a contraste; en oscuro, ámbar del tema + texto oscuro */
[data-theme="dark"] .bg-amber-500, [data-theme="dark"] .bg-amber-600,
[data-theme="dark"] .hover\:bg-amber-600:hover, [data-theme="dark"] .hover\:bg-amber-700:hover { background-color: var(--warning); color: var(--on-primary); }
/* Reportería → Tablas (tablas_consolidadas.css con colores fijos) */
[data-theme="dark"] .tc { --tc-borde: var(--border); --tc-suave: var(--surface-2); --tc-txt: var(--text-1); --tc-mut: var(--text-3); }
[data-theme="dark"] .tc-filtros input, [data-theme="dark"] .tc-filtros select { background: var(--input-bg); border-color: var(--border-strong); color: var(--text-1); }
[data-theme="dark"] .tc-atajo, [data-theme="dark"] .tk, [data-theme="dark"] .tc-panel { background: var(--surface); }
[data-theme="dark"] .tc-atajo, [data-theme="dark"] .tc-chip { color: var(--text-2); }
[data-theme="dark"] .tc-atajo:hover { background: var(--surface-3); }
[data-theme="dark"] #t-foot td { background: var(--surface-3); border-top-color: var(--border-strong); color: var(--text-1); }
[data-theme="dark"] .vacio { color: var(--text-3); }

/* Botones «oscuros» (slate-900/800) se fundían con el fondo oscuro: en oscuro usan el primario del tema.
   Solo botones/enlaces; las cajas de código/log con bg-slate-900 se quedan oscuras. */
[data-theme="dark"] button.bg-slate-900, [data-theme="dark"] a.bg-slate-900,
[data-theme="dark"] button.bg-slate-800, [data-theme="dark"] a.bg-slate-800,
[data-theme="dark"] button.bg-dlab-primary, [data-theme="dark"] a.bg-dlab-primary { background-color: var(--primary); color: var(--on-primary); }
[data-theme="dark"] button.hover\:bg-slate-800:hover, [data-theme="dark"] a.hover\:bg-slate-800:hover,
[data-theme="dark"] button.hover\:bg-slate-900:hover, [data-theme="dark"] a.hover\:bg-slate-900:hover { background-color: var(--primary-light); }
[data-theme="dark"] button.bg-slate-900 *, [data-theme="dark"] button.bg-slate-800 * { color: inherit; }

/* Toggle sol/luna */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9999px; border: 1px solid var(--border);
  background: transparent; color: var(--nav-text); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(127,127,127,.12); color: var(--nav-text-hover); }
.theme-toggle i { font-size: 1.25rem; line-height: 1; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* iOS Safari: los campos de fecha/hora tienen ancho propio y desbordaban su celda de grid/flex (se pisaban
   «Desde» y «Hasta», sobre todo vacíos). Se acotan a su celda y se les da una altura mínima legible. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 2.5rem;
  -webkit-appearance: none; appearance: none;
}
:is(.grid, .flex) > :has(> input[type="date"], > input[type="datetime-local"], > input[type="time"], > input[type="month"]) { min-width: 0; }