/* ============================================================
   TAZZ SHOPPER — Mobile Optimized CSS
   Diseñado para celulares: velocidad, legibilidad y conversión
   ============================================================ */

/* ── Meta Touch improvements ── */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
a, button {
    touch-action: manipulation; /* Removes 300ms delay */
}

/* ────────────────────────────────────────────
   BREAKPOINT PRINCIPAL: ≤ 768px (smartphones)
   ──────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Body ── */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* ── Top info bar ── */
    .top-bar-inner {
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px !important;
    }

    /* Ocultar separadores y redes en barra top para ganar espacio */
    .top-bar-inner > div:last-child {
        display: none !important;
    }

    /* ── Admin bar compacto ── */
    [style*="MODO ADMINISTRADOR"],
    [style*="position: sticky; top: 0; z-index: 10000"] {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── HEADER ── */
    .market-header {
        padding: 0.5rem 0 !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .market-container {
        padding: 0 0.6rem !important;
    }

    .header-top {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.6rem !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Logo más compacto */
    .logo img {
        height: 40px !important;
        width: 40px !important;
    }

    .logo span {
        font-size: 1.2rem !important;
    }

    /* ── Search bar ── */
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-box input {
        font-size: 0.85rem !important;
        padding: 0.6rem 0.8rem !important;
        border-radius: 8px !important;
        padding-right: 2.8rem !important;
    }

    .search-box button {
        padding: 0 0.7rem !important;
        font-size: 0.9rem !important;
        border-radius: 0 6px 6px 0 !important;
    }

    /* ── Header icons (Favoritos, Mi cuenta, Carrito) ── */
    .header-icons {
        gap: 1rem !important;
        flex-shrink: 0;
    }

    .header-icon-item span {
        display: none !important; /* Ocultar etiquetas en móvil */
    }

    .header-icon-item i {
        font-size: 1.35rem !important;
        margin-bottom: 0 !important;
    }

    /* ── Navbar horizontal (categorías) ── */
    nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    nav .market-container {
        display: flex !important;
        gap: 1.2rem !important;
        padding: 0.6rem 0.6rem !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }

    nav .market-container::-webkit-scrollbar {
        display: none !important;
    }

    nav a {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
        padding: 4px 0 !important;
        flex-shrink: 0 !important;
    }

    /* ── Main layout ── */
    main.market-container {
        padding: 0 0.5rem !important;
    }

    .market-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 0.5rem !important;
    }

    .main-column {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ── Promo banner / Hero carousel ── */
    .promo-showcase {
        margin-bottom: 1.5rem !important;
    }

    .promo-showcase .market-section-title {
        margin-bottom: 0.6rem !important;
    }

    .promo-showcase .market-section-title h2 {
        font-size: 0.95rem !important;
    }

    .promo-carousel-wrapper {
        border-radius: 14px !important;
    }

    .promo-banner-slide {
        aspect-ratio: 16/9 !important;
        background: #000 !important;
    }

    .promo-banner-slide img {
        object-fit: contain !important;
        background: #000 !important;
    }

    /* Dots más pequeños */
    .promo-dot {
        width: 7px !important;
        height: 7px !important;
    }

    .promo-dot.active {
        width: 18px !important;
    }

    /* ── Trust badges (íconos de calidad) ── */
    .trust-badges {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .trust-badges > div {
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .trust-badges i {
        font-size: 1.5rem !important;
    }

    .trust-badges h4 {
        font-size: 0.72rem !important;
        margin: 0 !important;
    }

    .trust-badges span {
        font-size: 0.68rem !important;
    }

    /* ── Sección de transmisiones en vivo ── */
    .live-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ── Anuncios destacados (horizontal scroll) ── */
    .horizontal-ads-section {
        margin-bottom: 1.5rem !important;
    }

    .horizontal-ads-container {
        gap: 0.8rem !important;
        padding: 6px 4px !important;
    }

    .ad-banner-card {
        height: 260px !important;
    }

    /* ── Product carousels ── */
    .carousel-row-container {
        margin-bottom: 1.5rem !important;
        padding: 0 4px !important;
    }

    .market-section-title h2 {
        font-size: 0.95rem !important;
    }

    .market-section-title a {
        font-size: 0.8rem !important;
    }

    .carousel-track {
        gap: 0.8rem !important;
        padding: 6px 4px !important;
    }

    .product-card-slide {
        width: 180px !important; /* Más ancho en pantalla → caben 2+ en vista */
    }

    /* ── Product grid (catálogo) ── */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }

    /* ── Product card ── */
    .product-card {
        border-radius: 12px !important;
    }

    .product-card:hover {
        transform: none !important; /* Desactivar hover float en touch */
    }

    .product-card:hover .product-image {
        transform: none !important;
    }

    .product-image-container {
        height: 145px !important;
    }

    .product-info {
        padding: 0.55rem 0.65rem 0.4rem !important;
    }

    .product-info h3 {
        font-size: 0.75rem !important;
        height: auto !important;
        max-height: 2.8em !important;
        min-height: unset !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.35 !important;
    }

    .price-container {
        gap: 5px !important;
        height: auto !important;
    }

    .price {
        font-size: 0.95rem !important;
    }

    .old-price {
        font-size: 0.72rem !important;
    }

    .product-actions {
        position: static !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding: 0 0.6rem 0.5rem !important;
        height: auto !important;
    }

    .btn-cart-round {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    /* Sold-out overlay */
    .stock-label {
        font-size: 1rem !important;
        padding: 3px 8px !important;
        border-width: 3px !important;
    }

    /* ── Presale cards ── */
    .presales-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    .presale-info {
        padding: 0.8rem !important;
    }

    .presale-info h3 {
        font-size: 0.8rem !important;
    }

    .presale-price {
        font-size: 1.1rem !important;
    }

    /* ── Ads horizontal row (home) ── */
    .ads-horizontal-row {
        gap: 0.8rem !important;
    }

    .ad-slot-widget {
        height: 230px !important;
    }

    /* ── Cart sidebar (bottom sheet en móvil) ── */
    #cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        top: auto !important;
        bottom: -100% !important;
        height: 88vh !important;
        border-radius: 20px 20px 0 0 !important;
        transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    #cart-sidebar.active {
        bottom: 0 !important;
        right: 0 !important;
    }

    /* ── Footer ── */
    footer {
        padding: 1.2rem 0.8rem !important;
        margin-top: 1rem !important;
        font-size: 0.82rem !important;
    }

    footer > div > div:first-child {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem !important;
    }

    footer .container {
        padding: 0 !important;
    }

    /* Footer links en columna */
    footer > .market-container > div > div[style*="display: flex; gap: 2rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* ── Floating social buttons (WhatsApp, etc.) ── */
    .floating-contact-wrapper {
        bottom: 16px !important;
        right: 14px !important;
        gap: 8px !important;
    }

    .floating-contact-wrapper button[onclick*="togglePlatformMenu"] {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.3rem !important;
    }

    /* WhatsApp button */
    .floating-contact-wrapper > div > button:last-child {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.6rem !important;
    }

    /* Social dropdown menus */
    .social-dropdown-menu a {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    /* ── Toast notifications ── */
    #toast-container {
        bottom: 70px !important;
        right: 8px !important;
        left: 8px !important;
        align-items: center !important;
    }

    /* ── Lightbox / Modal ── */
    #universalModal > div {
        width: 95% !important;
        padding: 1.5rem !important;
        max-height: 92vh !important;
    }

    /* ── Welcome toast ── */
    #welcome-toast {
        width: 92% !important;
        padding: 1rem 1.2rem !important;
        flex-wrap: wrap !important;
    }

    /* ── Section spacing ── */
    section {
        margin-bottom: 1.5rem !important;
    }

    /* ── Miscelánea ── */
    .glass-card {
        border-radius: 12px !important;
    }

}

/* ────────────────────────────────────────────
   BREAKPOINT: ≤ 480px (teléfonos pequeños)
   ──────────────────────────────────────────── */
@media (max-width: 480px) {

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
    }

    .product-image-container {
        height: 130px !important;
    }

    .product-card-slide {
        width: 155px !important;
    }

    .presales-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .trust-badges {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0.8rem !important;
    }

    .logo span {
        display: none !important; /* Solo logo imagen en pantallas muy pequeñas */
    }

    .promo-banner-slide {
        aspect-ratio: 16/9 !important;
    }

    .header-icons {
        gap: 0.7rem !important;
    }
}

/* ────────────────────────────────────────────
   BREAKPOINT: ≤ 380px (teléfonos muy pequeños)
   ──────────────────────────────────────────── */
@media (max-width: 380px) {

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
    }

    .product-image-container {
        height: 115px !important;
    }

    .product-card-slide {
        width: 140px !important;
    }

    .product-info h3 {
        font-size: 0.7rem !important;
    }

    .price {
        font-size: 0.88rem !important;
    }
}

/* ────────────────────────────────────────────
   MEJORAS GLOBALES (todas las pantallas)
   Optimizaciones de rendimiento
   ──────────────────────────────────────────── */

/* Lazy loading y rendering optimization */
img {
    content-visibility: auto;
}

/* Smooth scrolling nativo en móvil */
.carousel-track-container,
.horizontal-ads-container,
nav .market-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevenir FOUC en carruseles */
.carousel-track {
    will-change: transform;
}

/* Botones más grandes para touch (mínimo 44px) */
@media (max-width: 768px) {
    .btn, button[type="submit"] {
        min-height: 44px;
    }

    /* Links de navegación más cómodos al tacto */
    nav a {
        min-height: 40px;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Reducir padding del promo nav section para más espacio de contenido */
    .promo-showcase {
        padding: 0 !important;
    }

    /* Sombra del header mejorada para que se vea bien al hacer scroll */
    .market-header {
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    }
}

/* ============================================================
   ESTILOS ADICIONALES MOBILE — Páginas interiores
   ============================================================ */

/* ── PRODUCT DETAIL (detalle de producto) ── */
@media (max-width: 768px) {
    /* Layout de 2 columnas → 1 columna en móvil */
    .product-detail-grid,
    .detail-grid,
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 45% 55%"],
    [style*="grid-template-columns: 40% 60%"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Imagen del producto */
    .product-detail-image,
    .detail-image-col {
        width: 100% !important;
        max-height: 320px !important;
    }

    /* Lightbox */
    .lightbox-img {
        max-height: 80vh !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    /* Thumbnails en fila */
    .thumb-row, .thumbnail-row {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
    }

    /* Precio en detalle */
    .detail-price {
        font-size: 1.6rem !important;
    }

    /* Botones de acción (agregar al carrito, comprar) */
    .detail-actions,
    .product-detail-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .detail-actions .btn,
    .product-detail-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Tabs / pestañas de descripción */
    .detail-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── CATALOG (catálogo / búsqueda) ── */
@media (max-width: 768px) {
    /* Filtros arriba del grid */
    .catalog-layout,
    .catalog-container {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    /* Barra de filtros horizontal */
    .filter-bar, .sort-bar {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 0.5rem 0 !important;
        gap: 0.5rem !important;
    }

    /* Grilla de 2 columnas en catálogo */
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    /* Título de categoría */
    .catalog-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.8rem !important;
    }
}

/* ── CART (carrito) ── */
@media (max-width: 768px) {
    /* Tabla de carrito → tarjetas */
    .cart-table, .cart-items-table {
        display: block !important;
        width: 100% !important;
    }

    .cart-table thead {
        display: none !important;
    }

    .cart-table tr, .cart-item-row {
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 0.8rem !important;
    }

    /* Layout del carrito principal */
    .cart-layout,
    .cart-page-layout {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .cart-summary-box,
    .cart-total-box {
        width: 100% !important;
        position: static !important;
    }

    /* Sidebar del carrito como bottom-sheet */
    #cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        top: auto !important;
        bottom: -100% !important;
        height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    #cart-sidebar.active {
        bottom: 0 !important;
    }

    /* Botones del carrito */
    .cart-actions {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .cart-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
    footer {
        padding: 1.5rem 1rem !important;
    }

    footer .market-container > div:first-child {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: flex-start !important;
    }

    footer div[style*="gap: 2rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    footer p, footer a {
        font-size: 0.82rem !important;
    }
}

/* ── FORMULARIOS (registro, login, envío) ── */
@media (max-width: 768px) {
    .form-grid,
    .register-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    .auth-card, .form-card {
        padding: 1.5rem 1rem !important;
        border-radius: 16px !important;
        margin: 0.5rem !important;
    }

    input, select, textarea {
        font-size: 16px !important; /* Previene zoom en iOS */
    }
}

/* ── PERFIL DE USUARIO ── */
@media (max-width: 768px) {
    .profile-layout {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .profile-sidebar {
        width: 100% !important;
    }

    .profile-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .orders-table {
        display: block !important;
        overflow-x: auto !important;
    }
}

/* ── SUBASTAS ── */
@media (max-width: 768px) {
    .auction-card {
        padding: 1rem !important;
    }

    .auction-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .bid-section {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .bid-input-row {
        flex-direction: column !important;
        width: 100% !important;
    }

    .bid-input-row input,
    .bid-input-row button {
        width: 100% !important;
    }
}