// ============================================================
//  DARK MODE — Header + navegación
//  Cubre: header "improved" y "taxes-*" (new_css_2025.css),
//  dropdown de usuario (menu_header.css + user-profile-*),
//  sidebar .menu_sub (side_bar_menu.css).
//  Solo pantalla: al imprimir sale siempre el tema claro.
// ============================================================

@media screen {
:root[data-theme="dark"] {

  // ── Header "improved": toggles de dropdown ──
  .improved-dropdown .improved-toggle {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }
  .improved-dropdown .improved-toggle:hover {
    background: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: #fff !important;
  }
  .improved-dropdown .improved-toggle *,
  .improved-user-name { color: var(--dm-text) !important; }
  .improved-dropdown .improved-toggle:hover * { color: #fff !important; }
  .improved-chevron { color: var(--dm-muted) !important; }

  // ── Header "improved": menú desplegable ──
  // (el fondo del menú ya lo tapa .custom-dropdown-menu del core;
  //  acá van la flechita y el hover con gradiente claro)
  .improved-menu::before {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
  }
  .improved-menu li a:hover {
    // shorthand: el original es un gradiente #f0f9ff→#e0f2fe
    background: var(--dm-surface-2) !important;
    color: #6ea8fe !important;
  }
  .improved-menu li a i { color: var(--dm-muted) !important; }
  .improved-menu li a:hover i { color: #6ea8fe !important; }

  // ── Header "improved": logo empresa + avatar ──
  .improved-logo {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
  }
  .improved-logo:hover { background: var(--dm-surface-2) !important; }
  .improved-img {
    // conserva el anillo morado de marca; solo el relleno pasa a oscuro
    background: linear-gradient(var(--dm-surface-2), var(--dm-surface-2)) padding-box,
                linear-gradient(135deg, #667eea, #764ba2) border-box !important;
  }
  .improved-avatar::after { border-color: var(--dm-surface) !important; }

  // ── Selects/inputs dentro del header ──
  .container_header.improved select,
  .container_header.improved .form-control,
  .container_header.improved .custom-select {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }
  .container_header.improved select:hover,
  .container_header.improved .form-control:hover,
  .container_header.improved .custom-select:hover,
  .container_header.improved select:focus,
  .container_header.improved .form-control:focus,
  .container_header.improved .custom-select:focus {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
  }
  .container_header.improved select option {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
  }

  // ── Header "taxes-*": hamburguesa, título, breadcrumb ──
  .taxes-menu-toggle:hover { background: var(--dm-surface-2) !important; }
  .taxes-hamburger-line { background: var(--dm-muted) !important; }
  .taxes-menu-toggle:hover .taxes-hamburger-line { background: var(--dm-text) !important; }
  .taxes-page-title { color: var(--dm-text) !important; }
  .taxes-breadcrumb-item { color: var(--dm-muted) !important; }
  .taxes-breadcrumb-separator, .taxes-breadcrumb-current { color: var(--dm-muted) !important; }

  // ── Header "taxes-*": botones de logo y perfil ──
  .taxes-logo-button {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
  }
  .taxes-profile-button {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
  }
  .taxes-profile-button:hover {
    background: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
  }
  .taxes-user-name { color: var(--dm-text) !important; }
  .taxes-avatar-image { border-color: var(--dm-border) !important; }

  // ── Header "taxes-*": dropdown de perfil ──
  .taxes-dropdown-menu {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
  }
  .taxes-dropdown-divider { background: var(--dm-border) !important; }
  .taxes-dropdown-item { color: var(--dm-text) !important; }
  .taxes-dropdown-item:hover {
    background: var(--dm-surface-2) !important;
    color: #fff !important;
  }
  .taxes-dropdown-item.taxes-logout { color: #fca5a5 !important; }
  .taxes-dropdown-item.taxes-logout:hover { background: rgba(239, 68, 68, .15) !important; }
  .taxes-dropdown-item.taxes-admin { background: rgba(245, 158, 11, .15) !important; }
  .taxes-dropdown-item.taxes-admin:hover { background: rgba(245, 158, 11, .25) !important; }
  // (.taxes-dropdown-header conserva su gradiente morado de marca; el avatar
  //  blanco sobre ese gradiente sigue siendo legible, no se toca)

  // ── Dropdown de usuario vigente (user-profile-*) ──
  // Scopeado por sección para NO pisar la .avatar-container genérica (L2642)
  .logo-empresa-section .logo-empresa-container,
  .avatar-section .avatar-container {
    // shorthand: el original es un gradiente #f8f9fa→#e9ecef
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
  }
  .avatar-menu { border-color: var(--dm-border) !important; }

  // ── Toggle del dropdown custom (menu_header.css) ──
  .custom-dropdown-toggle {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }
  .custom-dropdown-toggle:hover {
    background-color: var(--dm-border) !important;
    color: #fff !important;
    border-color: var(--dm-border) !important;
  }
  .custom-dropdown-menu li:not(:last-child)::after { background: var(--dm-border) !important; }
  .custom-dropdown-menu .btn i { color: var(--dm-muted) !important; }
  .custom-dropdown-menu .btn:hover i { color: #6ea8fe !important; }

  // ── Sidebar (side_bar_menu.css) ──
  .side_bar {
    border-right-color: var(--dm-border) !important;
    box-shadow: none !important;
  }
  .sidebar-content::-webkit-scrollbar-thumb { background: var(--dm-border); }
  .sidebar-content:hover::-webkit-scrollbar-thumb { background: #3e4756; }

  // Header de empresa (primer item del sidebar)
  .menu_sub:first-child {
    background: var(--dm-surface) !important;
    border-bottom-color: var(--dm-border) !important;
  }
  .menu_sub:first-child:hover { background: var(--dm-surface-2) !important; }

  // Items del menú: cada uno es una "tarjeta" blanca en el tema claro
  .menu_sub:not(:first-child) {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
  }
  .menu_sub:not(:first-child) > a { color: var(--dm-text) !important; }
  .menu_sub:not(:first-child) > a:hover {
    background: var(--dm-surface-2) !important;
    color: #8fbcff !important;
  }
  .menu_sub:not(:first-child) > a:hover i { color: #8fbcff !important; }

  // Estado activo (azul claro en el tema claro)
  .menu_sub.active > a,
  .menu_sub > a.active {
    background: rgba(37, 99, 235, .18) !important;
    color: #8fbcff !important;
  }
  .menu_sub.active > a i,
  .menu_sub > a.active i { color: #8fbcff !important; }

  // Toggles del sidebar (hamburguesa y colapso)
  .sidebar-toggle:hover { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; }
  .container_header.improved .logo .sidebar-toggle { color: var(--dm-muted); }
  .container_header.improved .logo .sidebar-toggle:hover {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
  }
  .mobile-sidebar-toggle { color: var(--dm-text) !important; }
  .mobile-sidebar-toggle:hover { background: var(--dm-surface-2) !important; }
}

// ── Estados colapsados (selectores con body.*, van fuera del bloque :root) ──
:root[data-theme="dark"] body.sidebar-collapsed .side_bar:hover .menu_sub:first-child {
  border-bottom-color: var(--dm-border) !important;
}
:root[data-theme="dark"] body.sidebar-collapsed .side_bar:hover .menu_sub:not(:first-child) {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}
// Hamburguesa flotante con el header colapsado (blanca en el tema claro)
:root[data-theme="dark"] body.header-collapsed .container_header.improved .logo .sidebar-toggle {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6) !important;
}
// Mobile: el sidebar abierto restaura fondos blancos
@media (max-width: 991px) {
  :root[data-theme="dark"] body.sidebar-collapsed .menu_sub:first-child {
    border-bottom-color: var(--dm-border) !important;
  }
  :root[data-theme="dark"] body.sidebar-collapsed .menu_sub:not(:first-child) {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
  }
}

// Header: íconos de notificación (soporte / chat / whatsapp / notas / campana).
// Los discos grises `rgba(255,255,255,.1)` quedaban pesados/grotescos. Look
// limpio: SIN fondo por defecto (solo el ícono), y un círculo sutil solo en
// hover. Íconos claros y nítidos. El color va SIN !important a propósito para
// que el verde inline del WhatsApp (#25d366) siga ganando.
:root[data-theme="dark"] .notification-icon-container {
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
:root[data-theme="dark"] .notification-icon-container:hover {
  background: rgba(255, 255, 255, .08) !important;
  transform: none !important;
}
:root[data-theme="dark"] .notification-icon {
  color: #e2e8f0;
}
// Badge un poco más contenido y con aro que lo separa del fondo del header.
:root[data-theme="dark"] .notification-badge {
  box-shadow: 0 0 0 2px var(--dm-bg) !important;
  animation: none !important;
}
} // fin @media screen