/* ==========================================================================
   PANEL DARK MODE · IG Tech Advisory
   --------------------------------------------------------------------------
   Estrategia: redefinir TODAS las variables CSS raíz que ya usa panel.css
   y panel-modern.css. Como toda la app está construida sobre var(--bg),
   var(--text), var(--border), etc., el cambio de tema es automático para
   ~90% de componentes. Solo el topbar (que usa var(--navy-600) literal)
   necesita un override puntual.

   Filosofía cromática: dark mode tintado a navy (#0F2A44), no grayscale.
   El verde acento sube en luminancia para mantener AA sobre fondos oscuros.
   ========================================================================== */

html[data-theme="dark"] {
  /* ── Base de la app (panel.css usa estas) ─────────────────────────────── */
  --bg:             #0A1320;
  --bg-elevated:    #131F33;
  --surface:        #131F33; /* data-table-pro usaba var(--surface,#fff): sin esto, headers sticky blancos en dark */
  --bg-soft:        #1A2333; /* hover de filas dt-pro (fallback era #f9fafb → flash blanco en dark) */
  --border:         #2A3950;
  --border-strong:  #3E5170;
  --text:           #E8EFF8;
  --text-muted:     #98A8BE;
  --text-soft:      #7E8FA9;

  /* ── Brand · navy se vuelve verde como acción primaria en dark ────────── */
  --brand:   #22C55E;
  --accent:  #22C55E;

  /* ── Estados semánticos · más vibrantes para fondos dark ──────────────── */
  --green:     #4ADE80;
  --green-dark: #16A34A;
  --green-bg:  rgba(34, 197, 94, 0.14);
  --red:       #F87171;
  --red-bg:    rgba(248, 113, 113, 0.14);
  --amber:     #FBBF24;
  --amber-bg:  rgba(251, 191, 36, 0.14);

  /* ── Shadows · negras (no tintadas a navy en dark, sería ruido) ──────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow:    0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55);

  /* ── Tokens de panel-modern.css (escala neutral) ─────────────────────── */
  --neutral-50:  #1A2333;
  --neutral-100: #1E2A3D;
  --neutral-200: #2A3950;
  --neutral-300: #3E5170;
  --neutral-400: #5C7090;
  --neutral-500: #8093B0;
  --neutral-600: #A8B7CC;
  --neutral-700: #C8D2E0;
  --neutral-800: #DEE5EE;
  --neutral-900: #F1F5FA;

  --success: #4ADE80;
  --success-bg: rgba(34, 197, 94, 0.14);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --danger:  #F87171;
  --danger-bg: rgba(248, 113, 113, 0.14);
  --info:    #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.14);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --sh-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --sh-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.30);
  --sh-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.30);
  --sh-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
  --sh-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);

  --focus-ring:        0 0 0 3px rgba(34, 197, 94, 0.22);
  --focus-ring-strong: 0 0 0 3px rgba(34, 197, 94, 0.42);
}

/* ==========================================================================
   OVERRIDES PUNTUALES · para selectores que NO usan variables
   ========================================================================== */

/* Topbar usa var(--navy-600) literal. Cambiamos su fondo a un navy más oscuro
   para evitar que se confunda con elementos elevated. */
html[data-theme="dark"] .topbar {
  background: #050B14;
  border-bottom: 1px solid #1A2A42;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .topbar-searchbar {
  background: #020509;
  border-top-color: #1A2A42;
}

/* Background body explícito (algunos componentes tienen fondo hardcoded) */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Dropdowns blancos (codigo del panel-modern) */
html[data-theme="dark"] .topnav-dropdown-menu,
html[data-theme="dark"] .ws-switcher-menu,
html[data-theme="dark"] .lang-dd-menu {
  background: #1A2A42;
  border-color: #2A3950;
  box-shadow: var(--sh-2xl);
}
html[data-theme="dark"] .lang-dd-item:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .topnav-dropdown-item { color: #E8EFF8; }
html[data-theme="dark"] .topnav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
}
html[data-theme="dark"] .topnav-dropdown-item.is-active {
  background: rgba(34, 197, 94, 0.18);
  color: #4ADE80;
}

/* Workspace switcher menú (queda fondo blanco hardcoded) */
html[data-theme="dark"] .ws-switcher-menu-header { color: var(--text-muted); }
html[data-theme="dark"] .ws-switcher-item { color: var(--text); }
html[data-theme="dark"] .ws-switcher-item:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .ws-switcher-label { color: var(--text); }
html[data-theme="dark"] .ws-switcher-desc { color: var(--text-muted); }

/* Code blocks · panel.css los pinta sobre var(--bg) que ahora es muy oscuro */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background: rgba(0, 0, 0, 0.30);
  border-color: var(--border);
  color: #4ADE80;
}

/* Inputs nativos · forzar colores legibles */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1A2A42;
  border-color: var(--border-strong);
  color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-soft); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #22C55E;
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-color: var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); }

/* Selección de texto */
html[data-theme="dark"] ::selection { background: #22C55E; color: #050B14; }

/* Hovers sobre tablas (panel.css usa rgb hardcoded) */
html[data-theme="dark"] .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Alerts: redefinir backgrounds porque usan rgba específicos */
html[data-theme="dark"] .alert-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #86EFAC; }
html[data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.30); color: #FCD34D; }
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .alert-danger  { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.30); color: #FCA5A5; }
html[data-theme="dark"] .alert-info    { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.30); color: #7DD3FC; }

/* Badges */
html[data-theme="dark"] .badge-green { background: rgba(34, 197, 94, 0.16); color: #86EFAC; }
html[data-theme="dark"] .badge-amber { background: rgba(251, 191, 36, 0.16); color: #FCD34D; }
html[data-theme="dark"] .badge-red   { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; }
html[data-theme="dark"] .badge-blue  { background: rgba(56, 189, 248, 0.16); color: #7DD3FC; }
html[data-theme="dark"] .badge-gray  { background: rgba(168, 183, 204, 0.16); color: #CBD5E1; }

/* Botón solid: en dark el navy queda apagado, lo cambiamos a verde sólido */
html[data-theme="dark"] .btn-solid,
html[data-theme="dark"] .btn-primary {
  background: #22C55E;
  color: #050B14;
  border-color: #22C55E;
}
html[data-theme="dark"] .btn-solid:hover,
html[data-theme="dark"] .btn-primary:hover { background: #16A34A; color: #050B14; }

/* Botón outline · respetar borde */
html[data-theme="dark"] .btn { background: transparent; border-color: var(--border-strong); color: var(--text); }
html[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--text-muted); }

/* Detalles: links activos del submenu lateral, breadcrumbs, etc.
   Heredan var(--brand) que ya es verde en dark, así que no hay que tocarlos. */

/* ==========================================================================
   TOGGLE BUTTON · sol/luna en el topbar
   ========================================================================== */
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 160ms ease, transform 120ms ease, color 160ms ease;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }

/* Iconos sol/luna: invierten según tema */
.theme-toggle .ico-sun  { display: none; }
.theme-toggle .ico-moon { display: block; }
html[data-theme="dark"] .theme-toggle .ico-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* ==========================================================================
   TRANSICIONES · suaves al cambiar de tema, sin animar el resto
   ========================================================================== */
html, body {
  transition: background-color 180ms ease, color 180ms ease;
}
.topbar, .data-table, .data-table-wrap, .erp-stat, .informe-card,
input, textarea, select, .btn, .badge {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html, body, .topbar, .data-table, .data-table-wrap, .erp-stat, .informe-card,
  input, textarea, select, .btn, .badge {
    transition: none !important;
  }
}

/* ==========================================================================
   DRAWER MÓVIL · panel.css le pone background:var(--brand), que en dark
   es el verde de acento → menú entero verde chillón. Navy oscuro, como
   el resto del chrome (topbar #050B14 · dropdowns #1A2A42).
   ========================================================================== */
@media (max-width: 900px) {
  html[data-theme="dark"] .topbar .topnav { background: #0B1624; }
  html[data-theme="dark"] .topbar .topnav-dropdown-menu {
    background: rgba(0, 0, 0, 0.22);
    box-shadow: none;
  }
}

/* ==========================================================================
   PASE IMPECCABLE 2026-07-06 · huecos de dark restantes
   Selectores de panel-modern/panel.css con colores claros literales que
   ningún override cubría todavía.
   ========================================================================== */

/* Cards CMS y subtoolbar: background #fff literal en panel-modern */
html[data-theme="dark"] .cms-card,
html[data-theme="dark"] .subtoolbar {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Botón de peligro: era blanco con texto rojo → outline rojo suave */
html[data-theme="dark"] .btn-red {
  background: transparent;
  border-color: rgba(248, 113, 113, 0.45);
  color: #FCA5A5;
}
html[data-theme="dark"] .btn-red:hover {
  background: rgba(248, 113, 113, 0.10);
  color: #FECACA;
  border-color: rgba(248, 113, 113, 0.65);
}

/* Botonera StelOrder (background: white literal en panel.css) */
html[data-theme="dark"] .btn-stel {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text);
}
html[data-theme="dark"] .btn-stel:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .btn-stel-save {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.40);
  color: #FCD34D;
}
html[data-theme="dark"] .btn-stel-save:hover { background: rgba(251, 191, 36, 0.22); color: #FDE68A; }
html[data-theme="dark"] .btn-stel-cancel { background: transparent; color: var(--text); }

/* Chips de estado CMS: texto #14532d/#7c2d12 ilegible sobre fondos dark */
html[data-theme="dark"] .estado-publicado { background: rgba(34, 197, 94, 0.16); color: #86EFAC; }
html[data-theme="dark"] .estado-borrador  { background: rgba(251, 191, 36, 0.16); color: #FCD34D; }

/* Pill de filtro activo: --brand en dark es verde y el texto blanco
   quedaba a ~2:1 → texto oscuro como en btn-primary */
html[data-theme="dark"] .filter-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #050B14;
}

/* Valores de KPI por variante: los tonos -dark de light no dan contraste aquí */
html[data-theme="dark"] .erp-stat--green .erp-stat-value { color: var(--green); }
html[data-theme="dark"] .erp-stat--red   .erp-stat-value { color: var(--red); }
html[data-theme="dark"] .erp-stat--amber .erp-stat-value { color: var(--amber); }
html[data-theme="dark"] .erp-stat--blue  .erp-stat-value { color: #60A5FA; }