/* ===== MEJORAS ESPECÍFICAS PARA MÓVIL ===== */

@media (max-width: 768px) {
    /* Header móvil mejorado */
    .products-header {
        padding: 1.5rem 0;
    }
    
    .products-title {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .products-subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Pasos de ordenamiento en móvil */
    .ordering-steps {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .step-item {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        padding: 1rem;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.25);
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
        margin-right: 1rem;
    }
    
    /* Cards de productos en móvil - Diseño inspirado en e-commerce moderno */
    .product-card-improved,
    .product-card {
        min-height: auto !important;
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .product-card-improved:hover,
    .product-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Banner de categoría */
    .product-category-banner {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
        color: white !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        border-radius: 16px 16px 0 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .product-category-banner::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
        transition: left 0.5s ease !important;
    }
    
    .product-card-improved:hover .product-category-banner::before,
    .product-card:hover .product-category-banner::before {
        left: 100% !important;
    }
    
    .product-image-container {
        height: 180px !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        background: #f8fafc !important;
    }
    
    .product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.4s ease !important;
    }
    
    .product-image-container:hover .product-image {
        transform: scale(1.08) !important;
    }
    
    .product-info {
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        flex: 1 !important;
    }
    
    .product-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
        color: #1a1a1a !important;
        letter-spacing: -0.01em !important;
    }
    
    .product-description {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
        opacity: 0.7 !important;
        color: #666 !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .product-price {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: #1a1a1a !important;
        margin-bottom: 0.5rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Rating stars */
    .product-rating {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .rating-stars {
        display: flex !important;
        gap: 0.1rem !important;
    }
    
    .star {
        color: #ffd700 !important;
        font-size: 0.9rem !important;
    }
    
    .star.empty {
        color: #e2e8f0 !important;
    }
    
    .rating-text {
        font-size: 0.8rem !important;
        color: #666 !important;
        margin-left: 0.3rem !important;
    }
    
    .product-actions {
        display: flex !important;
        gap: 0.75rem !important;
        align-items: center !important;
        margin-top: auto !important;
        flex-wrap: wrap !important;
    }
    
    .btn-add-to-cart {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
        border: none !important;
        color: white !important;
        padding: 0.8rem 1.5rem !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
    }
    
    .btn-add-to-cart:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(251, 191, 36, 0.5) !important;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    }
    
    .quantity-controls {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        background: #f8fafc !important;
        padding: 0.5rem !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        min-width: 120px !important;
        justify-content: center !important;
    }
    
    .quantity-btn {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }
    
    .quantity-btn:hover {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border-color: #cbd5e1 !important;
        transform: scale(1.05) !important;
    }
    
    .quantity-display {
        font-weight: 700 !important;
        color: #1e293b !important;
        min-width: 24px !important;
        text-align: center !important;
        font-size: 1rem !important;
    }
    
    .in-cart-indicator {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        padding: 0.6rem 1rem !important;
        border-radius: 8px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
        flex: 1 !important;
        justify-content: center !important;
    }
    
    .action-buttons {
        margin-top: 0 !important;
    }
    
    .add-to-cart-btn,
    .remove-from-cart-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        height: 36px !important;
        font-weight: 600 !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }
    
    .add-to-cart-btn {
        background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
        color: white !important;
        box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3) !important;
    }
    
    .remove-from-cart-btn {
        background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
        color: white !important;
        box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3) !important;
    }
    
    /* Carrito flotante en móvil */
    .floating-cart {
        bottom: 1rem;
        right: 1rem;
        left: auto;
        width: auto;
        justify-content: center;
        padding: 1rem 1.5rem;
        border-radius: 25px;
        font-size: 1.1rem;
        min-width: 120px;
    }
    
    .cart-count {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    
    /* Botón de ayuda en móvil */
    .help-button {
        bottom: 1rem;
        left: 1rem;
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
    
    /* Onboarding en móvil */
    .onboarding-step {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 95vw;
        min-width: 0;
        padding: 2rem;
        margin: 0 !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2000 !important;
    }
    
    /* Asegurar que el carrito flotante sea visible en móvil */
    .floating-cart {
        bottom: 1rem !important;
        right: 1rem !important;
        left: auto !important;
        width: auto !important;
        z-index: 1002 !important;
        display: flex !important;
        min-width: 120px !important;
        position: fixed !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .onboarding-step h3 {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
        color: #2E8B57 !important;
        font-weight: 600 !important;
    }
    
    .onboarding-step p {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        color: #333 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .onboarding-nav {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .onboarding-btn {
        width: 100% !important;
        padding: 15px 24px !important;
        font-size: 1.1rem !important;
        border-radius: 25px !important;
        min-height: 48px !important;
        margin: 0.5rem 0 !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }
    
    .onboarding-btn:active {
        transform: scale(0.98) !important;
    }
    
    /* Tooltips en móvil */
    .help-tooltip .tooltip-text {
        width: 250px;
        font-size: 0.9rem;
        padding: 0.75rem;
    }
    
    /* Mensajes de confirmación en móvil */
    .confirmation-message {
        margin: 0.5rem;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Mejoras para el carrito en móvil */
    .summary-card {
        margin-top: 1rem;
        border-radius: 15px;
    }
    
    .summary-header {
        padding: 1rem;
    }
    
    .summary-body {
        padding: 1rem;
    }
    
    .summary-item {
        padding: 0.75rem 0;
        font-size: 1rem;
    }
    
    /* Botones de checkout en móvil */
    .checkout-btn {
        width: 100%;
        padding: 15px 20px;
        font-size: 1.2rem;
        border-radius: 15px;
        margin-top: 1rem;
    }
    
    /* Mejoras para formularios en móvil */
    .form-control {
        font-size: 1rem;
        padding: 12px 15px;
        border-radius: 10px;
    }
    
    .form-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    /* Mejoras para modales en móvil */
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .modal-content {
        border-radius: 15px;
    }
    
    .modal-header {
        padding: 1rem 1.5rem;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        padding: 1rem 1.5rem;
    }
    
    /* Mejoras para alertas en móvil */
    .alert {
        margin: 0.5rem;
        padding: 1rem;
        border-radius: 10px;
        font-size: 0.95rem;
    }
    
    /* Mejoras para navegación en móvil */
    .navbar-nav {
        text-align: center;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }
    
    /* Buscador profesional para móvil */
    .sticky-search-row {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.75rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        /* Solución alternativa para navegadores que no soportan sticky */
        position: -webkit-sticky !important;
        position: -moz-sticky !important;
        position: -ms-sticky !important;
        position: -o-sticky !important;
    }
    
    /* Fallback para navegadores antiguos */
    @supports not (position: sticky) {
        .sticky-search-row {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1000 !important;
        }
    }
    
    .search-container {
        margin: 1rem 0 1.5rem 0;
        padding: 0 0.5rem;
    }
    
    /* Asegurar que el contenedor padre tenga posición relativa */
    .container-fluid {
        position: relative !important;
    }
    
    .row {
        position: relative !important;
    }
    
    .col-12.col-sm-10.col-md-8.col-lg-6.col-xl-5 {
        position: relative !important;
    }
    
    .search-group {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #e2e8f0 !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
    }
    
    .search-group:focus-within {
        box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15) !important;
        border-color: #059669 !important;
        transform: translateY(-1px) !important;
    }
    
    .search-icon {
        background: transparent !important;
        color: #64748b !important;
        font-size: 1rem !important;
        padding: 0 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        flex-shrink: 0 !important;
        height: 100% !important;
    }
    
    .search-group:focus-within .search-icon {
        color: #059669 !important;
    }
    
    .search-input {
        border: none !important;
        background: transparent !important;
        padding: 0 0.5rem !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        outline: none !important;
        box-shadow: none !important;
        transition: all 0.3s ease !important;
        flex: 1 !important;
        min-width: 0 !important;
        height: 100% !important;
    }
    
    .search-input:focus {
        box-shadow: none !important;
        outline: none !important;
    }
    
    .search-input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
        font-size: 0.9rem !important;
    }
    
    .clear-btn {
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
        padding: 0 0.5rem !important;
        font-size: 0.9rem !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 100% !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }
    
    .clear-btn:hover {
        color: #64748b !important;
        transform: scale(1.1) !important;
    }
    
    .clear-btn:active {
        transform: scale(0.9) !important;
    }
    
    .search-btn {
        background: #059669 !important;
        border: none !important;
        color: white !important;
        padding: 0 1rem !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }
    
    .search-btn:hover {
        background: #047857 !important;
        transform: scale(1.05) !important;
    }
    
    .search-btn:active {
        transform: scale(0.95) !important;
    }
    
    /* Responsive para pantallas muy pequeñas */
    @media (max-width: 480px) {
        .search-container {
            padding: 0.5rem 0.25rem;
        }
        
        .search-group {
            border-radius: 10px !important;
            height: 44px !important;
        }
        
        .search-input {
            font-size: 0.9rem !important;
            padding: 0 0.25rem !important;
        }
        
        .search-icon {
            padding: 0 0.75rem !important;
            font-size: 0.9rem !important;
        }
        
        .clear-btn {
            width: 28px !important;
            font-size: 0.8rem !important;
        }
        
        .search-btn {
            width: 44px !important;
            padding: 0 0.75rem !important;
            font-size: 0.85rem !important;
        }
    }
    
    /* Mejoras para filtros en móvil */
    .filter-container {
        margin-bottom: 1rem;
    }
    
    .filter-btn {
        width: 100%;
        padding: 10px 15px;
        margin-bottom: 0.5rem;
        border-radius: 10px;
        font-size: 1rem;
    }
    
    /* Mejoras para paginación en móvil */
    .pagination {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .page-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
        margin: 0 0.25rem;
    }
    
    /* Mejoras para loading states en móvil */
    .loading-state {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    .loading-spinner {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 1rem;
    }
    
    /* Mejoras para empty states en móvil */
    .empty-state {
        text-align: center;
        padding: 2rem 1rem;
    }
    
    .empty-state i {
        font-size: 3rem;
        color: #ccc;
        margin-bottom: 1rem;
    }
    
    .empty-state h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        font-size: 1rem;
        color: #666;
        margin-bottom: 1.5rem;
    }
    
    /* Mejoras para animaciones en móvil */
    @keyframes slideInUpMobile {
        from {
            transform: translateY(30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .animate-fade-in-up {
        animation: slideInUpMobile 0.6s ease;
    }
    
    /* Mejoras para scroll en móvil */
    .smooth-scroll {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mejoras para touch targets */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Mejoras para feedback táctil */
    .touch-feedback {
        -webkit-tap-highlight-color: rgba(46, 139, 87, 0.2);
    }
    
    /* Mejoras para orientación landscape */
    @media (orientation: landscape) and (max-height: 500px) {
        .products-header {
            padding: 1rem 0;
        }
        
        .products-title {
            font-size: 1.5rem;
        }
        
        .ordering-steps {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .step-item {
            width: auto;
            padding: 0.5rem 1rem;
        }
    }
    
    /* Mejoras para pantallas muy pequeñas */
    @media (max-width: 480px) {
        .products-title {
            font-size: 1.6rem;
        }
        
        .step-item {
            padding: 0.75rem;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            font-size: 1rem;
        }
        
        .product-card-improved {
            padding: 0.75rem;
        }
        
        .product-image {
            height: 160px;
        }
        
        .quantity-btn {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }
        
        .add-to-cart-btn,
        .remove-from-cart-btn {
            padding: 12px 15px;
            font-size: 1rem;
        }
        
        /* Asegurar que el carrito flotante sea visible en pantallas muy pequeñas */
        .floating-cart {
            bottom: 0.75rem !important;
            right: 0.75rem !important;
            left: auto !important;
            width: auto !important;
            z-index: 1002 !important;
            display: flex !important;
            min-width: 100px !important;
            position: fixed !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 0.75rem 1rem !important;
            font-size: 1rem !important;
        }
    }
}