/* =====================================================================
   responsive-fixes.css  —  Fase 1 (P0) del análisis UX móvil de muli.cl
   ---------------------------------------------------------------------
   CSS ADITIVO de bajo riesgo. Se carga DESPUÉS de style.css/naranjo.css
   en todas las páginas. Todas las reglas viven dentro de media queries
   `max-width`, de modo que NO alteran el layout de escritorio (>=992px).

   Cubre los 3 bloqueadores móviles P0:
     1. Carrito: tabla de 9 columnas que se desbordaba (se combina con
        el wrapper .table-responsive agregado en carro.html).
     2. Navbar/búsqueda: anchos fijos (1000px / 800x400px) que se salían
        del viewport.
     3. Inputs: refuerzo de tamaño de fuente para evitar el auto-zoom de
        iOS (los tipos type/inputmode se ajustan en el HTML).

   NO tocar la doble carga de jQuery. Editar parciales, no páginas.
   Al modificar este archivo, subir el cache-busting (?ver=) en todas
   las páginas que lo enlazan.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) CARRITO — evitar desborde horizontal en tablet y móvil
   ------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* El wrapper .table-responsive (agregado en carro.html) ya da scroll
       horizontal contenido. Aquí solo compactamos para que quepa más. */
    #cart.table > thead > tr > th,
    #cart.table > tbody > tr > td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap;
    }
    #cart .btn {
        padding: 6px 10px;
    }
}

@media (max-width: 767px) {
    /* Miniatura del producto más chica dentro del carrito */
    #cart img.wp-post-image {
        height: 32px !important;
    }
    /* El bloque de datos de envío / método / pago se apila a ancho completo */
    #datos-pago-cliente .col-md-6,
    #datos-pago-cliente .col-md-3 {
        width: 100%;
    }
    /* Inputs de checkout a ancho fluido (anulan el size="40" visual) */
    #datos-pago-cliente .input-text {
        width: 100% !important;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   2) NAVBAR — menú de categorías y caja de búsqueda dentro del viewport
   ------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Dropdown de categorías: quitar el width:1000px !important fijo */
    #menu-vertical-menu {
        width: 100% !important;
        max-width: 100vw;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden;
    }
    /* Las 5 columnas de familias (span2) pasan a apilarse a ancho completo */
    #menu-vertical-menu .yamm-content {
        padding: 8px 12px;
    }
    #menu-vertical-menu .span2 {
        width: 100% !important;
        display: block;
        float: none;
        margin: 0 0 6px 0;
    }

    /* Caja de resultados de búsqueda: quitar el 800x400 fijo */
    #busqueda_productos_box {
        width: 100vw !important;
        max-width: 100vw;
        height: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
    #busqueda_productos_box .col-md-4,
    #busqueda_productos_box .col-md-8 {
        width: 100%;
    }
    #busqueda_productos_resultados {
        height: auto !important;
        max-height: 55vh;
        overflow-y: auto !important;
    }
    #busqueda_productos_familias {
        max-height: 25vh;
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------------
   3) INPUTS — evitar el auto-zoom de iOS al enfocar (fuente >= 16px)
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    input.form-control,
    input.input-text,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

/* =====================================================================
   FASE 2 (P1) — UX táctil, accesibilidad y feedback
   ===================================================================== */

/* ---------------------------------------------------------------------
   4) TARGETS TÁCTILES >= 44px — botones y controles de cantidad chicos
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Botones chicos de la plantilla suben a altura táctil mínima */
    .btn-xs,
    .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Botón "Agregar" del listado y "restringido": ancho fluido */
    #grid .btn.spec,
    .products .btn.btn-sm {
        width: 100%;
        white-space: normal;
    }
    /* +/- e input de cantidad (detalle y listado) con área tocable */
    .quantity .btn,
    .quantity input,
    input.qty,
    .cantidad-input {
        min-height: 44px;
    }
    /* El icono de editar cantidad del carrito, más tocable */
    #cart .fa-edit {
        padding: 8px;
        font-size: 18px;
    }
}

/* ---------------------------------------------------------------------
   8) FOCO VISIBLE — accesibilidad de teclado (todas las resoluciones)
   ------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus {
    outline: 2px solid #e63001;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   9) WHATSAPP FLOTANTE — que el popup no se salga en pantallas chicas
   ------------------------------------------------------------------- */
.floating-wpp {
    z-index: 1030; /* bajo el de los modales de Bootstrap (1040+) */
}
@media (max-width: 520px) {
    .floating-wpp .floating-wpp-popup.active {
        left: auto;
        right: 0;
        width: min(260px, 86vw);
        max-width: 86vw;
    }
}

/* =====================================================================
   FASE 3 (P2) — i18n móvil y rendimiento
   ===================================================================== */

/* ---------------------------------------------------------------------
   10) SELECTOR DE IDIOMA — targets grandes y centrados en móvil
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    #menu-top-bar-right {
        float: none !important;
        text-align: center;
        margin: 6px 0 !important;
        padding-left: 0;
    }
    #menu-top-bar-right > li {
        display: inline-block;
        float: none;
    }
    #menu-top-bar-right .lang-link {
        display: inline-block;
        padding: 6px 10px;
        font-size: 13px;
        line-height: 20px;
        white-space: nowrap;
    }
    #menu-top-bar-right > li {
        margin: 0 2px;
    }
}

/* ---------------------------------------------------------------------
   11) LEGIBILIDAD — subir las fuentes 10–12px de las tarjetas de producto
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* COD/Packing generados por JS con font-size:10-12px inline (ilegibles) */
    #grid .product p {
        font-size: 13px !important;
    }
}

/* ---------------------------------------------------------------------
   12) DETALLE DE PRODUCTO — imagen y miniaturas fluidas en móvil
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Imagen principal no se sale del ancho */
    #articulo_foto {
        max-width: 100%;
        height: auto;
    }
    /* Miniaturas: quitar el width:136px/height:102px fijo, hacerlas fluidas */
    .ImagenesChicas {
        width: 100%;
    }
    .ImagenesChicas td {
        width: 33.33%;
    }
    .ImagenesChicas img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ---------------------------------------------------------------------
   13) GRID DE PRODUCTOS — 2 por fila en celular (desde 320px)
   La plantilla usa float:left y colapsa a 1 columna en móvil chico.
   Se cambia a flexbox SOLO en ≤767px para forzar 2 columnas parejas
   (evita el "efecto escalera" del float con tarjetas de distinta altura).
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    #grid {
        overflow-x: hidden; /* salvaguarda: nada de scroll horizontal por redondeo sub-pixel */
    }
    #grid ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    #grid ul.products li.product {
        width: 50% !important;
        float: none !important;
        clear: none !important;
        box-sizing: border-box;
        padding: 0 4px !important;
    }
    /* Que el contenido de la tarjeta no exceda la columna (evita desborde a 320px) */
    #grid ul.products li.product img,
    #grid ul.products li.product .product-thumbnail,
    #grid ul.products li.product h3 {
        max-width: 100%;
        height: auto;
    }
    #grid ul.products li.product .btn {
        max-width: 100%;
        white-space: normal;
    }
    /* Separador vertical de la plantilla: ocultarlo entre las 2 columnas */
    #grid ul.products li.product::after {
        display: none !important;
    }

    /* --- Compactar la ficha en móvil (evita que el texto ocupe el doble que la foto) ---
       Las columnas internas 7/5 quedan minúsculas a 155px y apilan el texto en
       muchas líneas. Se apilan a ancho completo y se reduce line-height/márgenes. */
    #grid ul.products li.product .row > .col-xs-7,
    #grid ul.products li.product .row > .col-xs-5 {
        width: 100% !important;
        float: none !important;
        text-align: center;
    }
    #grid ul.products li.product p {
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
    }
    #grid ul.products li.product h3 {
        line-height: 1.25 !important;
        margin: 0 0 6px !important;
    }
    /* Botón "Agregar" a ancho completo y altura táctil, ya sin columna estrecha */
    #grid ul.products li.product .col-xs-5 .btn.spec {
        width: 100%;
        margin-top: 4px;
    }

    /* Reducir aún más el alto del texto en la grilla móvil:
       - Nombre a máx 2 líneas con elipsis
       - Ocultar info secundaria que igual está en el detalle (Tamaño, "IVA Incl.") */
    #grid ul.products li.product h3 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #grid ul.products li.product .col-xs-12 {
        display: none; /* "Tamaño: ..." (visible en el detalle) */
    }
    #grid ul.products li.product .col-xs-7 font {
        display: none; /* "IVA Incl." (visible en el detalle) */
    }
    /* Ocultar COD y Packing SOLO en la grilla móvil (ambos están en el detalle).
       Se clasificaron en producto_listado.js como .prod-cod / .prod-packing. */
    #grid ul.products li.product .prod-cod,
    #grid ul.products li.product .prod-packing {
        display: none !important;
    }
    /* "Últimas X unidades" / "Disponibilidad": texto más chico y compacto en móvil */
    #grid ul.products li.product .prod-ultimas {
        margin: 2px 0 !important;
    }
    #grid ul.products li.product .prod-ultimas b {
        font-size: 11px !important;
    }

    /* --- Afinado visual en móvil: nombre más chico, foto protagonista, botón solo ícono --- */
    /* Nombre del producto más pequeño */
    #grid ul.products li.product h3 {
        font-size: 12px !important;
    }
    /* Foto a ancho completo y sin márgenes → más grande respecto al texto */
    #grid ul.products li.product .product-thumbnail {
        margin: 0 auto !important;
    }
    #grid ul.products li.product .product-thumbnail img,
    #grid ul.products li.product [id^="myImage"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    /* Botón "Agregar": dejar solo el ícono del carrito (más limpio) */
    #grid ul.products li.product .btn.spec .btn-text {
        display: none;
    }
    #grid ul.products li.product .btn.spec {
        padding: 10px 8px;
    }
    #grid ul.products li.product .btn.spec .fa {
        font-size: 18px;
        margin: 0;
    }
}

/* =====================================================================
   14) ENCABEZADO MÓVIL — top-bar y navbar compactos (≤767px)
   Logo a la izquierda; íconos de idioma (mundo) y cliente arriba a la
   derecha al nivel del logo; los idiomas se despliegan al tocar el mundo;
   navegación en una fila (Categorías izq · Instagram der), Saldos oculto;
   búsqueda más chica. Solo móvil; escritorio intacto.
   ===================================================================== */
/* Los íconos de acciones móviles no existen en escritorio */
#topbar-movil-acciones { display: none; }

/* El <select> de subfamilias y su etiqueta solo se usan en móvil (en escritorio van los enlaces) */
.subfamilia-select-movil,
.subfamilia-label-movil { display: none; }

@media (max-width: 767px) {
    /* --- TOP-BAR --- */
    .top-bar {
        position: relative;
        padding: 12px 0 6px;
        overflow: visible;
    }
    .top-bar .container,
    .top-bar .row { margin: 0; }

    /* Logo apegado a la izquierda (la plantilla lo pone absolute en móvil) */
    .top-bar .col-md-3 { padding: 0; }
    .top-bar .header-logo {
        position: static !important;
        float: none !important;
        width: auto !important;
        text-align: left;
        margin: 0 0 2px 8px !important;
    }
    .top-bar .header-logo img {
        max-height: 40px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
    }

    /* Íconos mundo (idioma) + cliente, arriba a la derecha, al nivel del logo */
    #topbar-movil-acciones {
        display: block;
        position: absolute;
        top: 6px;
        right: 10px;
        z-index: 5;
        white-space: nowrap;
    }
    #topbar-movil-acciones a {
        display: inline-block;
        color: #fff;
        font-size: 20px;
        padding: 6px 7px;
        line-height: 1;
        vertical-align: middle;
    }

    /* Idiomas: el panel (ul) es lo que se muestra al tocar el mundo. #Linea1 se
       mantiene con altura 0 (aunque el toggle le añada la clase) para que al
       abrir NO empuje la línea separadora / el navbar hacia abajo. */
    .top-bar #Linea1 {
        display: block;
        height: 0;
        overflow: visible;
        clear: both;
    }
    .top-bar #Linea1 .col-md-12 {
        padding: 0;
        height: 0;
        overflow: visible;
    }
    /* Ancestros en static para que el panel se posicione respecto al .top-bar
       (si no, referenciaba col-md-9/12 y aparecía muy abajo, sobre la canasta) */
    .top-bar .col-md-9,
    .top-bar #Linea1,
    .top-bar #Linea1 .col-md-12 { position: static !important; }
    /* El panel desplegable es el <ul> (crece con los idiomas). Fondo BLANCO para
       distinguirse del encabezado naranja, y z-index alto para quedar por encima
       de la canasta/precio. */
    .top-bar #Linea1.idioma-movil-abierto #menu-top-bar-right {
        display: block;
        position: absolute;
        top: 42px;
        right: 8px;
        left: auto;
        z-index: 1080;
        background: #ffffff;
        padding: 4px 0;
        border: 1px solid #d8d8d8;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    }
    /* Menú oculto hasta que se abre (así #Linea1 no muestra nada en su altura 0) */
    .top-bar #menu-top-bar-right {
        float: none !important;
        display: none;
        margin: 0 !important;
        padding: 0;
        text-align: left !important;
    }
    .top-bar #menu-top-bar-right > li {
        float: none !important;
        display: block;
        margin: 0;
    }
    #menu-top-bar-right .lang-link {
        display: block;
        padding: 9px 18px;
        font-size: 14px;
        white-space: nowrap;
        text-align: left;
    }
    /* Texto oscuro en el panel (en el header los idiomas son blancos) */
    .top-bar #Linea1.idioma-movil-abierto .lang-link {
        color: #333 !important;
    }
    .top-bar #Linea1.idioma-movil-abierto .lang-link.lang-activo {
        color: #e63001 !important;
    }

    /* Ocultar en móvil: barra de contacto y el login viejo (se usa el ícono cliente) */
    .top-bar #Linea2,
    .top-bar #Linea3 { display: none !important; }

    /* --- NAVBAR --- */
    .navbar-full .container { margin: 0; }
    /* El row en flex: navegación en su fila; búsqueda y carro comparten la siguiente */
    .navbar-full .row {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Navegación en una fila propia: Categorías/Productos izquierda, Instagram derecha */
    .navbar-full .departments-menu {
        display: flex;
        align-items: center;
        float: none !important;
        flex: 0 0 100%;
        width: 100%;
        margin: 2px 0;
        padding: 0 8px;
    }
    .navbar-full .departments-menu > li {
        float: none !important;
        width: auto !important;
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0 12px 0 0 !important;
    }
    /* Font más chico en Categorías/Productos; y forzar visible el texto de
       "Productos" (la plantilla ocultaba el label con display:none) */
    .navbar-full .departments-menu .nav-link {
        font-size: 12px !important;
        padding: 6px 4px !important;
    }
    .navbar-full .departments-menu .idiomalink,
    .navbar-full .departments-menu label {
        font-size: 12px !important;
        display: inline-block !important;
    }
    /* Saldos oculto en móvil */
    .navbar-full .departments-menu .nav-saldos { display: none !important; }
    /* Instagram visible y empujado a la derecha (mismo nivel que Categorías) */
    .navbar-full .departments-menu #insta-responsive { display: inline-block !important; }
    .navbar-full .departments-menu > li:last-child {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Buscador: ocupa el espacio disponible en su fila (a la izquierda del carro) */
    .navbar-full .navbar-search {
        float: none !important;
        clear: none;
        flex: 1 1 auto;
        width: auto;
        margin: 4px 0;
        padding: 0 4px 0 8px;
    }
    .navbar-full .navbar-search .input-group { width: 100%; }
    .navbar-full .navbar-search .form-control {
        height: 34px;
        padding: 4px 10px;
        font-size: 14px;
    }
    /* Botón de la lupa a la MISMA altura que el input (antes quedaba más alto) */
    .navbar-full .navbar-search .input-group-btn .btn,
    .navbar-full .navbar-search .btn {
        height: 34px;
        padding: 0 14px;
        line-height: 34px;
    }

    /* Mini-carrito en la MISMA fila que la búsqueda, a la derecha */
    .navbar-full .navbar-mini-cart {
        float: none !important;
        clear: none;
        flex: 0 0 auto;
        width: auto;
        margin: 4px 8px 4px 0 !important;
        text-align: right;
        white-space: nowrap;
    }
    .navbar-full .navbar-mini-cart .nav-item.dropdown {
        display: inline-block;
        float: none;
    }
    /* Ocultar la palabra "Carro": queda ícono + contador + monto */
    .navbar-full .navbar-mini-cart #lblCarro { display: none !important; }
}

/* =====================================================================
   15) LISTA DE PRODUCTOS — barra de control y paginación en móvil (≤767px)
   Dejar solo el select de orden; ocultar "Mostrando", el select "Todos"
   (rango de precios), los tabs grilla/lista y la paginación superior;
   achicar los números de la paginación inferior.
   ===================================================================== */
@media (max-width: 767px) {
    /* "Mostrando X de Y" fuera */
    #paginacion_mostrando { display: none !important; }

    /* En la barra de control dejar SOLO el select de orden */
    .shop-control-bar .shop-view-switcher,
    .shop-control-bar #buscar_precio,
    .shop-control-bar .electro-advanced-pagination {
        display: none !important;
    }
    .shop-control-bar {
        text-align: center;
    }
    .shop-control-bar .woocommerce-ordering {
        float: none !important;
        width: 100%;
        margin: 0;
    }
    .shop-control-bar #ordenar_por {
        width: 100%;
        max-width: 100%;
        height: 36px;
    }

    /* Paginación inferior: números más pequeños, acordes a móvil */
    .woocommerce-pagination { text-align: center; }
    .woocommerce-pagination ul.page-numbers {
        padding-left: 0;
    }
    .woocommerce-pagination a.page-numbers,
    .woocommerce-pagination span.page-numbers,
    .woocommerce-pagination ul.page-numbers li a,
    .woocommerce-pagination ul.page-numbers li span {
        font-size: 12px !important;
        min-width: 28px !important;
        width: auto !important;
        height: 28px !important;
        line-height: 28px !important;
        padding: 0 6px !important;
        margin: 2px !important;
    }

    /* Ocultar el título de página (familia) en móvil: es redundante con el
       breadcrumb (Home › Productos › familia). Se mantiene la subfamilia.
       El contenedor pasa a block para que el <label> espaciador de 50px
       no deje un hueco. */
    .page-header .page-title { display: none !important; }
    .page-header .col-md-12 { display: block !important; }
    /* Subfamilias en móvil: ocultar los enlaces (con muchas subfamilias ocupan
       demasiado alto) y mostrar el <select> generado por producto_listado.js */
    #title-subfamilia-nombre a { display: none !important; }
    /* Etiqueta que indica que el select es la lista de sub-categorías */
    #title-subfamilia-nombre .subfamilia-label-movil {
        display: block !important;
        font-size: 13px;
        font-weight: bold;
        margin: 6px 0 2px;
        color: #333;
    }
    #title-subfamilia-nombre .subfamilia-select-movil {
        display: block !important;
        width: 100%;
        max-width: 100%;
        height: 36px;
        margin: 0 0 6px;
        font-size: 14px;
    }
}

/* =====================================================================
   16) MODALES DE LOGIN — más compactos en móvil (≤767px)
   El modal de "Iniciar Sesión" (cliente y vendedor) se veía muy grande:
   título, inputs, botones y textos. Se reducen para que quepan mejor.
   ===================================================================== */
@media (max-width: 767px) {
    #myModalClienteLogin .modal-title,
    #myModalVendedorLogin .modal-title {
        font-size: 18px;
    }
    #myModalClienteLogin .modal-header,
    #myModalVendedorLogin .modal-header {
        padding: 10px 15px;
    }
    #myModalClienteLogin .modal-body,
    #myModalVendedorLogin .modal-body {
        padding: 12px 15px;
    }
    #myModalClienteLogin .modal-footer,
    #myModalVendedorLogin .modal-footer {
        padding: 8px 12px;
    }
    /* Inputs más bajos (mantienen 16px para no disparar el zoom de iOS) */
    #myModalClienteLogin .form-control,
    #myModalVendedorLogin .form-control {
        height: 40px;
        padding: 6px 10px;
    }
    /* Textos de ayuda / labels más chicos */
    #myModalClienteLogin .modal-body label,
    #myModalVendedorLogin .modal-body label {
        font-size: 12px;
        line-height: 1.35;
    }
    /* Botones inferiores más compactos (anula el min-height táctil de .btn-sm) */
    #myModalClienteLogin .modal-footer .btn,
    #myModalVendedorLogin .modal-footer .btn {
        min-height: 0 !important;
        padding: 7px 10px !important;
        font-size: 12px;
        margin: 2px;
    }
    /* Los 3 botones de login: que no se amontonen ni desborden */
    #ulBotonesLogin,
    #ulBotonesLoginV {
        padding-left: 0;
        margin: 0;
        list-style: none;
    }
    #ulBotonesLogin li,
    #ulBotonesLoginV li {
        display: block;
    }
}