/* ===================================================================
   FIXES PARA RESPONSIVIDAD DEL NAVBAR Y SIDEBAR
   =================================================================== */

/* --- CONFIGURACIÓN GENERAL --- */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    transition: all 0.3s ease;
}

/* Overlay oscuro cuando el sidebar está abierto en móvil */
body.sidebar-open {
    overflow: hidden;
}

body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1009;  /* Justo debajo del sidebar */
}

/* --- NAVBAR PRINCIPAL --- */
.navbar-fixed-top {
    z-index: 1030;
}

.navbar-default {
    border: none;
}

/* Fix para el logo - mantener el tamaño original */
.navbar-brand {
    height: auto;
    padding: 10px 15px;
}

.navbar-brand img {
    height: 60px;
    width: auto;
    max-width: 100%;
}

/* En móvil/tablet (hasta 1023px): navbar más alto y logo más grande */
@media (max-width: 1023px) {
    .navbar {
        min-height: 70px !important;
    }
    
    .navbar-brand {
        padding: 10px 15px;
    }
    
    .navbar-brand img {
        height: 50px;
    }
    
    .navbar-header {
        min-height: 70px;
    }
}

/* Botones de navegación en navbar */
.navbar-toggle {
    border: 1px solid #ddd;
    background-color: transparent;
    padding: 9px 10px;
    display: block !important;  /* Asegurar que siempre sea visible por defecto */
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: #ddd;
}

.navbar-toggle .icon-bar {
    background-color: #888;
}

/* Ocultar botón SITIOS en desktop donde el menú está siempre expandido */
@media (min-width: 1024px) {
    .navbar-toggle.pull-left {
        display: none !important;  /* Ocultar botón SITIOS en desktop */
    }
}

/* Mostrar botón SITIOS solo en móvil/tablet (hasta 1023px) */
@media (max-width: 1023px) {
    .navbar-toggle.pull-left {
        display: block !important;  /* Mostrar botón SITIOS en móvil */
    }
}

/* Asegurar posición correcta de botones en navbar */
.navbar-header .pull-left {
    float: left !important;
}

.navbar-header .pull-right {
    float: right !important;
}

/* Botón hamburguesa del sidebar - siempre a la derecha */
#sidebarCollapse {
    float: right !important;
    margin: 30px 20px !important;
}

/* Asegurar que el botón hamburguesa sea visible en móvil y tablet (hasta 1023px) */
@media (max-width: 1023px) {
    #sidebarCollapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Ocultar botón hamburguesa solo en desktop */
@media (min-width: 1024px) {
    #sidebarCollapse {
        display: none !important;
    }
}

/* --- SIDEBAR A LA DERECHA (DISEÑO ORIGINAL) --- */
/* Mantener el diseño original de fen-theme.css pero mejorar responsividad */
nav#sidebar,
#sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    background: #eee !important;
    color: #333;
    transition: all 0.3s ease;
    position: fixed !important;
    top: 70px !important;                 /* Reducido de 80px */
    right: 0 !important;  /* SIDEBAR A LA DERECHA */
    left: auto !important;
    height: calc(100vh - 70px) !important;  /* Ajustado */
    z-index: 1010 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
    padding-top: 15px !important;         /* Espacio superior para los items */
}

/* Items del sidebar con espacio superior */
nav#sidebar > ul,
#sidebar > ul,
nav#sidebar .list-group,
#sidebar .list-group {
    padding-top: 10px !important;
}

nav#sidebar.active,
#sidebar.active {
    margin-right: -280px !important;  /* Ocultar hacia la derecha */
    margin-left: 0 !important;
}

/* --- CONTENIDO PRINCIPAL (A LA IZQUIERDA DEL SIDEBAR) --- */
div#contenido,
#contenido {
    width: calc(100% - 280px) !important;
    padding: 20px;
    min-height: calc(100vh - 70px);      /* Ajustado de 80px */
    transition: all 0.3s ease;
    margin-right: 280px !important;  /* Margen a la derecha para el sidebar */
    margin-left: 0 !important;
    margin-top: 70px !important;     /* Reducido de 80px - menos espacio blanco */
    float: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Cuando el sidebar está oculto (tiene clase active) */
body nav#sidebar.active ~ div#contenido,
body #sidebar.active ~ div#contenido,
.wrapper nav#sidebar.active ~ div#contenido,
.wrapper #sidebar.active ~ div#contenido {
    width: 100% !important;
    margin-right: 0 !important;
}

/* --- BOTONES DE NAVEGACIÓN --- */
.navbar-toggle {
    border: 1px solid #ddd;
    background-color: transparent;
    padding: 9px 10px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: #ddd;
}

.navbar-toggle .icon-bar {
    background-color: #888;
}

/* ===================================================================
   MEDIA QUERIES PARA DIFERENTES TAMAÑOS DE PANTALLA
   =================================================================== */

/* --- PANTALLAS MEDIANAS (1024px - 1200px) --- */
@media (max-width: 1200px) and (min-width: 1024px) {
    /* Ajustar botones en el breakpoint crítico */
    .navbar-toggle.pull-left {
        margin: 3px 5px !important;
        padding: 8px 10px !important;
    }
    
    #sidebarCollapse {
        margin: 3px 10px !important;
    }
    
    .navbar-brand {
        padding: 8px 12px !important;
    }
    
    .navbar-brand img {
        height: 52px !important;
    }
    
    nav#sidebar,
    #sidebar {
        right: 0 !important;
        left: auto !important;
        margin-left: 0 !important;
    }
    
    div#contenido,
    #contenido {
        width: calc(100% - 280px) !important;
        margin-right: 280px !important;
        margin-left: 0 !important;
    }
}

/* --- BREAKPOINT ESPECÍFICO 992px --- */
@media (width: 992px) {
    .navbar-toggle.pull-left {
        margin: 3px 5px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    
    #sidebarCollapse {
        display: none !important;  /* Ocultar en desktop */
    }
    
    .navbar-brand {
        padding: 5px 10px;
    }
}

/* --- BREAKPOINTS ESPECÍFICOS 992px-1023px - TRATADOS COMO MÓVIL --- */
/* 992px-1023px ahora se comportan como móvil/tablet */
@media (min-width: 992px) and (max-width: 1023px) {
    /* Comportamiento de móvil */
    .navbar-toggle.pull-left {
        display: block !important;
    }
    
    #sidebarCollapse {
        display: block !important;
    }
    
    .navbar-collapse {
        display: none;
    }
    
    .navbar-collapse.in {
        display: block !important;
    }
}

/* --- TABLETS MEDIANOS (768px - 1023px) --- */
@media (max-width: 1023px) and (min-width: 768px) {
    /* Reducir margin del botón SITIOS en tablets */
    .navbar-toggle.pull-left {
        margin: 3px 5px !important;
        padding: 8px 10px !important;
    }
    
    /* Asegurar que el botón hamburguesa sea visible y funcional */
    #sidebarCollapse {
        display: block !important;
        visibility: visible !important;
        margin: 3px 10px !important;
        float: right !important;
        opacity: 1 !important;
        z-index: 1031 !important;
    }
    
    .navbar-brand {
        padding: 5px 10px;
    }
}

/* --- TABLETS (768px - 1023px) - Sidebar --- */
@media (max-width: 1023px) {
    /* IMPORTANTE: Asegurar que el botón hamburguesa sea visible */
    button#sidebarCollapse,
    #sidebarCollapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    nav#sidebar,
    #sidebar {
        margin-right: -500px !important;  /* Ocultar completamente fuera de pantalla */
        margin-left: 0 !important;
        top: 70px !important;              /* Alineado con navbar más alto */
        right: 0 !important;
        left: auto !important;
    }
    
    nav#sidebar.active,
    #sidebar.active {
        margin-right: 0 !important;  /* VISIBLE cuando tiene active */
        margin-left: 0 !important;
    }
    
    div#contenido,
    #contenido {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    div#contenido.active,
    #contenido.active {
        width: calc(100% - 280px) !important;
    }
}

/* --- MÓVILES GRANDES (576px - 767px) --- */
@media (max-width: 767px) {
    .navbar-header {
        width: 100%;
        position: relative;
        min-height: 50px;
    }
    
    .navbar-brand {
        float: left;
        padding: 5px 10px;
        max-width: 40%;
    }
    
    .navbar-brand img {
        height: 40px;
    }
    
    /* Botón SITIOS - izquierda, después del logo */
    .navbar-toggle.pull-left {
        float: left !important;
        margin: 8px 10px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    /* Botón hamburguesa - derecha */
    #sidebarCollapse {
        float: right !important;
        margin: 8px 10px !important;
        padding: 9px 10px !important;
    }
    
    /* Navbar collapse en móvil */
    .navbar-collapse {
        border-top: 1px solid #e7e7e7;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        max-height: 340px;
        overflow-y: auto;
        clear: both;
    }
    
    .navbar-nav {
        margin: 7.5px -15px;
    }
    
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px;
    }
    
    /* Avatar y dropdown en móvil */
    .avatar {
        width: 35px;
        height: 35px;
    }
    
    .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    
    /* Sidebar en móvil - lógica invertida como en fen-theme.css */
    nav#sidebar,
    #sidebar {
        top: 70px !important;              /* Alineado con navbar más alto */
        height: calc(100vh - 70px) !important;
        width: 280px !important;
        max-width: 280px !important;
        margin-right: -500px !important;  /* Ocultar completamente fuera de pantalla */
        margin-left: 0 !important;
        right: 0 !important;
        left: auto !important;
    }
    
    nav#sidebar.active,
    #sidebar.active {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    div#contenido,
    #contenido {
        margin-top: 70px !important;       /* Alineado con navbar más alto */
        padding: 15px;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    div#contenido.active,
    #contenido.active {
        width: calc(100% - 280px) !important;
    }
    
    /* Menú vertical contador */
    .fen-MenuContador {
        font-size: 14px !important;
        padding: 10px;
    }
}

/* --- MÓVILES PEQUEÑOS (hasta 575px) --- */
@media (max-width: 575px) {
    .navbar-brand {
        padding: 5px 5px;
        max-width: 35%;
    }
    
    .navbar-brand img {
        height: 30px;
    }
    
    .navbar-header button {
        margin: 6px 5px !important;
        padding: 5px 8px !important;
    }
    
    /* Botón SITIOS más compacto */
    .navbar-toggle.pull-left {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }
    
    .navbar-toggle.pull-left span {
        font-size: 10px !important;
    }
    
    /* Botón hamburguesa más compacto */
    #sidebarCollapse {
        padding: 6px 8px !important;
        margin: 6px 5px !important;
    }
    
    #sidebarCollapse i {
        font-size: 14px;
    }
    
    /* Botones más pequeños en navbar */
    .navbar-btn {
        margin-top: 6px;
        margin-bottom: 6px;
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Sidebar ocupa más pantalla en móviles pequeños */
    nav#sidebar,
    #sidebar {
        max-width: 90% !important;
        width: 90% !important;
        margin-right: -500px !important;  /* Ocultar completamente fuera de pantalla */
        margin-left: 0 !important;
        right: 0 !important;
        left: auto !important;
        top: 70px !important;              /* Alineado con navbar */
        height: calc(100vh - 70px) !important;
    }
    
    nav#sidebar.active,
    #sidebar.active {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    div#contenido,
    #contenido {
        padding: 10px;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 70px !important;       /* Menos espacio blanco */
    }
    
    /* Ajustar modales */
    .modal-dialog {
        margin: 10px;
    }
    
    /* Flotantes de ayuda */
    .flotante,
    .flotante2 {
        bottom: 10px;
        right: 10px;
        font-size: 10px;
        padding: 8px;
    }
    
    .flotante2 {
        margin-right: 0;
        display: none;
    }
    
    /* Avatar más pequeño */
    .avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .dropdown.pull-right {
        margin-top: 10px !important;
    }
}

/* --- MÓVILES MUY PEQUEÑOS (hasta 400px) --- */
@media (max-width: 400px) {
    .navbar-brand {
        max-width: 30%;
    }
    
    .navbar-brand img {
        height: 25px;
    }
    
    .navbar-toggle.pull-left {
        font-size: 9px !important;
        padding: 4px 5px !important;
    }
    
    #sidebarCollapse {
        padding: 5px 6px !important;
    }
    
    /* Sidebar ocupa casi toda la pantalla */
    nav#sidebar,
    #sidebar {
        width: 95% !important;
        max-width: 95% !important;
        margin-right: -500px !important;  /* Ocultar completamente fuera de pantalla */
    }
    
    .fen-MenuContador {
        font-size: 12px !important;
    }
    
    .navbar-collapse {
        max-height: 250px;
    }
}

/* ===================================================================
   FIXES PARA ELEMENTOS ESPECÍFICOS
   =================================================================== */

/* --- Dropdown menu --- */
.dropdown-menu {
    position: absolute;
    z-index: 1040;
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
}

/* --- Badges y notificaciones --- */
.badge2 {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
}

@media (max-width: 575px) {
    .badge2 {
        font-size: 10px;
        padding: 2px 5px;
    }
}

/* --- Container fluido --- */
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 767px) {
    .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* --- Fix para scrollbar --- */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- Asegurar que los elementos no se solapen --- */
.wrapper {
    display: block;
    width: 100%;
    position: relative;
}

/* En desktop, sidebar a la derecha */
@media (min-width: 1024px) {
    .wrapper {
        padding-right: 0;
        padding-left: 0;
    }
    
    nav#sidebar,
    .wrapper nav#sidebar,
    #sidebar,
    .wrapper #sidebar {
        display: block !important;
        right: 0 !important;
        left: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    div#contenido,
    .wrapper div#contenido,
    #contenido,
    .wrapper #contenido {
        margin-right: 280px !important;
        margin-left: 0 !important;
        width: calc(100% - 280px) !important;
    }
}

/* En móvil, sidebar oculto por defecto hacia la derecha (hasta 1023px) */
@media (max-width: 1023px) {
    .wrapper {
        padding-right: 0;
        padding-left: 0;
    }
    
    nav#sidebar,
    .wrapper nav#sidebar,
    #sidebar,
    .wrapper #sidebar {
        margin-right: -500px !important;  /* Ocultar completamente fuera de pantalla */
        margin-left: 0 !important;
        right: 0 !important;
        left: auto !important;
    }
    
    nav#sidebar.active,
    .wrapper nav#sidebar.active,
    #sidebar.active,
    .wrapper #sidebar.active {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    div#contenido,
    .wrapper div#contenido,
    #contenido,
    .wrapper #contenido {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* --- Fix para el contenedor del menú vertical --- */
#menuvertical {
    width: 100%;
    overflow-x: hidden;
}

/* --- Mejora de visibilidad en toggle buttons --- */
#sidebarCollapse {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #333;
}

#sidebarCollapse:hover {
    opacity: 0.7;
}

/* ===================================================================
   FIXES PARA BOTONES DE USUARIO EN NAVBAR
   =================================================================== */

/* Asegurar que los botones de usuario sean accesibles en todas las resoluciones */

/* Desktop: Mostrar navbar-collapse y ocultar duplicados del navbar-header */
@media (min-width: 1024px) {
    /* Asegurar que navbar-collapse esté visible y no colapsado */
    .navbar-collapse {
        display: block !important;
        height: auto !important;
        max-height: 70px !important;        /* Aumentado para acomodar el logo */
        overflow: visible !important;
        border-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .navbar-collapse.collapse {
        display: block !important;
    }
    
    /* Asegurar que el container-fluid del navbar no tenga padding extra */
    .navbar .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-height: 80px !important;
        overflow: hidden !important;
    }
    
    /* Mostrar elementos del navbar-collapse */
    .navbar-right .hidden-mobile {
        display: block !important;
    }
    
    .navbar-right .hidden-desktop {
        display: none !important;
    }
    
    /* Ocultar duplicados del navbar-header en desktop */
    .navbar-header .hidden-desktop {
        display: none !important;
    }
    
    /* Asegurar que los links de navegación se vean en línea y alineados */
    .navbar-nav {
        float: left;
        margin: 0;
        padding-left: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-nav > li {
        float: left;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-nav > li > a {
        padding: 15px;
        line-height: 20px !important;
        margin: 0 !important;
        height: auto !important;            /* Altura automática */
        min-height: 50px !important;        /* Mínimo 50px */
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-right {
        float: right !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-right > li {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-right > li > a,
    .navbar-right > li > button {
        height: auto !important;
        min-height: 50px !important;
        line-height: 20px !important;
        padding: 15px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    
    /* Forzar que navbar-header y navbar-collapse estén en la misma línea */
    .navbar-header {
        float: left !important;
        width: auto !important;
        min-height: 60px !important;        /* Mínimo para el logo */
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-collapse {
        width: auto !important;
        clear: none !important;
        float: none !important;
        display: flex !important;           /* Flexbox para alineación */
        align-items: center !important;     /* Centrar verticalmente */
    }
}

/* Tablet y Móvil: Mostrar botones en navbar-collapse cuando está expandido (hasta 1023px) */
@media (max-width: 1023px) {
    /* Ocultar botones del navbar-header que están duplicados */
    .navbar-header .hidden-xs,
    .navbar-header .hidden-desktop {
        display: none !important;
    }
    
    /* Mostrar botones de usuario en el menú colapsable */
    .navbar-collapse .hidden-desktop {
        display: block !important;
    }
    
    .navbar-collapse .hidden-mobile {
        display: none !important;
    }
    
    /* Estilo para el botón de cerrar sesión en móvil */
    .navbar-collapse .btn.fen-btn--primary {
        display: block !important;
        width: 100%;
        text-align: left;
        margin: 10px 0;
        padding: 10px 15px;
    }
    
    /* Navbar-collapse colapsable en móvil */
    .navbar-collapse {
        max-height: none !important;
    }
    
    .navbar-collapse.collapse {
        display: none;
    }
    
    .navbar-collapse.collapse.in {
        display: block !important;
    }
}

/* Móvil pequeño: Ajustes adicionales */
@media (max-width: 767px) {
    .navbar-collapse {
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 0;
    }
    
    .navbar-right {
        margin: 0 -15px;
    }
    
    .navbar-right > li > a {
        padding: 12px 15px;
        display: block;
    }
    
    /* En móvil, los elementos del navbar se apilan verticalmente */
    .navbar-nav > li {
        float: none;
    }
    
    .navbar-right {
        float: none !important;
    }
}

/* ===================================================================
   FIX PARA NAVBAR QUE SE AGRANDA EN 1024px
   =================================================================== */

/* Prevenir que el navbar crezca cuando los botones se apilan */
@media (min-width: 992px) and (max-width: 1100px) {
    /* Reducir márgenes de todos los elementos del navbar-header */
    .navbar-header .pull-right {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .navbar-header .dropdown {
        margin-top: 10px !important;
    }
    
    /* Avatar más pequeño */
    .navbar-header .avatar {
        width: 35px !important;
        height: 35px !important;
    }
    
    /* Botones más compactos */
    .navbar-header .btn {
        padding: 6px 10px !important;
        margin: 10px 5px !important;
    }
    
    #sidebarCollapse {
        margin: 10px 10px !important;
    }
    
    /* Logo más pequeño */
    .navbar-brand img {
        height: 50px !important;
    }
}

/* Rango problemático 1100px - 1400px */
@media (min-width: 1100px) and (max-width: 1400px) {
    /* IMPORTANTE: Reglas de visibilidad PRIMERO con máxima prioridad */
    .hidden-desktop,
    .navbar-right .hidden-desktop,
    .navbar-collapse .hidden-desktop,
    #MainNavBar-collapse .hidden-desktop,
    .navbar-right > li > a.hidden-desktop,
    .navbar-collapse > ul > li > a.hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Elementos duplicados del navbar-header que tienen hidden-desktop */
    .navbar-header .hidden-xs,
    .navbar-header .hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* FORZAR flexbox y alineación en todo el navbar */
    .navbar {
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding-right: 0 !important;        /* Sin padding derecho para que los botones lleguen al borde */
        justify-content: space-between !important;  /* Espacio entre header y collapse */
    }
    
    /* Navbar-header con flexbox */
    .navbar-header {
        min-height: 80px !important;
        max-height: 80px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        float: left !important;
        width: auto !important;
    }
    
    /* Navbar-collapse también con flexbox y alineado - Mayor especificidad */
    .navbar .navbar-collapse,
    .navbar-default .navbar-collapse,
    .navbar-fixed-top .navbar-collapse,
    #MainNavBar-collapse {
        display: flex !important;
        align-items: center !important;
        max-height: 80px !important;
        float: none !important;
        width: auto !important;
        flex-grow: 1 !important;              /* Ocupar el espacio disponible */
    }
    
    /* Links de navegación en línea - Mayor especificidad */
    /* PERO: NO aplicar a elementos con .hidden-desktop */
    .navbar-collapse .navbar-nav:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex-grow: 0 !important;              /* No crecer */
    }
    
    /* Navbar-left con MÁXIMA ESPECIFICIDAD */
    .navbar-fixed-top #MainNavBar-collapse ul.nav.navbar-nav.navbar-left,
    .navbar-default #MainNavBar-collapse ul.nav.navbar-nav.navbar-left,
    #MainNavBar-collapse > ul.nav.navbar-nav.navbar-left,
    .navbar-collapse > ul.navbar-nav.navbar-left {
        margin-right: 100px !important;       /* 100px de separación forzada */
        padding-right: 0 !important;
    }
    
    /* ÚLTIMO link de navegación con margen extra - MÁXIMA ESPECIFICIDAD */
    #MainNavBar-collapse ul.navbar-nav.navbar-left > li:last-child,
    .navbar-collapse ul.navbar-nav.navbar-left > li:last-child,
    ul.nav.navbar-nav.navbar-left > li:last-child {
        margin-right: 50px !important;        /* Margen adicional al último link */
        padding-right: 20px !important;       /* Padding extra */
    }
    
    .navbar-collapse .navbar-nav > li:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-collapse .navbar-nav > li > a:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav > li > a:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        line-height: 20px !important;
        height: auto !important;
    }
    
    /* Navbar-right alineado - Mayor especificidad */
    /* PERO: NO aplicar a elementos con .hidden-desktop */
    .navbar-collapse .navbar-right:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        margin-left: auto !important;        /* EMPUJAR A LA DERECHA (pull-right) */
        padding-right: 0 !important;         /* Sin padding para llegar al borde */
    }
    
    .navbar-collapse .navbar-right > li:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        margin-right: 0 !important;          /* Sin margen derecho */
    }
    
    /* PRIMER elemento de navbar-right con margen izquierdo extra */
    .navbar-collapse .navbar-right > li:first-child,
    #MainNavBar-collapse .navbar-right > li:first-child {
        margin-left: 0 !important;           /* El margen ya está en navbar-right */
    }
    
    .navbar-collapse .navbar-right > li:last-child,
    #MainNavBar-collapse .navbar-right > li:last-child {
        padding-right: 0 !important;         /* Último elemento sin padding */
        margin-right: 0 !important;
    }
    
    .navbar-collapse .navbar-right > li > a:not(.hidden-desktop),
    .navbar-collapse .navbar-right > li > button:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right > li > a:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right > li > button:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        line-height: 20px !important;
    }
    
    /* Último botón sin padding derecho para que esté pegado al borde */
    .navbar-collapse .navbar-right > li:last-child > a,
    .navbar-collapse .navbar-right > li:last-child > button,
    #MainNavBar-collapse .navbar-right > li:last-child > a,
    #MainNavBar-collapse .navbar-right > li:last-child > button {
        padding-right: 15px !important;      /* Pequeño padding del borde */
    }
    
    /* Todos los elementos del navbar-header alineados */
    .navbar-header .pull-right {
        margin: 5px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-header .dropdown {
        margin: 5px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-header .avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .navbar-header .btn {
        padding: 8px 12px !important;
        margin: 5px 8px !important;
    }
    
    #sidebarCollapse {
        margin: 5px 15px !important;
    }
    
    .navbar-brand {
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar-brand img {
        height: 50px !important;
        width: auto !important;
    }
}

/* ===================================================================
   SEPARACIÓN ENTRE LINKS Y BOTONES - TODAS LAS RESOLUCIONES DESKTOP
   =================================================================== */
@media (min-width: 1024px) {
    /* Container sin padding derecho para que los botones lleguen al borde */
    .navbar .container-fluid {
        padding-right: 0 !important;
    }
    
    /* Navbar-left con separación a la derecha */
    .navbar-fixed-top #MainNavBar-collapse ul.nav.navbar-nav.navbar-left,
    .navbar-default #MainNavBar-collapse ul.nav.navbar-nav.navbar-left,
    #MainNavBar-collapse > ul.nav.navbar-nav.navbar-left,
    .navbar-collapse > ul.navbar-nav.navbar-left,
    ul.nav.navbar-nav.navbar-left {
        margin-right: 80px !important;        /* Separación de los botones */
        padding-right: 0 !important;
    }
    
    /* ÚLTIMO link con margen/padding extra */
    #MainNavBar-collapse ul.navbar-nav.navbar-left > li:last-child,
    .navbar-collapse ul.navbar-nav.navbar-left > li:last-child,
    ul.nav.navbar-nav.navbar-left > li:last-child {
        margin-right: 30px !important;        /* Margen adicional */
        padding-right: 15px !important;       /* Padding adicional */
    }
    
    /* NAVBAR-RIGHT PEGADO AL BORDE DERECHO */
    .navbar-collapse .navbar-right,
    #MainNavBar-collapse .navbar-right {
        margin-left: auto !important;         /* Empujar al final */
        margin-right: 0 !important;
        padding-right: 0 !important;
        float: none !important;               /* Desactivar float, usar flexbox */
    }
    
    /* Último botón pegado al borde */
    .navbar-right > li:last-child,
    .navbar-right > li:last-child > a,
    .navbar-right > li:last-child > button {
        margin-right: 0 !important;
        padding-right: 15px !important;       /* Solo 15px del borde absoluto */
    }
}

/* En 1024px específicamente - Evitar que navbar crezca */
@media (width: 1024px) {
    .navbar-header {
        min-height: 60px;
        max-height: 80px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    .navbar-header > * {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    .navbar-brand {
        padding: 5px 10px !important;
    }
    
    .navbar-brand img {
        height: 45px !important;
    }
    
    .navbar-header .avatar {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Rango amplio para prevenir crecimiento del navbar en desktop */
@media (min-width: 1024px) and (max-width: 1400px) {
    /* IMPORTANTE: Reglas de visibilidad PRIMERO */
    .hidden-desktop,
    .navbar-right .hidden-desktop,
    .navbar-collapse .hidden-desktop,
    #MainNavBar-collapse .hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    .navbar-header .hidden-xs,
    .navbar-header .hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Usar flexbox para mantener todo en línea */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding-right: 0 !important;
    }
    
    /* Logo más pequeño para que quepa sin cortarse */
    .navbar-brand {
        padding: 10px 15px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-brand img {
        height: 50px !important;
        max-height: 50px !important;
    }
    
    /* Márgenes reducidos */
    .navbar-header > * {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    /* Avatar y dropdown compactos */
    .navbar-header .dropdown {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    .navbar-header .avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Botones compactos */
    .navbar-header .btn {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        padding: 8px 12px !important;
    }
    
    .navbar-fixed-top {
        height: 80px !important;
    }
    
    /* NAVBAR-COLLAPSE con flexbox y alineación */
    .navbar .navbar-collapse,
    .navbar-default .navbar-collapse,
    #MainNavBar-collapse {
        display: flex !important;
        align-items: center !important;
        max-height: 80px !important;
        flex-grow: 1 !important;
    }
    
    /* NAVBAR-NAV alineado */
    .navbar-collapse .navbar-nav:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    
    .navbar-collapse .navbar-nav > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-collapse .navbar-nav > li > a:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        line-height: 20px !important;
    }
    
    /* NAVBAR-RIGHT pegado a la derecha */
    .navbar-collapse .navbar-right:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right:not(.hidden-desktop) {
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-right > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-right > li > a:not(.hidden-desktop),
    .navbar-right > li > button:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
}

/* Resoluciones muy grandes (> 1400px) - Prevenir crecimiento del navbar */
@media (min-width: 1401px) {
    /* IMPORTANTE: Reglas de visibilidad PRIMERO con máxima prioridad */
    .hidden-desktop,
    .navbar-right .hidden-desktop,
    .navbar-collapse .hidden-desktop,
    #MainNavBar-collapse .hidden-desktop,
    .navbar-right > li > a.hidden-desktop,
    .navbar-collapse > ul > li > a.hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Elementos duplicados del navbar-header que tienen hidden-desktop */
    .navbar-header .hidden-xs,
    .navbar-header .hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Mostrar elementos .hidden-mobile */
    .navbar-right .hidden-mobile {
        display: block !important;
    }
    
    /* Usar flexbox para mantener todo en línea sin crecer verticalmente */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding-right: 0 !important;          /* Sin padding derecho */
    }
    
    /* Reducir márgenes verticales de TODOS los elementos */
    .navbar-header > * {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    /* Logo más pequeño para que quepa en 80px sin cortarse */
    .navbar-brand {
        padding: 10px 15px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-brand img {
        height: 50px !important;         /* Reducido a 50px para que quepa */
        max-height: 50px !important;
    }
    
    /* Dropdown y avatar con márgenes reducidos */
    .navbar-header .dropdown {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    
    .navbar-header .avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Botones con márgenes mínimos */
    .navbar-header .btn {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        padding: 8px 12px !important;
    }
    
    /* NAVBAR-COLLAPSE con flexbox y separación */
    .navbar .navbar-collapse,
    .navbar-default .navbar-collapse,
    .navbar-fixed-top .navbar-collapse,
    #MainNavBar-collapse {
        display: flex !important;
        align-items: center !important;
        max-height: 80px !important;
        flex-grow: 1 !important;
    }
    
    /* NAVBAR-NAV (links) alineados verticalmente */
    /* PERO: NO aplicar a elementos .hidden-desktop */
    .navbar-collapse .navbar-nav:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    
    .navbar-collapse .navbar-nav > li:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-collapse .navbar-nav > li > a:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-nav > li > a:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        line-height: 20px !important;
    }
    
    /* NAVBAR-RIGHT empujado al final */
    /* PERO: NO aplicar a elementos .hidden-desktop */
    .navbar-collapse .navbar-right:not(.hidden-desktop),
    #MainNavBar-collapse .navbar-right:not(.hidden-desktop),
    ul.navbar-right:not(.hidden-desktop) {
        margin-left: auto !important;         /* EMPUJAR AL FINAL */
        margin-right: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-right > li:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-right > li > a:not(.hidden-desktop),
    .navbar-right > li > button:not(.hidden-desktop) {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Asegurar que sidebar y contenido estén bien posicionados */
    nav#sidebar,
    #sidebar {
        top: 80px !important;            /* Alineado con navbar de 80px */
        height: calc(100vh - 80px) !important;
    }
    
    div#contenido,
    #contenido {
        margin-top: 80px !important;     /* Alineado con navbar de 80px */
        min-height: calc(100vh - 80px) !important;
    }
}

/* --- Espaciado para evitar solapamiento con navbar fixed --- */
body {
    padding-top: 0;
}

/* No aplicar padding-top al body cuando hay navbar fixed */
body.has-navbar-fixed {
    padding-top: 80px;
}

/* Menos espacio en móvil/tablet (hasta 1023px) */
@media (max-width: 1023px) {
    body.has-navbar-fixed {
        padding-top: 70px !important;
    }
}

@media (max-width: 767px) {
    body.has-navbar-fixed {
        padding-top: 70px !important;
    }
}

/* ===================================================================
   ESTILO DEL BOTÓN HAMBURGUESA
   =================================================================== */

/* Botón hamburguesa con color blanco */
#sidebarCollapse {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    font-size: 20px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#sidebarCollapse:hover,
#sidebarCollapse:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff !important;
}

/* Icono del hamburguesa blanco */
#sidebarCollapse i {
    color: #fff !important;
}

#sidebarCollapse .fa-bars {
    color: #fff !important;
}