/* ----------- Sidebar / Menú lateral -----------
   El color de fondo y el del texto los pone vistas/plantilla.php desde
   "Colores del sistema"; aquí va únicamente la forma. */
body.dark-mode .offcanvas {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* El texto blanco de los enlaces del menú lateral (".nav-link" de dentro) ya
   lo da ".offcanvas.text-white" del propio elemento (vistas/modulos/menu.php),
   heredado por sus hijos en los dos subtemas — no hace falta forzarlo aquí.
   ANTES había una regla sin acotar (".nav-link, .dropdown-item, a { color:
   #fff !important }") que se colaba en TODO el sistema, no solo el menú
   lateral: pintaba de blanco cualquier enlace de cualquier pantalla (perdían
   su color de marca, --c-primary) y, peor, dejaba el texto de la pestaña
   activa de "Salud mental" (saludMentalAdmin, .nav-tabs) blanco sobre un
   fondo que Bootstrap no oscurece solo (".nav-tabs .nav-link.active" usa
   var(--bs-body-bg), blanco) — texto invisible en modo oscuro. Ver el color
   de enlace normal más abajo en tema.css y las pestañas justo después de eso. */

/* El panel del menú no se pinta con el fondo plano del modo oscuro: conserva
   el color configurado en "Colores del sistema", igual que en modo claro. */
body.dark-mode .menu-lateral.bg-primary { color: inherit; }

/* El panel arranca justo debajo de la barra superior (su altura la mide
   vistas/js/menuLateral.js), para que el botón de hamburguesa nunca quede
   tapado y pueda contraer el menú que abrió. */
/* Con .offcanvas delante para ganarle en especificidad a .offcanvas-start,
   que fija top: 0. */
.offcanvas.menu-lateral {
  top: var(--alto-navbar, 56px);
  height: calc(100% - var(--alto-navbar, 56px));
}

.menu-lateral {
  width: 290px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.25);
}

/* La barra superior queda por encima del panel y de su fondo oscurecido. */
.navbar.bg-primary {
  position: relative;
  z-index: 1046;
}

/* ----------- Cabecera: marca y perfil ----------- */
.menu-lateral-cabecera {
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* .marca-birreton (vistas/css/tema.css) pone el icono arriba y centrado;
   aquí solo se ajusta el espaciado propio de la cabecera del menú. */
.menu-lateral-marca {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.3rem;
  text-align: center;
}

.menu-lateral-birrete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 0.85rem;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 1.25rem;
}

.menu-lateral-perfil {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----------- Cuerpo: grupos de accesos ----------- */
.menu-lateral-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem 0.75rem 1.25rem;
}

.menu-lateral-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.1rem 0.35rem 0.45rem;
}

/* El primer grupo no lleva título: no necesita separarse de la cabecera. */
.menu-lateral-cuerpo > .menu-lateral-lista:first-child { margin-top: 0.15rem; }

.menu-lateral-lista { gap: 0.15rem; }

.menu-lateral .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.menu-lateral .nav-link:hover,
.menu-lateral .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.16);
  transform: translateX(3px);
}

/* Página en la que se está: barra a la izquierda y fondo más marcado. */
.menu-lateral .nav-link.activo {
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* Icono en pastilla, del mismo ancho en todos: los textos quedan alineados. */
.menu-lateral-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 0.55rem;
  background-color: rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
}

.menu-lateral .nav-link:hover .menu-lateral-icono,
.menu-lateral .nav-link.activo .menu-lateral-icono {
  background-color: rgba(255, 255, 255, 0.28);
}

.menu-lateral-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------- Pie: cerrar sesión ----------- */
.menu-lateral-pie {
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.menu-lateral-salir {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.menu-lateral-salir:hover { background-color: rgba(255, 255, 255, 0.16); }

/* ----------- Botón de hamburguesa ----------- */
.btn-menu-lateral {
  width: 42px;
  transition: transform 0.2s ease;
}

/* El icono es siempre la hamburguesa, también con el menú abierto: el mismo
   botón sigue cerrándolo, pero sin convertirse en una "X" que se confundía con
   cerrar la página. Con el menú desplegado solo se marca que está activo. */
.btn-menu-lateral.menu-abierto {
  background-color: rgba(255, 255, 255, 0.22);
}

/* ----------- Switch modo oscuro con íconos 🌞 / 🌙 ----------- */
.modo-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.modo-label i {
  transition: transform 0.3s ease;
  font-size: 1.1rem;
}

body.dark-mode .modo-label i.fa-moon {
  color: #ffc107;
  transform: rotate(10deg);
}

body:not(.dark-mode) .modo-label i.fa-sun {
  color: #f39c12;
  transform: rotate(-10deg);
}