/*
=====================================
RESPONSIVE CSS PARA WEB ELECTROTIENDA
=====================================
*/

/* Variables para breakpoints */
:root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* ====================================
   LAYOUT RESPONSIVE GENERAL
==================================== */

/* Extra small devices (phones, 0px and up) */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Ocultar elementos en móviles */
    .d-none-mobile {
        display: none !important;
    }
    
    /* Mostrar solo en móviles */
    .d-mobile-only {
        display: block !important;
    }
    
    /* Texto más pequeño en móviles */
    .lead {
        font-size: 1rem !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .d-sm-none {
        display: none !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .d-md-none {
        display: none !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* ====================================
   HEADER / NAVBAR RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    /* Header móvil */
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    .navbar-nav {
        text-align: center;
        padding-top: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Búsqueda móvil */
    .search-form {
        margin: 1rem 0;
    }
    
    .search-form .input-group {
        max-width: 100%;
    }
    
    /* Carrito móvil */
    .cart-info {
        justify-content: center;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .cart-count {
        font-size: 0.8rem !important;
    }
}

/* ====================================
   HERO SECTION RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .hero-section {
        padding: 2rem 0 !important;
        text-align: center;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-section .lead {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-section .btn {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .hero-section .row {
        text-align: center;
    }
    
    .hero-section .col-lg-6:last-child {
        margin-top: 2rem;
    }
}

/* ====================================
   PRODUCTOS GRID RESPONSIVE
==================================== */

/* Grid de productos adaptativo */
@media (max-width: 575.98px) {
    .productos-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1rem !important;
    }
    
    .productos-grid .col-lg-3,
    .productos-grid .col-lg-4,
    .productos-grid .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .productos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .productos-grid .col-lg-3,
    .productos-grid .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .productos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .productos-grid .col-lg-3 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* ====================================
   PRODUCT CARDS RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .product-card {
        margin-bottom: 1rem;
    }
    
    .product-card .card-body {
        padding: 1rem !important;
    }
    
    .product-card .card-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        height: auto !important;
        margin-bottom: 0.5rem !important;
    }
    
    .product-card .text-muted {
        font-size: 0.8rem !important;
    }
    
    .product-card .price-info {
        margin: 0.5rem 0 !important;
    }
    
    .product-card .price-main {
        font-size: 1.1rem !important;
    }
    
    .product-card .price-levels {
        font-size: 0.75rem !important;
    }
    
    .product-card .btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Imagen del producto móvil */
    .card-img-container {
        height: 180px !important;
    }
    
    .product-card img {
        max-height: 160px !important;
    }
}

/* ====================================
   FILTROS Y BÚSQUEDA RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .filtros-section {
        padding: 1rem !important;
    }
    
    .filtros-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .filtros-row > div {
        width: 100% !important;
        flex: none !important;
    }
    
    .btn-group {
        width: 100% !important;
    }
    
    .btn-group .btn {
        flex: 1 !important;
    }
    
    /* Select de ordenamiento */
    .form-select {
        font-size: 0.9rem !important;
    }
    
    /* Paginación móvil */
    .pagination {
        justify-content: center !important;
        margin-top: 2rem !important;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Ocultar números de página en móviles excepto actual y adyacentes */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.previous):not(.next) {
        display: none !important;
    }
}

/* ====================================
   PRODUCTO DETALLE RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .producto-detalle .row {
        margin: 0 !important;
    }
    
    .producto-detalle .col-md-6 {
        padding: 0 !important;
        margin-bottom: 2rem;
    }
    
    /* Galería de imágenes móvil */
    .producto-imagenes {
        text-align: center;
    }
    
    .imagen-principal {
        max-height: 300px !important;
        margin-bottom: 1rem;
    }
    
    .imagenes-thumbnails {
        gap: 0.5rem !important;
    }
    
    .imagenes-thumbnails img {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Info del producto móvil */
    .producto-info h1 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .precio-principal {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .precios-escalonados {
        font-size: 0.85rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Variantes móvil */
    .variantes-colores {
        margin-bottom: 1.5rem !important;
    }
    
    .color-option {
        width: 35px !important;
        height: 35px !important;
        margin: 0.25rem !important;
    }
    
    /* Controles de cantidad móvil */
    .cantidad-controls {
        margin-bottom: 1.5rem !important;
    }
    
    .cantidad-controls .btn {
        padding: 0.5rem 0.75rem !important;
    }
    
    .cantidad-input {
        text-align: center !important;
        font-size: 1.1rem !important;
    }
    
    /* Botones de acción móvil */
    .producto-acciones {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        padding: 1rem !important;
        margin: 0 -15px !important;
        border-top: 1px solid #dee2e6 !important;
        z-index: 1000 !important;
    }
    
    .producto-acciones .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }
}

/* ====================================
   CARRITO RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .carrito-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1rem !important;
    }
    
    .carrito-item .row {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .carrito-item .col-2 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
    
    .carrito-item .col-4 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        padding-left: 1rem !important;
    }
    
    .carrito-item .col-3,
    .carrito-item .col-2:last-child {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-top: 1rem !important;
        text-align: center !important;
    }
    
    .carrito-item .col-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 1rem !important;
        text-align: center !important;
    }
    
    /* Resumen del carrito móvil */
    .carrito-resumen {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 2px solid #dee2e6 !important;
        padding: 1rem !important;
        margin: 0 -15px !important;
        z-index: 1000 !important;
    }
    
    .carrito-resumen .btn {
        width: 100% !important;
        font-size: 1.1rem !important;
        padding: 0.75rem !important;
    }
}

/* ====================================
   CHECKOUT RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .checkout-steps {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .step-item {
        width: 100% !important;
        text-align: center !important;
    }
    
    .checkout-form .row {
        margin: 0 !important;
    }
    
    .checkout-form .col-md-6 {
        padding: 0.5rem !important;
    }
    
    .form-floating {
        margin-bottom: 1rem !important;
    }
    
    /* Resumen del pedido móvil */
    .order-summary {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 2px solid #dee2e6 !important;
        padding: 1rem !important;
        margin: 2rem -15px 0 !important;
        z-index: 1000 !important;
    }
    
    .order-summary .btn {
        width: 100% !important;
        font-size: 1.1rem !important;
        padding: 0.75rem !important;
    }
}

/* ====================================
   MI CUENTA RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .account-sidebar {
        margin-bottom: 2rem !important;
    }
    
    .account-nav {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .account-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    .account-nav .nav-link {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-right: 1rem !important;
        border-radius: 20px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Tabla de pedidos móvil */
    .table-responsive {
        border: none !important;
    }
    
    .table {
        font-size: 0.8rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }
    
    /* Ocultar columnas en móvil */
    .table .d-none-mobile {
        display: none !important;
    }
}

/* ====================================
   FOOTER RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    footer .row {
        text-align: center !important;
    }
    
    footer .col-lg-3 {
        margin-bottom: 2rem !important;
    }
    
    footer h5,
    footer h6 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    footer .list-unstyled li {
        margin-bottom: 0.5rem !important;
    }
    
    footer .social-links {
        justify-content: center !important;
        gap: 1rem !important;
    }
    
    footer .btn {
        margin: 0.25rem !important;
    }
}

/* ====================================
   BOTONES FLOTANTES RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .whatsapp-float {
        bottom: 80px !important;
        right: 15px !important;
    }
    
    .scroll-top {
        bottom: 80px !important;
        left: 15px !important;
    }
    
    .whatsapp-float .btn,
    .scroll-top .btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }
}

/* ====================================
   UTILIDADES RESPONSIVE
==================================== */

/* Espaciado responsive */
@media (max-width: 767.98px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
}

/* Texto responsive */
@media (max-width: 767.98px) {
    .text-responsive {
        font-size: 0.9rem !important;
    }
    
    .lead-responsive {
        font-size: 1rem !important;
    }
    
    .small-mobile {
        font-size: 0.8rem !important;
    }
}

/* ====================================
   LOADING Y ESTADOS RESPONSIVE
==================================== */

@media (max-width: 767.98px) {
    .loading-overlay {
        font-size: 0.9rem !important;
    }
    
    .spinner-border {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .alert {
        font-size: 0.9rem !important;
        padding: 0.75rem !important;
    }
}

/* ====================================
   PRINT STYLES
==================================== */

@media print {
    .d-print-none {
        display: none !important;
    }
    
    .navbar,
    .breadcrumb,
    .pagination,
    .whatsapp-float,
    .scroll-top,
    .btn,
    footer {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    .product-card img {
        max-height: 150px !important;
    }
}

/* ====================================
   ACCESIBILIDAD RESPONSIVE
==================================== */

/* Focus mejorado en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .btn:focus,
    .form-control:focus,
    .nav-link:focus {
        outline: 3px solid var(--primary-color) !important;
        outline-offset: 2px !important;
    }
    
    /* Botones más grandes para tocar */
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .pagination .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Reducir movimiento para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====================================
   LANDSCAPE ORIENTATION
==================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 1rem 0 !important;
    }
    
    .navbar-collapse {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .producto-acciones,
    .carrito-resumen,
    .order-summary {
        position: relative !important;
        bottom: auto !important;
    }
}

/* ====================================
   DARK MODE RESPONSIVE
==================================== */

@media (prefers-color-scheme: dark) and (max-width: 767.98px) {
    .navbar-toggler {
        border-color: rgba(255,255,255,0.3) !important;
    }
    
    .navbar-toggler-icon {
        filter: invert(1) !important;
    }
    
    .card {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    
    .form-control,
    .form-select {
        background-color: #4a5568 !important;
        border-color: #718096 !important;
        color: #e2e8f0 !important;
    }
}