/*
  navbar.css - Estilos específicos para la barra de navegación
  Asegúrate de que este archivo se cargue DESPUÉS de tu archivo CSS principal
  o de Bootstrap si necesitas sobrescribir estilos de Bootstrap.
*/

/* --- Variables para la Navbar en modo CLARO (por defecto) --- */
:root {
  --navbar-bg-color: #f8f9fa; /* Fondo claro para la navbar */
  --navbar-link-color: #212529; /* Color de texto oscuro para enlaces */
  --navbar-link-hover-color: #0A4D8F; /* Color azul al pasar el mouse */
  --navbar-link-active-color: #0A4D8F; /* Color azul para enlace activo en CLARO */
  --navbar-toggler-icon-background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Ícono hamburguesa oscuro */
  --navbar-border-color: #e9ecef; /* Color del borde inferior */
}

/* --- Variables para la Navbar en modo OSCURO --- */
html[data-bs-theme="dark"] {
  --navbar-bg-color: #212529; /* Fondo oscuro para la navbar */
  --navbar-link-color: #f8f9fa; /* Color de texto claro para enlaces */
  --navbar-link-hover-color: #0A4D8F; /* Mantiene el azul al pasar el mouse */
  --navbar-link-active-color: #f8f9fa; /* ¡NUEVA VARIABLE! Blanco para enlace activo en OSCURO */
  --navbar-toggler-icon-background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Ícono hamburguesa claro */
  --navbar-border-color: #495057; /* Color del borde inferior oscuro */
}

/* --- Estilos de la Navbar --- */

/* Fondo y borde de la Navbar */
.navbar {
  background-color: var(--navbar-bg-color) !important;
  border-bottom: 1px solid var(--navbar-border-color) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Color de los enlaces del menú */
.navbar-nav .nav-link {
  position: relative;
  padding: 8px 12px;
  color: var(--navbar-link-color);
  transition: color 0.3s ease;
}

/* Línea inferior al pasar el mouse */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: var(--navbar-link-hover-color);
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

/* Estado activo del enlace */
.navbar-nav .nav-link.active::after {
  width: 100%;
}

.navbar-nav .nav-link.active {
  color: var(--navbar-link-active-color); /* ¡AQUÍ ESTÁ EL CAMBIO CLAVE! */
}

/* Estilo del botón del toggler (hamburguesa) */
.navbar-toggler {
  border-color: var(--navbar-link-color) !important;
}

.navbar-toggler-icon {
  background-image: var(--navbar-toggler-icon-background);
}

/* Estilo del botón de cambio de tema */
#themeToggle.btn-outline-secondary {
  color: var(--navbar-link-color);
  border-color: var(--navbar-link-color);
  transition: color 0.3s ease, border-color 0.3s ease;
}

#themeToggle.btn-outline-secondary:hover {
  background-color: var(--navbar-link-hover-color);
  color: #fff;
  border-color: var(--navbar-link-hover-color);
}

#themeToggle i {
  font-size: 1.2rem;
}

/* Asegura que el logo de la navbar sea visible en ambos modos si es un texto */
.navbar-brand {
  color: var(--navbar-link-color) !important;
  transition: color 0.3s ease;
}