:root {
    --navbar-height: 56px;
    --sidebar-width-expanded: 250px;
    --sidebar-width-collapsed: 70px;
    --sidebar-color: #ffffff;
    --sidebar-hover-color: #dfdfe2;
    --sidebar-link-color: #000000;
    --sidebar-text-color: #000000;
    --navbar-bg-color: #4723d9;
    --color-base-azul: #4723d9;
    --color-azul-hover: #0a2d9a; /* Un poco más oscuro para el hover */
    --color-texto-claro: #ffffff;
}

body {
    padding-top: var(--navbar-height);
    transition: padding-left 0.3s;
}

.dropdown-item:hover {
    background-color: var(--sidebar-hover-color) !important;
    color: var(--sidebar-text-color);
}

/* Contenido Principal: Ajusta el padding-left cuando el sidebar está abierto */
.main-content {
    padding: 20px;
    transition: margin-left 0.3s, padding-left 0.3s;
}

/* Sidebar Wrapper - Estilos base */
.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 0;
    background-color: var(--sidebar-color);
    z-index: 1050;
    overflow-x: hidden;
    transition: all 0.3s ease;
    padding-top: var(--navbar-height);
}

/* Header del Sidebar (Visible solo en Móvil y Tablet) */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    height: var(--navbar-height);
    /* Forzamos el color amarillo de la variable */
    background: var(--navbar-bg-color) !important;
}

/* Estilos para el logo dentro del sidebar header */
.sidebar-header .navbar-brand {
    height: 35px;
    width: auto;
    margin-right: 1rem;
}

.sidebar-header #sidebar-close-btn {
    opacity: 1;
    padding: 0;
    margin-left: auto;
}
.sidebar-header .btn-close.text-reset {
    filter: invert(0) grayscale(100%) brightness(0.5);
    opacity: 1;
}
.sidebar-header .btn-close.text-reset:hover {
    filter: invert(0) grayscale(100%) brightness(0.2);
}

.sidebar-body {
    height: 100%;
    overflow-y: auto;
}

/* Ítems de la lista del menú */
.sidebar-body .list-group-item-action {
    color: var(--sidebar-link-color);
    background-color: transparent;
    border-radius: 0;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sidebar-body .list-group-item-action:hover,
.sidebar-body .list-group-item-action.active {
    background-color: var(--sidebar-hover-color) !important;
    color: var(--sidebar-text-color);
}
.sidebar-text {
    flex-grow: 1;
}

/* ESTILOS PARA PC Y LAPTOP (modo colapsado) */
@media (min-width: 992px) {
    /* Aseguramos que el sidebar empiece debajo del navbar */
    .sidebar-wrapper {
        top: var(--navbar-height);
        height: calc(100vh - var(--navbar-height));
        padding-top: 0;
    }

    /* Mostrar y expandir el sidebar por defecto en PC/Laptop */
    .sidebar-wrapper {
        width: var(--sidebar-width-expanded);
        z-index: 1000;
        transform: none !important;
        visibility: visible !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Body y Content: Aplica el padding para el sidebar expandido */
    body {
        padding-left: var(--sidebar-width-expanded);
    }
    .main-content {
    }

    /* Ocultar el header del sidebar en PC */
    .sidebar-header {
        display: none !important;
    }

    /* Ocultar el selector de ubicación de móvil en PC */
    .p-3.d-lg-none {
        display: none !important;
    }

    /* Sidebar Colapsado */
    .sidebar-wrapper.collapsed {
        width: var(--sidebar-width-collapsed);
    }

    /* Body y Content Colapsado: Aplica el padding para el sidebar de íconos */
    body.sidebar-colapsado {
        padding-left: var(--sidebar-width-collapsed);
    }

    /* Ocultar texto en el estado colapsado */
    .sidebar-wrapper.collapsed .sidebar-text {
        display: none;
        opacity: 0;
        width: 0;
    }

    /* Ajustar el padding de los ítems en el estado colapsado para centrar el ícono */
    .sidebar-wrapper.collapsed .list-group-item-action {
        justify-content: center;
        text-align: center;
        padding: 0.75rem 0.5rem !important;
    }
    .sidebar-wrapper.collapsed .list-group-item-action i {
        margin-right: 0 !important;
    }
}
/* ESTILOS PARA MÓVIL/TABLET */
@media (max-width: 991.98px) {
    .sidebar-body {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
    }

    /* El contenedor principal de la lista debe crecer para ocupar el espacio central */
    .sidebar-body .list-group.flex-grow-1 {
        overflow-y: auto;
    }
    .sidebar-wrapper {
        top: 0;
        height: 100vh;
        padding-top: 0;
    }

    /* Estado visible/Offcanvas en Móvil y Tablet */
    .sidebar-wrapper.show-mobile {
        width: var(--sidebar-width-expanded);
        transform: translateX(0);
    }

    /* Cubre el fondo cuando el menú está abierto */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1045;
        display: none;
    }
    .sidebar-backdrop.show-mobile {
        display: block;
    }
    .navbar-nav .dropdown-menu {
        position: absolute !important;
        /* Asegura que esté fuera de la lista y se renderice correctamente */
        margin-top: 0.5rem;
        /* aparezca encima de otros elementos del navbar */
        z-index: 1060;
    }

    .navbar-nav.d-flex.flex-row {
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
    }

    /* 'dropdown-menu-end' ya debería manejar esto, pero se puede forzar la posición */
    .navbar-nav .dropdown-menu.dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}
.offcanvas-start {
    left: auto;
    transform: none;
}
:root {
    /* Usaremos esta variable como color base para el 'azul' */
    --color-base-azul: #103cbe;
    --color-azul-hover: #0a2d9a; /* Un poco más oscuro para el hover */
    --color-texto-claro: #ffffff;
}

/* 1. Fondo de Color Azul (bg-azul) */
.bg-azul {
    background-color: var(--color-base-azul) !important;
    color: var(--color-texto-claro); /* Asegura que el texto sea blanco sobre el fondo oscuro */
}

/* 2. Botón de Color Azul (btn-azul) */
.btn-azul {
    /* Estilos base */
    color: var(--color-texto-claro);
    background-color: var(--color-base-azul);
    border-color: var(--color-base-azul);
    
    /* Pequeña animación */
    transition: all 0.3s ease;
}

/* Estilos para el estado :hover y :focus */
.btn-azul:hover,
.btn-azul:focus,
.btn-azul:active {
    color: var(--color-texto-claro);
    background-color: var(--color-azul-hover); /* Color más oscuro al pasar el ratón */
    border-color: var(--color-azul-hover);
    transform: translateY(-1px); /* Efecto sutil */
}

/* Estado deshabilitado */
.btn-azul:disabled {
    background-color: var(--color-base-azul);
    border-color: var(--color-base-azul);
    opacity: 0.65;
}