/* 2026-10-02: grupos del menu lateral que se expanden y contraen (Shared/GrupoMenu.razor). */
.pl-nav-grupo {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: 10px 0 2px 0; padding: 8px 12px; border: 0; border-radius: var(--pl-radius, 10px);
    background: transparent; color: rgba(255,255,255,0.62); cursor: pointer;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
.pl-nav-grupo:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pl-nav-grupo.activo { color: #FACC15; }
.pl-nav-grupo-flecha { font-size: 12px; transition: transform .2s ease; }
.pl-nav-grupo.abierto .pl-nav-grupo-flecha { transform: rotate(180deg); }
.pl-nav-grupo-items { animation: pl-nav-abrir .18s ease-out; }
@keyframes pl-nav-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 2026-10-05 (d, pedido de Jorge): menu lateral, que se distinga bien el GRUPO (lo que se expande) de sus OPCIONES.
   IGUAL EN TODOS LOS PROYECTOS (este bloque es el mismo en cada wwwroot/css/menu.css).
   - Fondo: el mismo azul de siempre pero con menos degradado (2026-10-05 h): ya no termina en celeste, para que se lean las letras.
   - Grupo: fila tipo boton, con icono propio, texto blanco en negrita y flecha. Inicio / Dashboard con el mismo peso.
   - Grupo abierto: panel mas oscuro que envuelve el titulo y sus opciones.
   - Opciones: con sangria y linea guia, letra mas pequena e icono sin recuadro.
   - Opcion actual: barra y fondo naranja; el icono de su grupo tambien en naranja.
   - Celular / tableta: filas mas altas para tocar con el dedo.
   El menu compacto (solo iconos, .pl-compacto) queda igual. */

html .mud-drawer { background: linear-gradient(to bottom, #172554 0%, #1E3A8A 35%, #1D4ED8 80%, #2158DC 100%) !important; }

.pl-sidebar:not(.pl-compacto) .pl-nav-bloque { margin: 6px 0; border: 1px solid transparent; border-radius: 12px; transition: background .15s, border-color .15s; }
.pl-sidebar:not(.pl-compacto) .pl-nav-bloque.abierto { background: rgba(4, 10, 40, .38); border-color: rgba(255, 255, 255, .12); padding-bottom: 8px; }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo {
    justify-content: flex-start; gap: 10px; margin: 0; padding: 9px 10px;
    color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2;
}
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo.activo { color: #fff; }
.pl-nav-grupo-icono {
    width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.pl-nav-grupo.activo .pl-nav-grupo-icono { background: #F97316; }
.pl-nav-grupo-texto { flex: 1; min-width: 0; }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-flecha { color: rgba(255, 255, 255, .75); }

/* Opciones sueltas (Inicio / Dashboard, usuario): mismo peso que el titulo de un grupo. */
.pl-sidebar:not(.pl-compacto) > .pl-nav-item,
.pl-sidebar:not(.pl-compacto) > :not(.pl-nav-bloque) > .pl-nav-item { padding: 9px 11px; font-size: 13.5px; font-weight: 700; color: #fff; }
.pl-sidebar:not(.pl-compacto) > .pl-nav-item .icon,
.pl-sidebar:not(.pl-compacto) > :not(.pl-nav-bloque) > .pl-nav-item .icon { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }

.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items { margin: 2px 6px 0 22px; padding-left: 6px; border-left: 2px solid rgba(255, 255, 255, .22); }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item {
    padding: 7px 8px; margin-bottom: 2px; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.25;
    color: rgba(255, 255, 255, .82); border-radius: 8px; box-shadow: none;
}
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item .icon { width: 18px; height: 18px; background: transparent; font-size: 14px; opacity: .85; }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item:hover .icon { background: transparent; opacity: 1; }
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item.active {
    background: rgba(249, 115, 22, .26); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #F97316;
}
.pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item.active .icon { background: transparent; opacity: 1; }

/* Celular / tableta (pantalla angosta o tactil): filas mas altas y letra un poco mayor. */
@media (max-width: 959.98px), (pointer: coarse) {
    .pl-sidebar:not(.pl-compacto) .pl-nav-grupo { padding: 11px 10px; font-size: 14.5px; min-height: 48px; }
    .pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item { padding: 11px 10px; font-size: 14px; min-height: 44px; }
    .pl-sidebar:not(.pl-compacto) .pl-nav-grupo-items .pl-nav-item .icon { width: 20px; height: 20px; font-size: 16px; }
    .pl-sidebar:not(.pl-compacto) .pl-nav-item:hover { transform: none; }
}