/*
 * Corrección para dropdowns (federaciones y ejercicios) en móvil
 * Fecha: 3 de Marzo de 2026
 *
 * Problema: En móvil el texto de las federaciones y ejercicios no se ve bien
 * Solución: Ajustar tamaños, espaciado y hacer responsive
 */

/* ==================== ESCRITORIO ==================== */

/* Botón principal del dropdown */
.navbar-custom-menu .navbar-nav > li > a {
    padding: 15px 12px;
}

/* Dropdowns - escritorio */
/* Selector MÁS específico para ganar especificidad */
.navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu,
.navbar-custom-menu .dropdown-menu {
    max-height: 400px !important;
    overflow-y: auto !important;
    min-width: 160px !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
}

/* IMPORTANTE: Sobrescribir cualquier estilo de AdminLTE que oculte el texto */
.navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li,
.navbar-custom-menu .dropdown-menu > li {
    background-color: transparent !important;
    border: none !important;
    list-style: none !important;
}

.navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a,
.navbar-custom-menu .dropdown-menu > li > a {
    padding: 8px 15px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    color: #333 !important;
    display: block !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: normal !important;
    line-height: 1.42857143 !important;
}

.navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a:hover,
.navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a:focus,
.navbar-custom-menu .dropdown-menu > li > a:hover,
.navbar-custom-menu .dropdown-menu > li > a:focus {
    background-color: #3c8dbc !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Eliminar estilos de header que puedan interferir */
.navbar-custom-menu .dropdown-menu > li.header {
    display: none !important;
}

/* Forzar visibilidad en todos los contextos */
.navbar-custom-menu .dropdown-menu > li > a * {
    color: inherit !important;
}

/* ==================== MÓVIL Y TABLET ==================== */

/* Tablets pequeñas y móviles grandes */
@media (max-width: 991px) {

    /* Nombre de la federación en el botón principal */
    #nomfedemenu {
        display: inline-block;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    /* Badge del año (ejercicios) visible */
    .navbar-custom-menu .navbar-nav > li > a .badge {
        font-size: 11px;
        padding: 3px 6px;
    }

    /* Dropdown menu más ancho en tablet */
    .navbar-custom-menu .dropdown-menu {
        min-width: 180px !important;
        max-width: 250px !important;
        right: 0 !important;
        left: auto !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ddd !important;
    }

    .navbar-custom-menu .dropdown-menu > li {
        background-color: transparent !important;
    }

    .navbar-custom-menu .dropdown-menu > li > a {
        padding: 10px 15px !important;
        font-size: 14px !important;
        color: #333 !important;
        background-color: transparent !important;
    }
}

/* Móviles medianos */
@media (max-width: 767px) {

    /* Botón más compacto */
    .navbar-custom-menu .navbar-nav > li > a {
        padding: 15px 8px;
    }

    /* Nombre de la federación más corto */
    #nomfedemenu {
        max-width: 60px;
        font-size: 12px;
    }

    /* CRÍTICO: En móvil Bootstrap cambia el dropdown a position:static */
    /* Forzamos position absolute y visibilidad con MÁXIMA especificidad */
    .navbar-custom-menu .navbar-nav > li.dropdown.open > .dropdown-menu,
    .navbar-custom-menu .navbar-nav > li.dropdown.open .dropdown-menu {
        position: absolute !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
    }

    /* Dropdown ocupa casi todo el ancho de la pantalla */
    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu,
    .navbar-custom-menu .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        font-size: 14px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ddd !important;
    }

    /* Items del dropdown más espaciados y legibles */
    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li,
    .navbar-custom-menu .dropdown-menu > li {
        background-color: transparent !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: block !important;
    }

    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li:last-child,
    .navbar-custom-menu .dropdown-menu > li:last-child {
        border-bottom: none !important;
    }

    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a,
    .navbar-custom-menu .dropdown-menu > li > a {
        padding: 12px 20px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: #333 !important;
        background-color: transparent !important;
        display: block !important;
        text-shadow: none !important;
        font-weight: normal !important;
        white-space: nowrap !important;
    }

    /* Hover más visible en móvil */
    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a:hover,
    .navbar-custom-menu .navbar-nav > li.dropdown > .dropdown-menu > li > a:focus,
    .navbar-custom-menu .dropdown-menu > li > a:hover,
    .navbar-custom-menu .dropdown-menu > li > a:focus {
        background-color: #3c8dbc !important;
        color: #fff !important;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    /* Botón aún más compacto */
    .navbar-custom-menu .navbar-nav > li > a {
        padding: 15px 6px;
    }

    /* Solo mostramos el alias sin el número */
    #nomfedemenu {
        max-width: 45px;
        font-size: 11px;
    }

    /* Dropdown aún más grande */
    .navbar-custom-menu .dropdown-menu {
        min-width: 180px !important;
        max-width: calc(100vw - 10px) !important;
        right: 0 !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ddd !important;
    }

    /* Items más grandes para facilitar el toque */
    .navbar-custom-menu .dropdown-menu > li {
        background-color: transparent !important;
    }

    .navbar-custom-menu .dropdown-menu > li > a {
        padding: 14px 18px !important;
        font-size: 16px !important;
        color: #333 !important;
        background-color: transparent !important;
        display: block !important;
    }
}

/* ==================== MEJORAS VISUALES ==================== */

/* Scrollbar personalizado para el dropdown */
.navbar-custom-menu .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.navbar-custom-menu .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.navbar-custom-menu .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.navbar-custom-menu .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animación suave al abrir */
.navbar-custom-menu .dropdown-menu {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}