/* =============================================================================
   15 VATIOS ADOPS - THEME ENGINE (DARK BLUE / SLATE vs LIGHT WHITE)
   ============================================================================= */

/* -------------------------------------------------------------------------
   TEMA 1: OSCURO (AZUL PROFUNDO / SLATE / INDIGO - EL ORIGINAL)
   ------------------------------------------------------------------------- */
:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --app-bg: #0b1120;
  --app-header-bg: #0f172a;
  --app-panel-bg: #0f172a;
  --app-panel-subtle: #1e293b;
  --app-card-bg: #1e293b;
  --app-table-bg: #0b1120;
  --app-table-header-bg: #090e17;
  --app-table-sticky-bg: #090e17;
  --app-modal-bg: #0f172a;
  --app-input-bg: #0b1120;
  --app-hover-bg: rgba(30, 41, 59, 0.7);

  --app-border: #334155;
  --app-border-subtle: #1e293b;
  --app-border-month: rgba(51, 65, 85, 0.45);
  --app-border-quarter: rgba(148, 163, 184, 0.55);
  --app-border-separator: rgba(148, 163, 184, 0.75);

  --app-text-main: #f8fafc;
  --app-text-body: #e2e8f0;
  --app-text-muted: #94a3b8;
  --app-text-dim: #64748b;

  --app-accent: #4f46e5;
  --app-accent-hover: #4338ca;
  --app-accent-text: #ffffff;
  --app-accent-badge: #818cf8;

  --app-scrollbar-track: #0f172a;
  --app-scrollbar-thumb: #334155;
  --app-scrollbar-hover: #475569;
}

html[data-theme="dark"] body {
  background-color: var(--app-bg) !important;
  color: var(--app-text-body) !important;
}

html[data-theme="dark"] header {
  background-color: var(--app-header-bg) !important;
  border-color: var(--app-border-subtle) !important;
}

/* Paneles, Cards y Contenedores */
html[data-theme="dark"] .bg-zinc-950,
html[data-theme="dark"] .bg-slate-950 {
  background-color: #0b1120 !important;
}
html[data-theme="dark"] .bg-zinc-900,
html[data-theme="dark"] .bg-slate-900 {
  background-color: #0f172a !important;
}
html[data-theme="dark"] .bg-zinc-800,
html[data-theme="dark"] .bg-slate-800 {
  background-color: #1e293b !important;
}

html[data-theme="dark"] .border-zinc-800,
html[data-theme="dark"] .border-slate-800 {
  border-color: #1e293b !important;
}
html[data-theme="dark"] .border-zinc-700,
html[data-theme="dark"] .border-slate-700 {
  border-color: #334155 !important;
}

/* Tipografía */
html[data-theme="dark"] .text-zinc-100,
html[data-theme="dark"] .text-slate-100 {
  color: #f8fafc !important;
}
html[data-theme="dark"] .text-zinc-200,
html[data-theme="dark"] .text-slate-200 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .text-zinc-300,
html[data-theme="dark"] .text-slate-300 {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .text-zinc-400,
html[data-theme="dark"] .text-slate-400 {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .text-zinc-500,
html[data-theme="dark"] .text-slate-500 {
  color: #64748b !important;
}

/* Pestaña Activa Azul / Índigo Original */
html[data-theme="dark"] nav.app-main-nav a.bg-white,
html[data-theme="dark"] .nav-active {
  background-color: #4f46e5 !important; /* indigo-600 */
  color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(79, 70, 229, 0.4) !important;
}

/* Inputs y Selects */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #6366f1 !important;
  outline: none !important;
}

/* Tablas y Pacing */
html[data-theme="dark"] table thead th {
  background-color: #090e17 !important;
  border-color: #1e293b !important;
}
html[data-theme="dark"] table tbody tr {
  background-color: #0b1120 !important;
}
html[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .border-month {
  border-right: 1px solid rgba(51, 65, 85, 0.45) !important;
}
html[data-theme="dark"] .border-quarter {
  border-right: 2px solid rgba(148, 163, 184, 0.55) !important;
}
html[data-theme="dark"] .border-client-separator > td,
html[data-theme="dark"] tr.border-client-separator > td {
  border-top: 2.5px solid rgba(148, 163, 184, 0.75) !important;
}

/* Celdas fijas sticky en modo oscuro */
html[data-theme="dark"] th[class*="sticky"],
html[data-theme="dark"] td[class*="sticky"] {
  background-color: #0b1120 !important;
}
html[data-theme="dark"] tr:hover td[class*="sticky"] {
  background-color: #1e293b !important;
}

/* Scrollbars Modo Oscuro Azul */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155 !important; border-radius: 3px !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569 !important; }


/* -------------------------------------------------------------------------
   TEMA 2: CLARO (FONDO BLANCO LIMPIO Y ELEGANTE)
   ------------------------------------------------------------------------- */
html[data-theme="light"],
body[data-theme="light"] {
  --app-bg: #ffffff;
  --app-header-bg: #ffffff;
  --app-panel-bg: #f8fafc;
  --app-panel-subtle: #f1f5f9;
  --app-card-bg: #ffffff;
  --app-table-bg: #ffffff;
  --app-table-header-bg: #f8fafc;
  --app-table-sticky-bg: #f8fafc;
  --app-modal-bg: #ffffff;
  --app-input-bg: #ffffff;
  --app-hover-bg: #f1f5f9;

  --app-border: #cbd5e1;
  --app-border-subtle: #e2e8f0;
  --app-border-month: rgba(203, 213, 225, 0.85);
  --app-border-quarter: rgba(100, 116, 139, 0.65);
  --app-border-separator: rgba(71, 85, 105, 0.85);

  --app-text-main: #09090b;
  --app-text-body: #18181b;
  --app-text-muted: #52525b;
  --app-text-dim: #71717a;

  --app-accent: #18181b;
  --app-accent-hover: #27272a;
  --app-accent-text: #ffffff;
  --app-accent-badge: #3f3f46;

  --app-scrollbar-track: #f4f4f5;
  --app-scrollbar-thumb: #d4d4d8;
  --app-scrollbar-hover: #a1a1aa;
}

html[data-theme="light"] body {
  background-color: #ffffff !important;
  color: #18181b !important;
}

html[data-theme="light"] header {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}

/* Paneles, Cards y Secciones */
html[data-theme="light"] .bg-zinc-950,
html[data-theme="light"] .bg-slate-950 {
  background-color: #ffffff !important;
}
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-slate-900 {
  background-color: #fafafa !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] .bg-zinc-900\/90,
html[data-theme="light"] .bg-slate-900\/90 {
  background-color: rgba(250, 250, 250, 0.95) !important;
}
html[data-theme="light"] .bg-zinc-800,
html[data-theme="light"] .bg-slate-800 {
  background-color: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] .bg-zinc-800\/90,
html[data-theme="light"] .bg-slate-800\/90 {
  background-color: #f4f4f5 !important;
}

html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-slate-800 {
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-slate-700 {
  border-color: #d4d4d8 !important;
}
html[data-theme="light"] .border-zinc-600,
html[data-theme="light"] .border-slate-600 {
  border-color: #a1a1aa !important;
}

/* Tipografía Modo Claro */
html[data-theme="light"] .text-white {
  color: #09090b !important;
}
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-slate-100 {
  color: #18181b !important;
}
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-slate-200 {
  color: #27272a !important;
}
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-slate-300 {
  color: #3f3f46 !important;
}
html[data-theme="light"] .text-zinc-400,
html[data-theme="light"] .text-slate-400 {
  color: #52525b !important;
}
html[data-theme="light"] .text-zinc-500,
html[data-theme="light"] .text-slate-500 {
  color: #71717a !important;
}
html[data-theme="light"] .text-zinc-600,
html[data-theme="light"] .text-slate-600 {
  color: #a1a1aa !important;
}

/* Pestaña Activa Modo Claro */
html[data-theme="light"] nav.app-main-nav a.bg-white,
html[data-theme="light"] .nav-active {
  background-color: #18181b !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] nav.app-main-nav a:not(.bg-white) {
  color: #52525b !important;
}
html[data-theme="light"] nav.app-main-nav a:not(.bg-white):hover {
  background-color: #f4f4f5 !important;
  color: #18181b !important;
}

/* Inputs, Selects y Formularios */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: #18181b !important;
  outline: none !important;
}

/* Botones */
html[data-theme="light"] button.bg-zinc-800,
html[data-theme="light"] button.bg-slate-800 {
  background-color: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] button.bg-zinc-800:hover,
html[data-theme="light"] button.bg-slate-800:hover {
  background-color: #e4e4e7 !important;
}
html[data-theme="light"] button.bg-white {
  background-color: #18181b !important;
  color: #ffffff !important;
}

/* Tablas y Pacing Matrix Modo Claro */
html[data-theme="light"] table {
  background-color: #ffffff !important;
}
html[data-theme="light"] table thead th {
  background-color: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] table thead th span {
  color: #18181b !important;
}
html[data-theme="light"] table tbody tr {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] table tbody tr:hover {
  background-color: #f4f4f5 !important;
}
html[data-theme="light"] table tbody td {
  border-color: #e4e4e7 !important;
}

html[data-theme="light"] .border-month {
  border-right: 1px solid rgba(228, 228, 231, 0.9) !important;
}
html[data-theme="light"] .border-quarter {
  border-right: 2px solid rgba(161, 161, 170, 0.75) !important;
}
html[data-theme="light"] .border-client-separator > td,
html[data-theme="light"] tr.border-client-separator > td {
  border-top: 2.5px solid rgba(113, 113, 122, 0.85) !important;
}

/* Celdas fijas sticky en modo claro */
html[data-theme="light"] th[class*="sticky"],
html[data-theme="light"] td[class*="sticky"] {
  background-color: #ffffff !important;
}
html[data-theme="light"] tr:hover td[class*="sticky"] {
  background-color: #f4f4f5 !important;
}

/* Modales Modo Claro */
html[data-theme="light"] .fixed.inset-0 > div:not(.bg-zinc-950\/80) {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .fixed.inset-0 .bg-zinc-900,
html[data-theme="light"] .fixed.inset-0 .bg-slate-900 {
  background-color: #ffffff !important;
}

/* Scrollbars Modo Claro */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #fafafa !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d4d4d8 !important; border-radius: 3px !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a1a1aa !important; }

/* -------------------------------------------------------------------------
   BOTÓN CONMUTADOR DE TEMA (THEME SWITCHER WIDGET)
   ------------------------------------------------------------------------- */
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

html[data-theme="dark"] .theme-switch-btn {
  background-color: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}
html[data-theme="dark"] .theme-switch-btn:hover {
  background-color: #334155;
  color: #ffffff;
  border-color: #6366f1;
}

html[data-theme="light"] .theme-switch-btn {
  background-color: #f4f4f5;
  border: 1px solid #d4d4d8;
  color: #18181b;
}
html[data-theme="light"] .theme-switch-btn:hover {
  background-color: #e4e4e7;
  color: #000000;
  border-color: #a1a1aa;
}