/**
 * Tema: Cristal PRO Dark - CORREGIDO
 * Hover oscuro en todos los elementos
 */

/* Aplicar a ambos selectores para compatibilidad */
html[data-theme="dark"],
body[data-theme="dark"],
body.dark {
  --fg: #e7ecff !important;
  --muted: #aab3d6 !important;
  --brand: #5c7cff !important;
  --brand2: #3f62ff !important;
  --bg: #070a14 !important;
  --white: 14, 18, 36 !important;
  --tint: 92, 124, 255 !important;
  
  --shadow-soft: 0 10px 25px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25) !important;
  --shadow-glass: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  
  --text-primary: #e7ecff !important;
  --text-secondary: #aab3d6 !important;
  --text-muted: #94a3b8 !important;
  
  --primary: #5c7cff !important;
  --primary-dark: #3f62ff !important;
  
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* === FONDO OSCURO CON CUADRÍCULA === */
html[data-theme="dark"] body,
body[data-theme="dark"],
body.dark {
  background: var(--bg);
  color: var(--fg);
}

/* Cuadrícula de fondo oscura */
html[data-theme="dark"] body::before,
body[data-theme="dark"]::before,
body.dark::before {
  background:
    linear-gradient(transparent 49%, rgba(255,255,255,.05) 50%, transparent 51%) 0 0/84px 84px,
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.05) 50%, transparent 51%) 0 0/84px 84px,
    var(--bg);
  opacity: 1;
}

/* Líneas curvas y círculos decorativos oscuros */
html[data-theme="dark"] body::after,
body[data-theme="dark"]::after,
body.dark::after {
  opacity: .22;
  filter: saturate(.7) contrast(1.1);
}

/* === NAVEGACIÓN DARK === */
html[data-theme="dark"] .main-nav,
body[data-theme="dark"] .main-nav,
body.dark .main-nav {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15, 23, 42, 0.85);
}

html[data-theme="dark"] .logo-nav img,
body[data-theme="dark"] .logo-nav img,
body.dark .logo-nav img {
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45));
}

/* ✅ CORREGIDO - Hover oscuro en nav links */
html[data-theme="dark"] .nav-link:hover,
body[data-theme="dark"] .nav-link:hover,
body.dark .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e7ecff !important;
}

/* === THEME TOGGLE DARK === */
html[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .theme-toggle,
body.dark .theme-toggle {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

html[data-theme="dark"] .theme-toggle:hover,
body[data-theme="dark"] .theme-toggle:hover,
body.dark .theme-toggle:hover {
  background: rgba(255,255,255,.10) !important;
}

/* === CARDS DARK === */
html[data-theme="dark"] .card,
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .about,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .users-table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .theme-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .app-card,
body[data-theme="dark"] .hero,
body[data-theme="dark"] .about,
body[data-theme="dark"] .dashboard-card,
body[data-theme="dark"] .contact-card,
body[data-theme="dark"] .users-table-card,
body[data-theme="dark"] .form-card,
body[data-theme="dark"] .profile-card,
body[data-theme="dark"] .theme-card,
body.dark .card,
body.dark .app-card,
body.dark .hero,
body.dark .about,
body.dark .dashboard-card,
body.dark .contact-card,
body.dark .users-table-card,
body.dark .form-card,
body.dark .profile-card,
body.dark .theme-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(14, 18, 36, 0.6);
}

/* === APP LOGO BOX DARK === */
html[data-theme="dark"] .app-logo-box,
body[data-theme="dark"] .app-logo-box,
body.dark .app-logo-box {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-soft);
}

html[data-theme="dark"] .app-logo-box img,
body[data-theme="dark"] .app-logo-box img,
body.dark .app-logo-box img {
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.55));
}

/* === APP CARD TEXT DARK === */
html[data-theme="dark"] .app-card p,
body[data-theme="dark"] .app-card p,
body.dark .app-card p {
  color: rgba(231,236,255,.72);
}

/* === STATS DARK === */
html[data-theme="dark"] .stat,
body[data-theme="dark"] .stat,
body.dark .stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

html[data-theme="dark"] .stat span,
body[data-theme="dark"] .stat span,
body.dark .stat span {
  color: rgba(231,236,255,.70);
}

/* ✅ CORREGIDO - Hover oscuro en stats */
html[data-theme="dark"] .stat:hover,
body[data-theme="dark"] .stat:hover,
body.dark .stat:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* === BOTONES DARK === */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-ghost,
body.dark .btn-secondary,
body.dark .btn-ghost {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #e7ecff;
}

/* ✅ CORREGIDO - Hover oscuro en botones ghost */
html[data-theme="dark"] .btn-ghost:hover,
body[data-theme="dark"] .btn-ghost:hover,
body.dark .btn-ghost:hover {
  background: rgba(92, 124, 255, 0.2) !important;
  border-color: rgba(92, 124, 255, 0.4) !important;
  color: #ffffff !important;
}

/* === CONTACT DARK === */
html[data-theme="dark"] .contact-card,
body[data-theme="dark"] .contact-card,
body.dark .contact-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(14, 18, 36, 0.6);
}

/* ✅ CORREGIDO - Hover oscuro en contact cards */
html[data-theme="dark"] .contact-card:hover,
body[data-theme="dark"] .contact-card:hover,
body.dark .contact-card:hover {
  background: rgba(14, 18, 36, 0.75) !important;
  border-color: rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .contact-icon,
body[data-theme="dark"] .contact-icon,
body.dark .contact-icon {
  border: 1px solid rgba(92,124,255,.30);
  background: rgba(92,124,255,.12);
}

/* ✅ CORREGIDO - Hover oscuro en links de contacto */
html[data-theme="dark"] .contact-card a:hover,
body[data-theme="dark"] .contact-card a:hover,
body.dark .contact-card a:hover {
  color: #a5b4fc !important;
}

/* === FOOTER DARK === */
html[data-theme="dark"] .main-footer,
body[data-theme="dark"] .main-footer,
body.dark .main-footer {
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(231,236,255,.78);
  background: rgba(14, 18, 36, 0.5);
}

html[data-theme="dark"] .footer-links a,
body[data-theme="dark"] .footer-links a,
body.dark .footer-links a {
  color: rgba(231,236,255,.72);
}

/* ✅ CORREGIDO - Hover oscuro en footer links */
html[data-theme="dark"] .footer-links a:hover,
body[data-theme="dark"] .footer-links a:hover,
body.dark .footer-links a:hover {
  color: #a5b4fc !important;
}

html[data-theme="dark"] .footer-bottom,
body[data-theme="dark"] .footer-bottom,
body.dark .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(231,236,255,.60);
}

/* === FORMS DARK === */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-input,
body[data-theme="dark"] .form-select,
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="url"],
body.dark select,
body.dark textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--fg);
}

/* ✅ CORREGIDO - Hover/focus oscuro en inputs */
html[data-theme="dark"] .form-input:hover,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:hover,
html[data-theme="dark"] .form-select:focus,
body[data-theme="dark"] .form-input:hover,
body[data-theme="dark"] .form-input:focus,
body[data-theme="dark"] .form-select:hover,
body[data-theme="dark"] .form-select:focus,
body.dark input:hover,
body.dark input:focus,
body.dark select:hover,
body.dark select:focus,
body.dark textarea:hover,
body.dark textarea:focus {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(92, 124, 255, 0.4) !important;
}

/* === TEXTOS DARK === */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4 {
  color: var(--fg);
}

html[data-theme="dark"] p,
body[data-theme="dark"] p,
body.dark p {
  color: rgba(231,236,255,.78);
}

/* === LINKS GENERALES DARK === */
html[data-theme="dark"] a,
body[data-theme="dark"] a,
body.dark a {
  color: #8b9dff;
}

/* ✅ CORREGIDO - Hover oscuro en links generales */
html[data-theme="dark"] a:hover,
body[data-theme="dark"] a:hover,
body.dark a:hover {
  color: #a5b4fc !important;
}

/* === SCROLLBAR DARK === */
html[data-theme="dark"] ::-webkit-scrollbar-track,
body[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
body[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 2px solid rgba(15, 23, 42, 0.5);
}

/* === DASHBOARD ESPECÍFICO DARK === */
html[data-theme="dark"] .dashboard-card:hover,
body[data-theme="dark"] .dashboard-card:hover,
body.dark .dashboard-card:hover {
  background: rgba(14, 18, 36, 0.75) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* === TABLAS DARK === */
html[data-theme="dark"] table,
body[data-theme="dark"] table,
body.dark table {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

html[data-theme="dark"] th,
body[data-theme="dark"] th,
body.dark th {
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

html[data-theme="dark"] td,
body[data-theme="dark"] td,
body.dark td {
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ✅ CORREGIDO - Hover oscuro en filas de tabla */
html[data-theme="dark"] tr:hover,
body[data-theme="dark"] tr:hover,
body.dark tr:hover {
  background: rgba(255,255,255,.06) !important;
}

/* === ELIMINAR TEXT-SHADOW EN HOVER (causaba el glow blanco) === */
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] a:hover,
body[data-theme="dark"] .nav-link:hover,
body[data-theme="dark"] a:hover,
body.dark .nav-link:hover,
body.dark a:hover {
  text-shadow: none !important;
}