/**
 * MÓDULO MÓVIL DEDICADO - OVERRIDE TOTAL
 * Este archivo tiene la MÁXIMA PRIORIDAD sobre todos los demás estilos móviles
 * Debe cargarse DESPUÉS de results.css y categorias.css
 *
 * Mayoreo Joinet - Mobile First Override v1.0
 */

/* ============================================
   RESET ABSOLUTO - ELIMINAR TODO OVERFLOW
   ============================================ */

@media (max-width: 767px) {
    /* ===== OVERRIDE CRÍTICO: Eliminar min-width de 1200px ===== */
    .jn-results-table,
    table.jn-results-table,
    .jn-cat-content .jn-results-table,
    .jn-cat-content table.jn-results-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ===== NIVEL 1: HTML & BODY ===== */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        position: relative !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* Permitir que el body bloquee scroll cuando lightbox está abierto */
    body.lb-disable-scrolling {
        overflow: hidden !important;
    }

    /* ===== NIVEL 2: CONTENEDORES BOOTSTRAP ===== */
    .container-fluid {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .row {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .col-sm-12,
    [class*="col-"] {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ===== NIVEL 3: CONTENEDORES DE PÁGINA ===== */
    #content,
    article,
    .page-content,
    .jn-results-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===== NIVEL 4: TABLA Y WRAPPER ===== */
    .jn-results-table-wrapper,
    .jn-cat-content .jn-results-table-wrapper {
        overflow-x: hidden !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .jn-results-table,
    .jn-cat-content .jn-results-table,
    table.jn-results-table {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
        border-collapse: collapse !important;
    }

    .jn-results-table thead,
    .jn-cat-content .jn-results-table thead {
        display: none !important;
    }

    .jn-results-table tbody,
    .jn-cat-content .jn-results-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* ===== DESHABILITAR EFECTOS QUE CAUSAN OVERFLOW ===== */
    .jn-results-table tbody tr:hover,
    .jn-results-table tbody .jn-results-row:hover,
    .jn-cat-content .jn-results-table tbody tr:hover,
    .jn-cat-content .jn-results-table tbody .jn-results-row:hover {
        transform: none !important;
    }

    .jn-image-wrapper a:hover,
    .jn-price-item:hover,
    .jn-cell-description .product-link:hover {
        transform: none !important;
    }

    /* ===== GLightbox - Estilos móviles ===== */
    .glightbox-container {
        max-width: 100vw !important;
        overflow: visible !important;
    }

    .gslide-image img {
        max-width: 95vw !important;
        max-height: 75vh !important;
    }

    /* ===== Botones de estado - Móvil ===== */
    .jn-btn-disabled {
        padding: 6px 12px !important;
        font-size: 11px !important;
        text-transform: none !important;
    }

    .jn-btn-no-online {
        padding: 10px 12px !important;
        font-size: 11px !important;
        text-transform: none !important;
        border-radius: 6px !important;
    }

    .jn-btn-no-online .jn-subtext {
        font-size: 10px !important;
    }
}