/**
 * FeedCurato® - Mobile Menu Style
 * Drawer Lateral Light
 * Menú lateral claro con iconos y hover elegante
 */

/* Mobile Menu Styles - Drawer Light */
@media (max-width: 768px) {
    /* Nav container cuando está activo */
    .nav.active {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        padding: 0;
        margin: 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        animation: slideDown 0.3s ease;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    /* Links del menú */
    .nav.active a {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        color: #374151;
        text-decoration: none;
        font-size: 17px;
        font-weight: 500;
        border-bottom: 1px solid #f3f4f6;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    /* Barra izquierda en hover */
    .nav.active a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 0;
        background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
        transition: height 0.3s ease;
        border-radius: 0 2px 2px 0;
    }

    /* Hover effect */
    .nav.active a:hover {
        background: rgba(99, 102, 241, 0.05);
        color: #1f2937;
        padding-left: 28px;
    }

    .nav.active a:hover::before {
        height: 70%;
    }

    /* Iconos */
    .nav.active a .link-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 8px;
        flex-shrink: 0;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .nav.active a:hover .link-icon {
        background: rgba(99, 102, 241, 0.2);
        transform: scale(1.1);
    }

    /* Texto del link */
    .nav.active a .link-text {
        flex: 1;
        display: block;
    }

    /* Contador de noticias - OCULTO en Drawer */
    .nav.active a .link-count {
        display: none;
    }

    /* Último elemento sin borde */
    .nav.active a:last-child {
        border-bottom: none;
    }

    /* Animación de entrada */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Scroll personalizado */
    .nav.active::-webkit-scrollbar {
        width: 6px;
    }

    .nav.active::-webkit-scrollbar-track {
        background: #f9fafb;
    }

    .nav.active::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
    }

    .nav.active::-webkit-scrollbar-thumb:hover {
        background: #6366f1;
    }
}