/* -------------------------------------------------------------------------- */
/* 1. RECONFIGURACIÓN DE VARIABLES GLOBALES (PALETA OSCURA EQUILIBRADA)       */
/* -------------------------------------------------------------------------- */

body.dark-mode:root,
body.dark-mode {
  /* Fondo principal general de toda la web */
  --gris-fondo: #0f172a !important;

  /* Fondo de tarjetas, tablas, contenedores y bloques */
  --blanco: #1e293b !important;

  /* Color principal del texto */
  --texto-oscuro: #f1f5f9 !important;
}

body.dark-mode {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}

/* -------------------------------------------------------------------------- */
/* 2. NAVEGACIÓN Y MENÚS (TEXTO AMARILLO CORPORATIVO ADAPTADO)                */
/* -------------------------------------------------------------------------- */

body.dark-mode header a,
body.dark-mode .header a,
body.dark-mode .nav-link,
body.dark-mode .logo,
body.dark-mode header span {
  color: #febd69 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode header a:hover,
body.dark-mode .nav-link:hover {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 3. TÍTULOS Y TEXTOS (CORREGIDO: SIN FONDOS INTRUSIVOS EN SIDEBAR)          */
/* -------------------------------------------------------------------------- */

/* Cambia solo el color del texto de los encabezados generales para evitar 
   que se claven bloques de fondo sobre los h2 del menú administrativo */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #febd69 !important;
}

/* Forzamos a que el título del panel de control mantenga fondo transparente */
body.dark-mode .sidebar h2,
body.dark-mode aside.sidebar h2 {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode label,
body.dark-mode time {
  color: #e2e8f0 !important;
}

body.dark-mode .text-muted,
body.dark-mode small {
  color: #94a3b8 !important;
}

/* -------------------------------------------------------------------------- */
/* 4. BLOQUES, TARJETAS, TABLAS Y ELEMENTOS DE INTERFAZ                       */
/* -------------------------------------------------------------------------- */

body.dark-mode .card,
body.dark-mode .producto-card,
body.dark-mode .bloque,
body.dark-mode .modal-content,
body.dark-mode .form-contenedor {
  background-color: #1e293b !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Adaptación completa para tablas en administración en Modo Oscuro */
body.dark-mode table {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-collapse: collapse !important;
}

body.dark-mode th {
  background-color: #0f172a !important;
  color: #febd69 !important;
  border-bottom: 2px solid #334155 !important;
}

body.dark-mode td {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid #334155 !important;
}

/* Inputs, selectores y textareas */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #febd69 !important;
  outline: none !important;
}

/* Menú de categorías */
body.dark-mode .categorias-menu a {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #334155 !important;
}

body.dark-mode .categorias-menu a.active,
body.dark-mode .categorias-menu a:hover {
  background-color: #febd69 !important;
  color: #0f172a !important;
}

/* -------------------------------------------------------------------------- */
/* 5. ARREGLO ABSOLUTO PARA EL FOOTER                                         */
/* -------------------------------------------------------------------------- */

body.dark-mode footer,
body.dark-mode .footer,
body.dark-mode .site-footer {
  background-color: #1e293b !important;
  background: #1e293b !important;
  border-top: 1px solid #334155 !important;
}

body.dark-mode footer,
body.dark-mode footer p,
body.dark-mode footer span,
body.dark-mode footer h1,
body.dark-mode footer h2,
body.dark-mode footer h3,
body.dark-mode footer h4,
body.dark-mode footer div,
body.dark-mode footer li,
body.dark-mode footer small,
body.dark-mode footer .copyright,
body.dark-mode footer .text-muted {
  color: #ffffff !important;
}

body.dark-mode footer a {
  color: #febd69 !important;
}

body.dark-mode footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}