/* ═══════════════════════════════════════════════════════════════════════
   DARK SPACE PROFESIONAL — Rediseño global (2026-05-20)
   Glassmorphism + paleta espacial profunda. Cargado después de premium.css.

   Filosofía:
   - Fondo: degradado azul espacio profundo a negro.
   - Contenedores: vidrio oscuro translúcido con bordes finos brillantes.
   - Tipografía: blanco puro / gris plata para máximo contraste.
   - Sidebar y navbar con backdrop-filter: blur para efecto cristal.
   - Acentos morados translúcidos para alertas/modales high-tech.

   Pensado para coexistir con el sistema de temas dinámicos (--t-primary).
   ═══════════════════════════════════════════════════════════════════════ */

/* ════ Variables del Dark Space ════ */
:root {
  --ds-bg-start:      #0f172a;            /* azul espacio profundo */
  --ds-bg-end:        #020617;            /* casi negro */
  --ds-surface:       rgba(30, 41, 59, 0.72);
  --ds-surface-solid: #1e293b;
  --ds-surface-deep:  rgba(15, 23, 42, 0.85);
  --ds-border:        rgba(255, 255, 255, 0.10);
  --ds-border-bright: rgba(255, 255, 255, 0.18);
  --ds-text-primary:  #f8fafc;            /* blanco puro */
  --ds-text-secondary:#cbd5e1;            /* gris plata */
  --ds-text-muted:    #94a3b8;            /* gris medio */
  --ds-text-dim:      #64748b;            /* gris apagado */

  --ds-accent-purple:        rgba(124, 58, 237, 0.30);
  --ds-accent-purple-bright: rgba(167, 139, 250, 0.55);
  --ds-accent-purple-solid:  #7c3aed;
}

/* ════ Body: fondo espacial ════ */
html, body {
  background: linear-gradient(135deg, var(--ds-bg-start) 0%, var(--ds-bg-end) 100%) !important;
  background-attachment: fixed !important;
  color: var(--ds-text-primary) !important;
}

/* Anula clases Tailwind del body (bg-gradient-to-br from-slate-50, etc.) */
body.bg-gradient-to-br,
body[class*="from-slate-50"],
body[class*="via-white"] {
  background: linear-gradient(135deg, var(--ds-bg-start) 0%, var(--ds-bg-end) 100%) !important;
}

/* Ambient lighting morado/azul muy sutil (sustituye el body::before original) */
body::before {
  background:
    radial-gradient(at 15% 5%, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(at 85% 95%, rgba(6, 182, 212, 0.12), transparent 50%),
    radial-gradient(at 50% 50%, rgba(99, 102, 241, 0.08), transparent 60%) !important;
}

/* ════ Sidebar: vidrio oscuro translúcido ════ */
aside.bg-slate-900 {
  background: var(--sb-bg, rgba(15, 23, 42, 0.65)) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border-right: 1px solid var(--sb-border, var(--ds-border)) !important;
}
aside.bg-slate-900 .border-b {
  border-bottom-color: var(--ds-border) !important;
}

/* Navbar */
nav.bg-white\/80 {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
nav.bg-white\/80 .text-slate-600,
nav.bg-white\/80 .text-slate-700,
nav.bg-white\/80 .text-slate-800,
nav.bg-white\/80 .text-slate-900 {
  color: var(--ds-text-secondary) !important;
}
nav.bg-white\/80 button:hover,
nav.bg-white\/80 a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--ds-text-primary) !important;
}

/* Logo del ERP dentro del navbar/sidebar */
.erp-logo-text {
  color: var(--ds-text-primary) !important;
}

/* ════ Contenedores: tarjeta dark + borde brillante ════
   Esta regla redefine los bloques blancos típicos (bg-white, bg-white/X). */
.bg-white,
.bg-white\/60,
.bg-white\/70,
.bg-white\/80,
.bg-white\/90,
.bg-slate-50,
.bg-slate-100 {
  background: var(--ds-surface) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-color: var(--ds-border) !important;
  color: var(--ds-text-primary) !important;
}

/* shadow-md / rounded-lg de Tailwind: refuerzan look limpio */
.bg-white.shadow,
.bg-white.shadow-md,
.bg-white.shadow-lg,
.bg-white.shadow-xl {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 8px 32px -8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ds-border-bright) !important;
}

/* ════ Tablas ════ */
table thead {
  background: rgba(15, 23, 42, 0.6) !important;
}
table thead th,
.text-slate-500,
.text-slate-600 {
  color: var(--ds-text-muted) !important;
}
table tbody {
  background: transparent !important;
}
table tbody tr {
  border-color: var(--ds-border) !important;
}
table tbody td,
table tbody th {
  color: var(--ds-text-secondary) !important;
  border-color: var(--ds-border) !important;
}
table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.divide-slate-100 > * + *,
.divide-slate-200 > * + * {
  border-color: var(--ds-border) !important;
}

/* ════ Headings: blanco puro ════ */
h1, h2, h3, h4, h5, h6,
.text-slate-700,
.text-slate-800,
.text-slate-900 {
  color: var(--ds-text-primary) !important;
}

/* Texto cuerpo y descripciones */
.text-slate-400 { color: var(--ds-text-muted) !important; }
.text-slate-300 { color: var(--ds-text-secondary) !important; }

/* ════ Inputs / selects / textareas dark ════ */
/* Sin línea/borde visible en reposo (se veía recargado/antiestético): los
   campos se definen por su fondo relleno. El borde aparece SOLO al enfocar. */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea, .input-field,
.fl > input, .fl > select, .fl > textarea {
  background: rgba(15, 23, 42, 0.55) !important;
  color: var(--ds-text-primary) !important;
  border-color: transparent !important;
}
input::placeholder, textarea::placeholder { color: var(--ds-text-dim) !important; }
.fl > span {
  color: var(--ds-text-muted) !important;
  background: linear-gradient(180deg, transparent 40%, var(--ds-surface-solid) 40%) !important;
}
.fl > input:focus + span,
.fl > input:not(:placeholder-shown) + span,
.fl > select:focus + span,
.fl > select:valid + span,
.fl > textarea:focus + span,
.fl > textarea:not(:placeholder-shown) + span {
  color: rgb(167, 139, 250) !important;  /* morado claro al enfocar */
}
input:focus, select:focus, textarea:focus, .input-field:focus {
  border-color: var(--ds-accent-purple-bright) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20) !important;
  background: rgba(15, 23, 42, 0.85) !important;
}

/* Select autocomplete dark — Chrome */
select option { background: var(--ds-surface-solid); color: var(--ds-text-primary); }

/* ════ Botones primarios — mantener color del tema con borde brillante ════ */
.bg-emerald-600, .bg-emerald-500 {
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
.bg-blue-600, .bg-indigo-600 {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}
.bg-rose-600 {
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.35);
}

/* ════ Mensajes flash / messages framework ════ */
.bg-emerald-50  { background: rgba(16, 185, 129, 0.12) !important; color: #6ee7b7 !important; }
.bg-rose-50,
.bg-rose-50\/90,
.bg-rose-50\/80,
.bg-rose-50\/70,
.bg-rose-50\/60,
.bg-rose-50\/50 { background: rgba(244, 63, 94, 0.14) !important; color: #fda4af !important; }
.bg-amber-50    { background: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; }
.bg-blue-50     { background: rgba(59, 130, 246, 0.12) !important; color: #93c5fd !important; }
.bg-indigo-50   { background: rgba(99, 102, 241, 0.12) !important; color: #c7d2fe !important; }
.border-emerald-200 { border-color: rgba(16, 185, 129, 0.30) !important; }
.border-rose-200    { border-color: rgba(244, 63, 94, 0.30) !important; }
.border-amber-200   { border-color: rgba(245, 158, 11, 0.30) !important; }
.border-blue-200    { border-color: rgba(59, 130, 246, 0.30) !important; }
.border-indigo-200  { border-color: rgba(99, 102, 241, 0.30) !important; }
.text-emerald-700, .text-emerald-800 { color: #6ee7b7 !important; }
.text-rose-700, .text-rose-800, .text-rose-900 { color: #fda4af !important; }
.text-amber-700, .text-amber-800     { color: #fcd34d !important; }
.text-blue-700, .text-blue-800       { color: #93c5fd !important; }
.text-indigo-700, .text-indigo-800   { color: #c7d2fe !important; }

/* ════ Centro de Alertas / Modales (panel flotante morado tech) ════
   Selectores típicos: clases que contienen 'modal', 'alert-panel', 'centro-alertas'
   y los popups Alpine con bg-violet/purple ya existentes. */
[role="dialog"],
.modal,
.alert-panel,
.bg-violet-600,
.bg-purple-600,
.bg-purple-500,
.bg-violet-500,
.notifications-panel,
.centro-alertas {
  background: var(--ds-accent-purple) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border: 1px solid var(--ds-accent-purple-bright) !important;
  color: var(--ds-text-primary) !important;
  box-shadow:
    0 16px 64px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
[role="dialog"] *, .modal *, .alert-panel *,
.notifications-panel *, .centro-alertas * {
  color: var(--ds-text-primary);
}

/* Backdrop tras el modal */
.modal-backdrop,
[role="dialog"] ~ .backdrop,
.fixed.inset-0.bg-black {
  background: rgba(2, 6, 23, 0.65) !important;
  backdrop-filter: blur(4px);
}

/* ════ Footer y bordes inferiores ════ */
footer.bg-white\/60 {
  background: rgba(15, 23, 42, 0.6) !important;
  border-top-color: var(--ds-border) !important;
  color: var(--ds-text-muted) !important;
}
.border-slate-100,
.border-slate-200,
.border-slate-300 {
  border-color: var(--ds-border) !important;
}

/* Hover de cards */
.card-premium,
.card-premium.glass {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-bright) !important;
  color: var(--ds-text-primary) !important;
}
.card-premium:hover {
  border-color: var(--ds-accent-purple-bright) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 24px 64px -10px rgba(124, 58, 237, 0.30) !important;
}

/* Scrollbars dark space */
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(124, 58, 237, 0.6)) !important;
  border: 2px solid rgba(15, 23, 42, 0.6) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.9), rgba(124, 58, 237, 0.9)) !important;
}
* { scrollbar-color: rgba(124, 58, 237, 0.5) rgba(15, 23, 42, 0.6) !important; }

/* Glass mode local clases (premium.css define .glass para fondo claro;
   aquí lo redefinimos para fondo oscuro). */
.glass,
.bg-white\/80.backdrop-blur-lg {
  background: var(--ds-surface) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid var(--ds-border-bright) !important;
  color: var(--ds-text-primary) !important;
}

/* Misc: chips, badges, tags */
.bg-slate-100.text-slate-700 { background: rgba(148, 163, 184, 0.12) !important; color: var(--ds-text-secondary) !important; }
.bg-slate-200 { background: rgba(148, 163, 184, 0.18) !important; color: var(--ds-text-secondary) !important; }

/* Links sin override anteriormente */
a.text-blue-600,
a.text-blue-700,
a.text-indigo-600,
a.text-indigo-700 { color: #93c5fd !important; }

/* Toasts (.toast .glass .bg-white) */
.toast .bg-white { background: var(--ds-surface) !important; }
.toast p { color: var(--ds-text-primary) !important; }

/* Dividers en Unfold/admin */
.divide-y > * + * { border-color: var(--ds-border) !important; }

/* ════════════════════════════════════════════════════════════════════════
   ISLAS DE FONDO CLARO — opt-out del tema oscuro
   ────────────────────────────────────────────────────────────────────────
   Algunos widgets (PivotTable.js, date-pickers de terceros, etc.) traen su
   propio fondo claro. Las reglas globales de tablas/inputs de arriba forzaban
   el color de texto a gris/plata (pensado para fondo oscuro), volviéndolo
   ILEGIBLE sobre fondo claro. Estas reglas restauran texto oscuro legible.
   Usar envolviendo el widget en class="light-surface".
   ════════════════════════════════════════════════════════════════════════ */
.light-surface {
  background: #ffffff !important;
  color: #1e293b !important;
  border-radius: .5rem;
}
.light-surface,
.light-surface * { color: #1e293b; }
.light-surface table thead,
.light-surface table thead th { background: #f1f5f9 !important; color: #0f172a !important; }
.light-surface table tbody td,
.light-surface table tbody th,
.light-surface table th,
.light-surface table td { color: #1e293b !important; border-color: #e2e8f0 !important; }
.light-surface table tbody tr:hover { background: #f8fafc !important; }
.light-surface input:not([type="checkbox"]):not([type="radio"]),
.light-surface select,
.light-surface textarea {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
.light-surface select option { background: #ffffff; color: #1e293b; }

/* ════ PivotTable.js (cubo dinámico) — tematizado claro robusto ════
   Las reglas se aplican globalmente porque el popup de filtros (.pvtFilterBox)
   se inyecta directo en <body>, fuera del contenedor del cubo.
   Las clases .pvt* tienen mayor especificidad que `table tbody td`, así que
   ganan al !important global. */
.pvtUi, .pvtUi * { color: #1e293b; }
.pvtTable { color: #1e293b !important; border-collapse: collapse; }
.pvtTable th,
.pvtTable td { color: #1e293b !important; border-color: #cbd5e1 !important; }
.pvtTable .pvtAxisLabel,
.pvtTable .pvtColLabel,
.pvtTable .pvtRowLabel,
.pvtTable .pvtTotalLabel { background: #f1f5f9 !important; color: #0f172a !important; }
.pvtTable .pvtVal { background: #ffffff !important; color: #1e293b !important; }
.pvtTable .pvtTotal,
.pvtTable .pvtGrandTotal { background: #eef2ff !important; color: #0f172a !important; font-weight: 700; }
.pvtAxisContainer, .pvtVals, .pvtUnused { background: #f8fafc !important; }
.pvtAxisContainer li span.pvtAttr {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0c4a6e !important;
}
.pvtUi select,
.pvtDropdownValue,
.pvtDropdownCurrent {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
.pvtTriangle { color: #1e293b !important; }
/* Popup de filtros (se inyecta en body) */
.pvtFilterBox { background: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; }
.pvtFilterBox * { color: #1e293b !important; }
.pvtFilterBox h4 { color: #0f172a !important; }
.pvtFilterBox input,
.pvtFilterBox .pvtSearch {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
.pvtCheckContainer { color: #1e293b !important; }
.pvtCheckContainer p { color: #1e293b !important; border-color: #e2e8f0 !important; }
.pvtCheckContainer p.selected { background: #e0f2fe !important; }

/* ════ Corrección de hovers en elementos dropdown en Dark Space ════ */
[x-show="open"] a:hover,
[x-show="open"] button:hover,
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ds-text-primary) !important;
}
[x-show="open"] a:hover *,
[x-show="open"] button:hover *,
.dropdown-menu a:hover *,
.dropdown-menu button:hover * {
  color: var(--ds-text-primary) !important;
}