/* 
    Mejoras para la visualización del menú móvil
    Este CSS mejora el contraste y la legibilidad del menú en dispositivos móviles
*/

/* Fondo del menú móvil con mejor contraste */
.mobile-menu {
    background-color: #001845 !important; /* Azul muy oscuro para máximo contraste */
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.5) !important;
    padding-top: 30px !important; /* Más espacio arriba ahora que quitamos el botón de cerrar */
    z-index: 1500 !important; /* Alto pero por debajo del botón toggle */
}

/* Mejorar la visibilidad de los enlaces */
.mobile-nav-link {
    color: #ffffff !important; /* Blanco puro para mejor contraste */
    font-weight: 700 !important; /* Más negrita */
    padding: 15px 20px !important; /* Más padding horizontal */
    font-size: 17px !important; /* Tamaño de texto aumentado */
    letter-spacing: 0.7px !important; /* Mayor espaciado entre letras */
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra de texto más pronunciada */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Separador más visible */
    display: flex !important;
    align-items: center !important;
}

/* Mejorar la apariencia al pasar el mouse o tocar */
.mobile-nav-link:hover,
.mobile-nav-link:focus,
.mobile-nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important; /* Fondo más visible al pasar el mouse */
    color: #ffffff !important; /* Blanco puro para máximo contraste */
    border-left: 5px solid #ffffff !important; /* Barra lateral más gruesa y blanca */
    padding-left: 15px !important; /* Compensar el borde */
}

.mobile-nav-link.active {
    background-color: rgba(var(--primary-color-rgb, 32, 178, 170), 0.3) !important; /* Color primario con transparencia */
    color: #ffffff !important; /* Siempre blanco para mejor contraste */
}

/* Estilo mejorado para el botón de cerrar */
.mobile-menu .close-menu {
    text-align: right;
    padding: 15px;
    color: #ffffff !important; /* Blanco puro */
    font-size: 30px !important; /* Icono más grande */
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2) !important; /* Fondo más visible */
    margin-bottom: 10px !important; /* Espacio debajo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borde inferior */
}

/* Mejoras para los botones en el menú móvil */
.mobile-nav-item.portal-btn-mobile .btn {
    margin: 10px 20px !important; /* Más margen */
    font-weight: 700 !important; /* Más negrita */
    font-size: 16px !important; /* Texto más grande */
    padding: 12px 15px !important; /* Más padding */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra más pronunciada */
    width: calc(100% - 40px) !important; /* Ancho ajustado con margen */
    border-width: 2px !important; /* Bordes más gruesos */
    letter-spacing: 0.5px !important; /* Mejor espaciado de letras */
    border-radius: 6px !important; /* Bordes más redondeados */
}

/* Botón de cliente con mejor contraste */
.mobile-nav-item.portal-btn-mobile .btn-outline-primary {
    background-color: transparent !important;
    border-color: #ffffff !important; /* Blanco puro */
    color: #ffffff !important; /* Blanco puro */
}

.mobile-nav-item.portal-btn-mobile .btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.25) !important; /* Más visible al pasar el mouse */
    transform: translateY(-2px) !important; /* Ligera elevación al pasar el mouse */
    transition: all 0.2s ease-in-out !important;
}

/* Botón de administrador más destacado */
.mobile-nav-item.portal-btn-mobile .btn-primary {
    background-color: #ffffff !important; /* Blanco para máximo contraste */
    border-color: #ffffff !important;
    color: #001845 !important; /* Color del fondo del menú para inversión de contraste */
    font-weight: 700 !important;
}

.mobile-nav-item.portal-btn-mobile .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Ligeramente transparente al pasar el mouse */
    transform: translateY(-2px) !important; /* Ligera elevación al pasar el mouse */
    transition: all 0.2s ease-in-out !important;
}

/* Espacio entre secciones del menú */
.mobile-nav-list .portal-btn-mobile:first-child {
    margin-top: 20px !important;
}

/* Ajuste de transición */
.mobile-menu {
    transition: all 0.3s ease !important;
}

/* Oscurecer el fondo cuando el menú está activo */
body.mobile-menu-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Más oscuro para mejor contraste */
    z-index: 1000;
    backdrop-filter: blur(3px); /* Efecto de desenfoque sutil */
    -webkit-backdrop-filter: blur(3px);
}

/* Mejorar la visibilidad de los íconos en el menú móvil */
.mobile-nav-link i {
    font-size: 18px !important;
    min-width: 30px !important;
    text-align: center !important;
    margin-right: 10px !important;
    color: #ffffff !important; /* Asegurarse que los íconos siempre sean blancos */
}

/* Estilo para el separador del menú */
.mobile-menu-separator {
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
    margin: 15px 20px !important;
}

/* Mejoras para el logo en el menú móvil */
.mobile-menu-header {
    padding: 10px 0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 10px !important;
}

/* Estilos para la animación de los elementos del menú */
.mobile-nav-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease-in-out;
}

/* Estilo para el botón que abre el menú móvil */
.mobile-menu-toggle {
    color: white !important; /* Color blanco para mejor contraste */
    font-size: 30px !important; /* Tamaño grande para facilitar el tap */
    cursor: pointer;
    transition: all 0.2s ease;
    position: fixed !important; /* Posición fija para mantenerla visible */
    right: 15px !important; /* Distancia desde la derecha */
    bottom: 20px !important; /* Posición fija en la parte inferior */
    z-index: 2000 !important; /* Mayor z-index para estar sobre todo */
    padding: 12px 15px !important; /* Área de toque más grande */
    border-radius: 50% !important; /* Forma circular */
    background-color: var(--primary-color) !important; /* Fondo del color primario */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important; /* Sombra más pronunciada */
    display: none !important; /* Oculto por defecto, visible solo en móvil */
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important; /* Ligeramente transparente */
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
    background-color: var(--secondary-color) !important; /* Cambio de color al pasar el mouse */
}

/* Estilo para el botón del menú móvil cuando el menú está abierto */
body.mobile-menu-active .mobile-menu-toggle {
    background-color: #cc0000 !important; /* Rojo para indicar que cierra el menú */
    transform: rotate(90deg); /* Rotar como efecto visual */
    animation: none !important;
}

/* Estilo para el botón del menú móvil integrado en el header */
.mobile-menu-toggle-header {
    color: var(--primary-color) !important; /* Color del tema */
    font-size: 22px !important; /* Tamaño modesto */
    cursor: pointer;
    padding: 5px !important;
    background: transparent !important;
    border: none !important;
    display: none !important; /* Oculto por defecto */
    z-index: 1200 !important;
}

/* REGLAS PRINCIPALES PARA EL BOTÓN HAMBURGUESA - Limpiar de conflictos */
/* Oculto por defecto en todos los tamaños */
.mobile-menu-toggle-header {
    display: none !important;
}

/* Solo visible en móviles */
@media (max-width: 767px) {
    .mobile-menu-toggle-header {
        display: block !important;
        position: absolute !important;
        top: 50% !important; /* Centrado verticalmente */
        transform: translateY(-50%) !important; /* Ajuste para centrado perfecto */
        right: 15px !important;
        z-index: 1500 !important;
        color: var(--primary-color) !important;
        font-size: 24px !important;
        cursor: pointer;
        display: block !important;
        background-color: transparent !important;
        border: none !important;
        padding: 5px !important;
    }
}

/* Explícitamente oculto en escritorio */
@media (min-width: 768px) {
    .mobile-menu-toggle-header,
    header .mobile-menu-toggle-header,
    .main-header .mobile-menu-toggle-header,
    .col-md-3 .mobile-menu-toggle-header {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Ocultar la navegación principal en móviles */
@media (max-width: 767px) {
    .main-nav .nav-list {
        display: none !important;
    }
}

/* Mantener el tamaño del logo sin alteraciones */
.logo img {
    max-width: 100% !important;
    height: auto !important;
}

/* Asegurar que el botón se vea bien a diferentes tamaños de pantalla */
@media (max-width: 480px) {
    .mobile-menu-toggle-header {
        font-size: 20px !important;
    }
}

/* Ajustar JavaScript para que reconozca el nuevo botón */
body.mobile-menu-active .mobile-menu-toggle-header {
    color: #cc0000 !important; /* Rojo para indicar que cierra el menú */
}

/* Asegurarnos que el menú no sea visible en pantallas grandes */
@media (min-width: 993px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Ocultando el botón móvil en páginas específicas si es necesario */
.page-login .mobile-menu-toggle {
    top: 60px !important; /* Ajustar en la página de login si es necesario */
}

/* Ajustes del botón para diferentes tamaños de pantalla */
@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: block !important; /* Mostrar el botón solo en dispositivos móviles */
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        bottom: 20px !important; /* Mantener en la parte inferior */
        right: 20px !important;
    }
}

@media (max-width: 576px) {
    .mobile-menu-toggle {
        bottom: 20px !important; /* Mantener en la parte inferior */
        right: 15px !important; 
        font-size: 28px !important;
        padding: 10px 13px !important; /* Ligeramente más pequeño en móviles */
    }
}

@media (max-width: 375px) {
    .mobile-menu-toggle {
        bottom: 15px !important; /* Un poco más arriba en pantallas muy pequeñas */
        right: 10px !important;
        font-size: 26px !important;
    }
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 480px) {
    .mobile-menu-toggle-header {
        top: 15px !important;
        right: 15px !important;
        font-size: 22px !important;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 375px) {
    .mobile-menu-toggle-header {
        top: 12px !important;
        right: 12px !important;
        font-size: 20px !important;
    }
}

/* Eliminar el margen que podría estar afectando la posición */
.mobile-menu-toggle-header {
    margin: 0 !important;
}

/* Eliminar padding extra que se agregó para el botón flotante */
@media (max-width: 768px) {
    .main-content {
        padding-bottom: initial !important; /* Restaurar padding normal */
    }
}

/* Asegurar que el botón no moleste al hacer scroll en la parte inferior */
@media (max-width: 768px) {
    .main-content {
        padding-bottom: 80px !important;
    }
}

/* Ocultar el botón flotante original completamente */
.mobile-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Asegurar la correcta visualización del botón */
.main-header {
    position: relative !important; /* Para que el posicionamiento absoluto funcione correctamente */
}

/* Eliminar posibles conflictos con otros estilos */
.mobile-menu-toggle-header {
    float: none !important;
    /* Mostrar solo en móviles mediante media queries */
}

/* Ocultar el botón original flotante si existe */
.mobile-menu-toggle {
    display: none !important;
}