/* ============================================
   RESPONSIVE DESIGN - Mobile First
   ============================================ */

/* ========== MOBILE (hasta 576px) ========== */
@media (max-width: 575.98px) {
    /* Tipografía más pequeña */
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }
    
    /* Espaciado reducido */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* Cards más compactas */
    .card-body {
        padding: var(--spacing-md);
    }
    
    .card-img-top {
        height: 180px;
    }
    
    /* Botones full width en móvil */
    .btn {
        width: 100%;
        min-height: 44px; /* Touch target mínimo */
    }
    
    /* Navbar más compacto */
    .navbar {
        padding: var(--spacing-sm) 0;
    }
    
    .navbar-brand {
        font-size: var(--font-size-base);
    }
    
    .navbar-brand img {
        height: 40px !important;
        max-width: 140px !important;
    }
    
    /* Formularios más grandes */
    .form-control,
    .form-select {
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
        min-height: 44px;
    }
    
    /* Tablas responsive - scroll horizontal */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Modals full screen en móvil */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    /* Hero section responsive */
    .hero-section {
        padding: 3rem 0 !important;
    }
    
    .display-4 {
        font-size: var(--font-size-2xl) !important;
    }
    
    /* Product grid responsive */
    .product-item {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Checkout steps responsive */
    .checkout-progress {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .progress-line {
        display: none;
    }
    
    /* Sticky elements menos sticky en móvil */
    .sticky-top {
        position: relative !important;
        top: 0 !important;
    }
    
    /* Filtros sidebar en móvil */
    #filtersSidebar {
        position: relative !important;
        margin-bottom: var(--spacing-lg);
    }
}

/* ========== TABLET (576px - 768px) ========== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .card-img-top {
        height: 220px;
    }
    
    .price {
        font-size: var(--font-size-xl);
    }
    
    /* Hero section tablet */
    .hero-section {
        padding: 4rem 0 !important;
    }
    
    /* Product grid tablet */
    .product-item {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Checkout steps tablet */
    .checkout-progress {
        gap: var(--spacing-md);
    }
}

/* ========== DESKTOP (768px - 992px) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card-img-top {
        height: 240px;
    }
    
    /* Product gallery responsive */
    .product-gallery .main-image img {
        height: 500px !important;
    }
    
    /* Sticky sidebar menos sticky en tablets */
    .sticky-top {
        position: sticky;
        top: var(--spacing-md);
    }
}

/* ========== LARGE DESKTOP (992px+) ========== */
@media (min-width: 992px) {
    .container {
        max-width: 1200px;
    }
    
    /* Grid de productos más espaciado */
    .product-grid {
        gap: var(--spacing-xl);
    }
}

/* ========== TOUCH DEVICES ========== */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar áreas táctiles */
    .btn,
    .nav-link,
    .card {
        min-height: 44px;
    }
    
    /* Remover hover effects en touch */
    .card:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .navbar,
    .btn,
    footer,
    .breadcrumb {
        display: none;
    }
    
    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* ========== LANDSCAPE ORIENTATION ========== */
@media (orientation: landscape) and (max-height: 500px) {
    .navbar {
        padding: var(--spacing-xs) 0;
    }
    
    .hero-section {
        padding: var(--spacing-lg) 0;
    }
}

/* ========== HIGH DPI DISPLAYS ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card-img-top,
    .product-gallery img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}