/* ==========================================================
   MENÚ LATERAL IZQUIERDO - FIJO Y COLAPSABLE (AISLADO)
   Solo afecta al sidebar cuando body tiene .layout-fixed
   No sobrescribe otros estilos del proyecto.
   ========================================================== */

/* El layout-fixed ya lo genera config/adminlte.php: 'layout_fixed_sidebar' => true
   Estas reglas son refuerzo aislado para garantizar comportamiento fijo
   sin interferir con el resto de la UI. */

body.layout-fixed .main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    overflow-y: hidden;
    z-index: 1038;
}

/* El contenedor del menú usa OverlayScrollbars (AdminLTE), permitir scroll interno */
body.layout-fixed .main-sidebar .sidebar {
    height: calc(100vh - 57px); /* 57px aprox altura brand-link */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Transición suave solo para el layout fijo + mini */
body.layout-fixed.sidebar-mini .content-wrapper,
body.layout-fixed.sidebar-mini .main-footer,
body.layout-fixed.sidebar-mini .main-header {
    transition: margin-left .3s ease-in-out, width .3s ease-in-out !important;
}

body.layout-fixed.sidebar-mini .main-sidebar,
body.layout-fixed.sidebar-mini .brand-link {
    transition: width .3s ease-in-out !important;
}

/* Estado colapsado (AdminLTE añade .sidebar-collapse al body via pushmenu) */
@media (min-width: 992px) {
    body.layout-fixed.sidebar-mini.sidebar-collapse .content-wrapper,
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-footer,
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-header {
        margin-left: 4.6rem !important;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar {
        width: 4.6rem !important;
    }

    /* Ocultar texto cuando colapsado, mostrar solo icono (comportamiento nativo AdminLTE) */
    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
    body.layout-fixed.sidebar-mini.sidebar-collapse .brand-text,
    body.layout-fixed.sidebar-mini.sidebar-collapse .sidebar .user-panel .info {
        opacity: 0;
        visibility: hidden;
        white-space: nowrap;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover {
        width: 250px !important;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text {
        opacity: 1;
        visibility: visible;
    }
}

/* Navbar fijo complementario - solo cuando layout-navbar-fixed activo (config layout_fixed_navbar=true) */
body.layout-navbar-fixed .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1037;
}

body.layout-navbar-fixed .content-wrapper {
    margin-top: 57px; /* altura navbar */
}

/* En móviles el pushmenu funciona como overlay, no aplicar margen */
@media (max-width: 991.98px) {
    body.layout-fixed .content-wrapper,
    body.layout-fixed .main-footer,
    body.layout-fixed .main-header {
        margin-left: 0 !important;
    }
    body.layout-navbar-fixed .content-wrapper {
        margin-top: 0;
    }
}

/* ==========================================================
   LANGUAGE SWITCHER (topnav_right) - Icono ES/EN centrado
   Convierte 'Idioma/Language' en badge circular con código
   ========================================================== */

/* El <a> del dropdown de idioma (config/adminlte.php: 'current_language') */
.navbar-nav .nav-item.dropdown .nav-link.lang-switcher {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 54px;
    height: 32px;
    padding: 0 10px !important;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

/* Icono globo: centrado vertical con el texto ES/EN */
.navbar-nav .nav-link.lang-switcher i {
    font-size: 1rem;
    line-height: 1;
    margin-right: 0 !important;
}

/* Dropdown del idioma: centrado bajo el badge */
.navbar-nav .nav-item.dropdown .dropdown-menu {
    min-width: 10rem;
}

/* ==========================================================
   SIDEBAR - Iconos solo cuando está cerrado (colapsado)
   Aplica a desplegables (has-treeview) y módulos (link)
   con la clase .icon-collapse-only en el <a.nav-link>
   ========================================================== */

/* Estado expandido (sidebar abierto): ocultar iconos marcados */
body.layout-fixed.sidebar-mini:not(.sidebar-collapse) .nav-link.icon-collapse-only .nav-icon,
body:not(.sidebar-collapse) .nav-link.icon-collapse-only .nav-icon {
    display: none !important;
}

/* Estado colapsado (sidebar cerrado): mostrar solo iconos, centrado */
@media (min-width: 992px) {
    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-link.icon-collapse-only .nav-icon {
        display: inline-block !important;
        margin-right: 0 !important;
        text-align: center;
        width: 1.6rem;
    }

    /* Ocultar solo el texto del <p> manteniendo visible el caret .right */
    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-link.icon-collapse-only p {
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0 !important;
        color: transparent !important;
        white-space: nowrap;
        position: relative;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-link.icon-collapse-only {
        justify-content: center;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        position: relative;
    }
}

/* En hover del sidebar colapsado (se expande a 250px) ocultar iconos de nuevo y mostrar texto */
@media (min-width: 992px) {
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-link.icon-collapse-only .nav-icon {
        display: none !important;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-link.icon-collapse-only p {
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 1rem !important;
        color: #fff !important;
    }

    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-link.icon-collapse-only {
        justify-content: flex-start;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

/* Fallback sin layout-fixed */
body.sidebar-collapse .nav-link.icon-collapse-only .nav-icon {
    display: inline-block;
}
body:not(.sidebar-collapse) .nav-link.icon-collapse-only .nav-icon {
    display: none;
}
body.sidebar-collapse .nav-link.icon-collapse-only {
    justify-content: center;
    position: relative;
}
body:not(.sidebar-collapse) .nav-link.icon-collapse-only {
    justify-content: flex-start;
}
/* Flecha para módulos: mismo icono, pequeño y centrado, distinto de desplegables */
body.layout-fixed.sidebar-mini.sidebar-collapse .nav-treeview .nav-link.module-arrow .nav-icon.fa-chevron-right,
body.sidebar-collapse .nav-treeview .nav-link.module-arrow .nav-icon.fa-chevron-right {
    font-size: 10px !important;
    width: 1.6rem !important;
    color: #8aa0b8 !important;
    opacity: 0.9;
}
body.layout-fixed.sidebar-mini.sidebar-collapse .nav-item.has-treeview > .nav-link.icon-collapse-only .nav-icon {
    font-size: 1rem !important;
    color: #fff !important;
}
body.sidebar-collapse .nav-link.icon-collapse-only p {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0 !important;
    color: transparent !important;
}
body.sidebar-collapse .main-sidebar:hover .nav-link.icon-collapse-only p {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
    color: #fff !important;
}
body:not(.sidebar-collapse) .nav-link.icon-collapse-only p {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
    color: #fff !important;
}

/* === Distintivo para desplegables: oculto cuando está cerrado, visible al hover === */
@media (min-width: 992px) {
    /* Cerrado (4.6rem): ocultar flechita */
    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-item.has-treeview > .nav-link.icon-collapse-only .right {
        display: inline-block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        bottom: auto !important;
        font-size: 12px !important;
        width: auto !important;
        height: auto !important;
        transform: translateY(-50%) !important;
        color: #8aa0b8 !important;
        pointer-events: none;
    }

    /* Hover (250px): mostrar flechita en tamaño original a la derecha */
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-item.has-treeview > .nav-link.icon-collapse-only .right {
        opacity: 1 !important;
        visibility: visible !important;
        right: 0.8rem !important;
        transform: translateY(-50%) !important;
        font-size: 12px !important;
    }

    /* línea arriba de cada desplegable solo cuando está cerrado */
    body.layout-fixed.sidebar-mini.sidebar-collapse .nav-item.has-treeview > .nav-link.icon-collapse-only {
        border-top: 2px solid rgba(255,255,255,0.10);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }

    /* al hacer hover (se expande) quitar la línea superior para volver al diseño inicial */
    body.layout-fixed.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-item.has-treeview > .nav-link.icon-collapse-only {
        border-top: none;
    }
}

/* Fallback distintivo sin layout-fixed */
body.sidebar-collapse .nav-item.has-treeview > .nav-link.icon-collapse-only .right {
    display: inline-block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    bottom: auto !important;
    font-size: 12px !important;
    transform: translateY(-50%) !important;
    color: #8aa0b8 !important;
    pointer-events: none;
}
body.sidebar-collapse .main-sidebar:hover .nav-item.has-treeview > .nav-link.icon-collapse-only .right {
    opacity: 1 !important;
    visibility: visible !important;
    right: 0.8rem !important;
}
body.sidebar-collapse .nav-item.has-treeview > .nav-link.icon-collapse-only {
    border-top: 2px solid rgba(255,255,255,0.10);
}
body.sidebar-collapse .main-sidebar:hover .nav-item.has-treeview > .nav-link.icon-collapse-only {
    border-top: none;
}
body:not(.sidebar-collapse) .nav-item.has-treeview > .nav-link.icon-collapse-only {
    border-top: none;
}