/* ==========================================================================
   SIDEBAR — Menú por Gerencias
   Estilos del menú lateral agrupado por gerencia / departamento (acordeón).
   Portado desde la maqueta propuesta-menu.blade.php; raíz #sidebar.
   Markup: resources/views/layouts/sidebar.blade.php
   Script: public/js/sidebar-gerencias.js
   ========================================================================== */

/* Reutiliza el aspecto del sidebar real */
#sidebar .icono {
    background: #f3f4f6; border-radius: 9999px; padding: .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
#sidebar a { color: #111827; }
#sidebar a:visited { color: #111827; }

/* Cabecera de sección (gerencia) desplegable — SOLO por clic */
.pm-seccion > .pm-toggle { cursor: pointer; }
.pm-toggle .pm-flecha { transition: transform .2s ease; }
.pm-seccion.is-open > .pm-toggle .pm-flecha { transform: rotate(90deg); }
.pm-seccion.is-open > .pm-toggle .pm-titulo { color: #e30613; }

/* Cuerpo de la gerencia: cerrado por defecto, se abre con clic */
.pm-opciones { display: none; }
.pm-seccion.is-open > .pm-opciones { display: block; }

/* Subgrupo (subtítulo) desplegable — también SOLO por clic */
.pm-grupo-toggle { cursor: pointer; }
.pm-grupo-toggle .pm-grupo-flecha { transition: transform .2s ease; }
.pm-grupo.is-open .pm-grupo-toggle .pm-grupo-flecha { transform: rotate(90deg); }
#sidebar .pm-grupo.is-open .pm-grupo-toggle .pm-grupo-label { color: #e30613; }

/* Opciones del subgrupo: ocultas hasta clic en el subtítulo */
.pm-grupo-opciones { display: none; }
.pm-grupo.is-open .pm-grupo-opciones { display: block; }

.pm-opcion:hover { background: #fef2f2; }

/* Opción activa: el módulo en el que estás. Se marca en rojo y su
   gerencia/departamento quedan desplegados por JS (ver sidebar-gerencias.js). */
#sidebar .pm-opcion.pm-activo { background: #fef2f2; }
#sidebar .pm-opcion.pm-activo > a { color: #e30613; font-weight: 700; }

/* Títulos de departamento: gris oscuro para buena legibilidad (antes gris claro).
   #sidebar gana en especificidad al text-gray-400 del markup, sin romper el
   rojo del estado abierto (que tiene aún más especificidad). */
.pm-grupo-label { letter-spacing: .03em; }
#sidebar .pm-grupo-label { color: #4b5563; }