/* === DARK MODE ESPECÍFICO (Reglas que no se pueden resolver con variables) === */

/* 1. Resetear Filtros y Color de Texto Forzado */
/* CRÍTICO: Anula el filtro `invert()` que rompe logos y fotos */
body.dark-mode,
body.dark-mode img,
body.dark-mode video,
body.dark-mode picture,
body.dark-mode iframe,
body.dark-mode .site-header,
body.dark-mode .site-footer,
body.dark-mode .card,
body.dark-mode .empresa-card,
body.dark-mode .logo-card,
body.dark-mode [data-card="logo"] {
    filter: none !important;
}

/* 2. Ajuste de Header y Footer (si no usan var(--bg)) */
body.dark-mode .site-header,
body.dark-mode .footer-top,
body.dark-mode .footer-bottom {
    background: var(--red) !important;
}

/* 3. Estilos Específicos para el Toggle de Tema */
body.dark-mode #theme-toggle,
body.dark-mode #mini-theme-toggle {
  background: var(--card-bg) !important;
  border: 2px solid var(--text-secondary) !important;
}

body.dark-mode #theme-toggle i,
body.dark-mode #mini-theme-toggle i {
  color: var(--text-primary) !important;
}

body.dark-mode #theme-toggle:hover,
body.dark-mode #mini-theme-toggle:hover {
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.35) !important;
}

body.dark-mode #theme-toggle:hover i,
body.dark-mode #mini-theme-toggle:hover i {
  color: var(--red) !important;
}