/* Menu lateral: sidebar fija en escritorio, offcanvas en mobile, mas la
   barra superior y el footer de marca. Usa las variables de color que
   inyecta Theme::cssVariables() (ver app/Theme.php).
   Extraidos del <style> inline que estaba en layout/navbar.php. */
:root {
    --sidebar-width: 260px;
}

.custom-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Crece para ocupar el alto disponible y empujar el footer al fondo
   de la pantalla cuando el contenido de la página es corto (ver
   body.d-flex.flex-column.min-vh-100 en layout/head.php). */
.app-shell {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.custom-logo {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/* Separa el logo del resto del menú, en vez de que quede pegado. */
.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    margin-bottom: .75rem;
}

/* Botón de logout sutil en reposo (no un bloque rojo fijo) que se
   vuelve rojo recién al pasar el mouse/tocarlo. */
.btn-logout {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
}

.btn-logout:hover,
.btn-logout:focus-visible {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #fff;
    transform: translateY(-1px);
}

.custom-logo-sm {
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

.sidebar-user {
    background-color: rgba(255, 255, 255, .06);
    border-radius: 10px;
    box-shadow: var(--sombra-sm);
}

.sidebar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* Circulo de vidrio (antes blanco solido): ahora que el fondo de la
       sidebar es la foto institucional con un velo azul, un circulo
       blanco solido se sentia como un elemento pegado encima. Con
       transparencia + un borde interior sutil queda integrado al mismo
       material del login/inicio. */
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.sidebar-rol-badge {
    background-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
    font-size: .7rem;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, .85);
    border-radius: 8px;
    padding: .55rem .9rem;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

/* El fondo de la sidebar ya es el azul principal, así que el ítem
   activo se marca con el rojo secundario para que se note, con sombra
   propia para que quede "levantado" del resto del menú. */
.sidebar-nav .nav-link.active {
    /* Antes un bloque solido de --color-secundario: sobre la foto+velo
       de fondo se veia como una etiqueta pegada encima. El mismo
       resaltado de vidrio que usa el resto del sistema (login, inicio)
       lo integra sin perder la marca de "item activo". */
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.sidebar-nav .nav-link.disabled {
    opacity: .5;
    pointer-events: none;
}

/* Foco visible por teclado, más notorio que el outline por defecto sobre fondo oscuro. */
.sidebar-nav .nav-link:focus-visible {
    outline: 2px solid var(--color-secundario);
    outline-offset: 2px;
}

/* Los tres paneles de navegación (barra mobile, offcanvas y sidebar de
   escritorio) comparten el azul principal en vez del gris genérico de
   Bootstrap, con la misma sombra para que se vean como un componente. */
/* Fondo de vidrio: la misma foto institucional del login/inicio (ya
   recortada y blureada de antemano en sidebar-fondo.jpg, asi no se le
   pide al navegador que desenfoque una imagen grande en vivo), con un
   velo azul semitransparente encima del mismo color que el tema. La
   foto queda insinuada detras, mezclada con el azul, para que sidebar,
   login e inicio se sientan la misma familia visual en vez de un
   bloque de color plano. */
.sidebar,
.offcanvas,
.navbar-marca {
    background-image:
        linear-gradient(190deg,
            color-mix(in srgb, var(--color-primario) 92%, black) 0%,
            color-mix(in srgb, var(--color-primario) 78%, #0f172a) 55%,
            color-mix(in srgb, var(--color-primario) 60%, #1d4ed8) 130%),
        url('../img/sidebar-fondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.offcanvas {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

/* Mismo fondo de vidrio que el sidebar/offcanvas/navbar-marca (foto +
   velo azul), en vez del color solido de antes: quedaba de otro tono
   apenas mas oscuro/plano al lado de la sidebar y se notaba el corte. */
.site-footer-bar {
    background-image:
        linear-gradient(190deg,
            color-mix(in srgb, var(--color-primario) 92%, black) 0%,
            color-mix(in srgb, var(--color-primario) 78%, #0f172a) 55%,
            color-mix(in srgb, var(--color-primario) 60%, #1d4ed8) 130%),
        url('../img/sidebar-fondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 3px solid var(--color-secundario);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .15);
}

@media (min-width: 992px) {
    /*
     * Sidebar en position:fixed (no flex) a propósito: si estuviera dentro
     * de un flex container con la sidebar en height:100vh, el contenedor
     * quedaba forzado a medir 100vh como mínimo aunque el contenido real
     * fuera más corto, dejando un hueco vacío antes del footer.
     */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
    }

    .main-content {
        margin-left: var(--sidebar-width);
    }

    /* El footer vive fuera de .main-content (para no romper el
       footer-pegado-abajo cuando el contenido es corto), así que
       necesita el mismo corrimiento a mano. */
    .site-footer {
        margin-left: var(--sidebar-width);
    }
}