/* --- 1. PALETA DE COLORES Y VARIABLES GLOBALES --- */
:root {
  --primary-color: #2c3e50; /* Un azul oscuro y profesional */
  --primary-hover: #34495e; /* Un poco más claro para hover */
  --sidebar-bg: #f8f9fa;    /* Mantenemos el gris claro de Bootstrap */
  --active-link-bg: #e9ecef; /* Fondo para el enlace activo */
  --border-color: #dee2e6;   /* Color de borde sutil */
  --text-color: #343a40;
  --text-muted: #6c757d;
}

body {
  /* Aumentamos ligeramente el tamaño de fuente base para mejor legibilidad */
  background-color: #fff; /* Default white background */
  color: #333; /* Default dark text color */
  font-size: .875rem;
}

/* * Sidebar
 * Usamos 'position: sticky' para que se "pegue" debajo del header
 */
.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0; /* Lo pegamos a la parte superior */
  height: 100vh; /* Ocupa toda la altura de la ventana */
  padding-left: 0;
  padding-right: 0;
  z-index: 1020; /* Debe estar por encima del contenido pero debajo del header */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  /* Este div interno maneja el scroll */
  position: relative;
  top: 0;
  height: 100%;
  padding-top: 56px; /* Dejamos espacio para el header que está por encima */
  overflow-x: hidden;
  overflow-y: auto; /* Permite scroll si el menú es muy largo */
}

/* Estilos de los enlaces del Sidebar */
.sidebar .nav-link {
  font-weight: 500;
  color: var(--text-color);
  border-radius: 0.25rem; /* Bordes redondeados sutiles */
  margin: 0 0.5rem 0.1rem; /* Espaciado entre enlaces */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Transición suave */
}

.sidebar .nav-link .bi {
  margin-right: 8px;
  color: var(--text-muted);
  transition: color 0.2s ease-in-out;
}

.sidebar .nav-link.active {
  color: var(--primary-color);
  background-color: var(--active-link-bg); /* Fondo para destacar el enlace activo */
}

.sidebar .nav-link:hover {
  background-color: var(--active-link-bg);
}

.sidebar .nav-link:hover .bi,
.sidebar .nav-link.active .bi {
  color: var(--primary-color);
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/* --- 2. BARRA DE NAVEGACIÓN (HEADER) --- */
.navbar.bg-primary {
  background-color: var(--primary-color) !important;
  z-index: 1030; /* Aseguramos que esté por encima de todo */
}

.navbar-brand {
  font-weight: 600;
}


.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

/* --- FIX PARA EL BUG DEL DROPDOWN --- */
/* * Esto fuerza al dropdown a no afectar la altura del navbar.
 * Es un fix conocido para este bug de Bootstrap 5 en 
 * contenedores sticky/flex.
 */
.navbar .nav-item.dropdown {
  position: static;
}
.navbar .nav-item.dropdown .dropdown-menu {
  /* Asegura que el menú se alinee con el borde derecho del navbar */
  right: 0;
  left: auto;
  position: absolute;
}

/* --- 3. ESTILOS PARA EL CONTENIDO PRINCIPAL --- */
/* Hacemos que las tarjetas tengan un borde en lugar de una sombra */
.card {
  border: 1px solid var(--border-color);
  box-shadow: none !important; /* Eliminamos la sombra de Bootstrap */
}

/* Refinamos el estilo de las alertas de advertencia */
.alert-danger.border-0 {
  border-left: 5px solid #dc3545 !important; /* Borde izquierdo rojo */
  background-color: #fdf7f7 !important; /* Fondo muy claro */
}


/* --- 4. MEDIA QUERIES (RESPONSIVE) --- */
@media (max-width: 767.98px) {
  .sidebar {
    /* En móvil, el sidebar no es pegajoso, es parte del colapso */
    position: static;
    height: auto;
    top: auto;
    z-index: 100; /* Restauramos z-index */
  }
  .sidebar-sticky {
    position: static;
    height: auto;
    padding-top: .5rem; /* Restauramos el padding */
  }
}

/* --- 5. TEMA OSCURO --- */
/* Cuando el body tiene el atributo data-bs-theme="dark" */
[data-bs-theme="dark"] {
  /* ¡NUEVO! Aplicamos el color de fondo y texto base para el tema oscuro */
  color-scheme: dark;
  background-color: #212529; /* Fondo oscuro general */
  color: var(--text-color);

  /* Sobreescribimos nuestras variables CSS personalizadas */
  --primary-color: #4e73df; /* Un azul más brillante para el modo oscuro */
  --primary-hover: #6b8eff;
  --sidebar-bg: #212529; /* bg-dark de Bootstrap */
  --active-link-bg: #495057; /* Un gris más oscuro */
  --border-color: #495057;
  --text-color: #f8f9fa; /* Texto claro */
  --text-muted: #adb5bd; /* Gris claro */
}

/* Ajustes específicos para el tema oscuro */
[data-bs-theme="dark"] .card {
  background-color: #2c3034; /* Un poco más claro que el fondo */
  border-color: var(--border-color);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .list-group-item {
  background-color: #343a40;
}

[data-bs-theme="dark"] .alert-danger.border-0 {
  background-color: #3a2a2c !important;
}