/*!
 * Custom Menu Styles for Vuexy Template
 * Mejoras visuales para el mod_menu de Joomla
 */

/* ===========================================
   MEJORAS GENERALES DEL MENÚ
   =========================================== */

/* Contenedor principal del menú */
.menu-inner {
    padding: 0.5rem 0;
}

/* ===========================================
   ELEMENTOS DE MENÚ (menu-item)
   =========================================== */

/* Espaciado mejorado para elementos de menú */
.menu-item {
    margin-bottom: 0.125rem;
}

/* Enlaces del menú con mejor padding y transiciones */
.menu-item .menu-link {
    padding: 0.625rem 1.5rem;
    border-radius: 0.375rem;
    margin: 0 0.75rem;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    color: rgba(67, 89, 113, 0.8);
    text-decoration: none;
    position: relative;
}

/* Hover effects mejorados */
.menu-item .menu-link:hover {
    background-color: rgba(67, 89, 113, 0.04);
    color: #435971;
    transform: translateX(2px);
}

/* Estados activos más visibles */
.menu-item.active > .menu-link,
.menu-item.current > .menu-link {
    background: linear-gradient(72.47deg, #695858 22.16%, rgba(105, 88, 88, 0.7) 76.47%);
    color: #fff;
    box-shadow: 0 2px 6px 0 rgba(105, 88, 88, 0.48);
}

.menu-item.active > .menu-link .menu-icon,
.menu-item.current > .menu-link .menu-icon {
    color: #fff;
}

/* ===========================================
   ICONOS DEL MENÚ
   =========================================== */

/* Iconos con mejor spacing y tamaño */
.menu-icon {
    margin-right: 0.75rem;
    font-size: 1.125rem;
    width: 1.25rem;
    text-align: center;
    color: rgba(67, 89, 113, 0.6);
    transition: all 0.2s ease-in-out;
}

/* Iconos en elementos activos */
.menu-item.active .menu-icon,
.menu-item.current .menu-icon {
    color: #fff;
}

/* ===========================================
   BADGES Y ETIQUETAS
   =========================================== */

/* Badges con mejor posicionamiento */
.menu-link .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
    line-height: 1;
}

/* Variaciones de color para badges */
.badge.bg-primary {
    background-color: #695858 !important;
}

.badge.bg-success {
    background-color: #28c76f !important;
}

.badge.bg-warning {
    background-color: #ff9f43 !important;
}

.badge.bg-danger {
    background-color: #ea5455 !important;
}

.badge.bg-info {
    background-color: #00cfe8 !important;
}

/* ===========================================
   HEADERS DE SECCIÓN (menu-header)
   =========================================== */

/* Headers con mejor estilo */
.menu-header {
    padding: 1rem 1.5rem 0.5rem;
    margin: 0 0.75rem;
    border-bottom: none;
    position: relative;
}

.menu-header .menu-header-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: rgba(67, 89, 113, 0.5);
    text-transform: uppercase;
    position: relative;
}

/* Línea decorativa para headers */
.menu-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(67, 89, 113, 0.1) 0%, rgba(67, 89, 113, 0.05) 100%);
}

/* ===========================================
   SUBMENÚS (menu-sub)
   =========================================== */

/* Submenús con mejor indentación */
.menu-sub {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.menu-sub .menu-item .menu-link {
    padding-left: 3.25rem;
    font-size: 0.9rem;
}

/* Eliminamos los círculos del submenú */
.menu-sub .menu-item .menu-link::before {
    content: none;
    display: none;
}

/* ===========================================
   GRUPOS EXPANDIBLES (menu-toggle)
   =========================================== */

/* Indicador de expansión para grupos - Flecha original de Vuexy */
.menu-toggle::after {
    content: "";
    position: absolute;
    top: 48%;
    right: 1.25rem;
    display: block;
    width: 0.42em;
    height: 0.42em;
    border: 1.5px solid;
    border-bottom: 0;
    border-left: 0;
    border-color: rgba(67, 89, 113, 0.5);
    transform: translateY(-50%) rotate(45deg);
    transition-duration: 0.3s;
    transition-property: transform;
}

.menu-item.open:not(.menu-item-closing) > .menu-toggle::after {
    transform: translateY(-50%) rotate(135deg);
}

.menu-item.open > .menu-toggle::after {
    border-color: #fff;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 1199.98px) {
    .menu-item .menu-link {
        margin: 0 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    .menu-header {
        padding: 0.75rem 1rem 0.25rem;
        margin: 0 0.5rem;
    }
}

/* ===========================================
   ANIMACIONES SUAVES
   =========================================== */

/* Animación de entrada para elementos del menú */
.menu-item {
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efecto de pulsación para elementos activos */
.menu-item.active > .menu-link {
    animation: pulse-active 2s infinite;
}

@keyframes pulse-active {
    0%, 100% {
        box-shadow: 0 2px 6px 0 rgba(105, 88, 88, 0.48);
    }
    50% {
        box-shadow: 0 4px 12px 0 rgba(105, 88, 88, 0.6);
    }
}

/* ===========================================
   TEMA DARK MODE (si aplica)
   =========================================== */

@media (prefers-color-scheme: dark) {
    .menu-item .menu-link {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .menu-item .menu-link:hover {
        background-color: rgba(255, 255, 255, 0.04);
        color: #fff;
    }
    
    .menu-header .menu-header-text {
        color: rgba(255, 255, 255, 0.5);
    }
}