/* =====================================================================
   responsive.css — Global B2B  (ver PLAN_RESPONSIVE.md)
   CSS ADITIVO cargado en ÚLTIMO lugar por los masters.
   Regla de oro: en escritorio (>=1024px) NO cambia NI UN PÍXEL — todo
   lo que afecte al layout va dentro de media queries max-width.
   Breakpoints estándar del plan: 480 / 768 / 1024 / 1280.
   Prohibido device-width. Creado 2026-06-11 (Fase 0).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Patrón "scroll" (el único patrón de tablas del plan): aplicar esta
   clase al CONTENEDOR de una tabla/listado ancho. La tabla se ve igual;
   si no cabe, se desliza con el dedo dentro de su recuadro en vez de
   romper la página. En escritorio el contenido cabe y no actúa.
   --------------------------------------------------------------------- */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* GridView "Artículos más pedidos" (ListadoArticulosPendientes, en ZonaClientes):
   su contenedor .scrollGridListadoPendientes no tenía overflow y el grid de
   ~14 columnas (~958px naturales) rompía la página entera en <1024px
   (+353px a 768, +623px a 375 — medido 2026-06-11). Igual que .overflowador,
   va a nivel raíz: cuando el grid cabe (escritorio) no hace nada. */
.scrollGridListadoPendientes {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   F5 — Entrada/Proveedores (Principal.Master). El master llevaba
   style="min-width: 816px!important" inline en su .container (imposible
   de vencer desde CSS): se retiró del markup y se recrea AQUÍ solo para
   escritorio, manteniendo el comportamiento ≥1024px literalmente igual
   (en la práctica es no-op: el .container de Bootstrap ya mide ≥970px).
   Por debajo de 1024px el contenedor pasa a ser fluido (objetivo tablet).
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .container_entrada {
        min-width: 816px;
    }
}

/* ============================= TABLET ============================== */
@media (max-width: 1023px) {

    /* Regla pensada para Audiovisuales.aspx, pero SIN EFECTO real hoy
       (descubierto 2026-06-12): esa página es HTML estático guardado que
       carga el set CSS viejo de CSS\ raíz y NO carga responsive.css, así
       que su desborde de 15px (márgenes -15 de .row sin .container, y sin
       viewport meta) sigue ahí — fuera del plan por ser página sin master.
       Se conserva por si alguna página con responsive.css usara
       .row.row_cabecera en el futuro; el header de la tienda usa
       "row_cabecera stuck-header" SIN .row → no le afecta. */
    .row.row_cabecera {
        margin-left: 0;
        margin-right: 0;
    }

}

/* ====================== MÓVIL GRANDE / TABLET V ===================== */
@media (max-width: 767px) {

    /* iOS Safari hace auto-zoom al enfocar inputs con fuente < 16px;
       con 16px el foco no altera el encuadre de la página. */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    /* --- F1.3: carrito desplegable (#carrito_desplegable, CabeceraPedido) ---
       Hoy mide 350px y cabe en 375 (auditado 2026-06-12 con carro vacío),
       pero su ancho es fijo y el panel de totales crece con IVA/descuentos/
       portes: tope defensivo al viewport y scroll vertical interno para
       carros con muchos conceptos. En escritorio no actúa (media query). */
    #carrito_desplegable {
        max-width: 100vw;
    }

    #carrito_desplegable .resumen_totales {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- ZonaClientes / ZonaRepresentantes: zonas con menú lateral ---
       Las columnas Bootstrap (col-xs-3 menú + col-xs-9 contenido) aplastan
       el menú a ~94px en un móvil de 375px y el texto se rompe letra a
       letra. En <768px se apilan: menú arriba a todo el ancho, contenido
       debajo. El toggle existente (#boton_menu) sigue funcionando: la
       clase .esquerra ya colapsa el menú (height:1px) y .col_esq pone el
       contenido al 100%. Las pseudo-tablas interiores ya se deslizan solas
       gracias al .overflowador heredado (min-width 768 + overflow-x auto). */
    .menu_lateral {
        width: 100%;
    }

    .datos_pedidos {
        width: 100%;
    }

    /* F3.2-fix (2026-06-16, hallazgo en móvil real): el menú de sección es
       #menu_lateral (ID) con position:sticky; top:7.83rem, y su botón toggle
       .contenedor_menu_boton también sticky (top:6.7rem). Apilados en móvil,
       SEGUÍAN al hacer scroll (usuario: "modificar contraseña y documentos me
       siguen al bajar" / "las tres rayas se quedan flotando, duplicadas"). En
       <768px ambos pasan a static → el menú se queda arriba y scrollea con la
       página, sin solaparse con el contenido. Selector por ID para vencer la
       especificidad de #menu_lateral (la clase .menu_lateral no la vencía).
       En >=768px NO cambia: el sidebar sigue sticky como en escritorio. */
    #menu_lateral {
        position: static;
        top: auto;
    }

    .contenedor_menu_boton {
        position: static;
        top: auto;
    }

    /* ===== Fixes móvil real (iPhone 12 Pro, feedback usuario 2026-06-22) ===== */

    /* (issue 2, REVISADO 2026-06-22 según usuario) Toggle de sección en
       ZonaClientes. Había DOS ☰: el del master (#contenedor_menu_boton, fa-bars,
       en .stuck-header, justo a la altura de la hamburguesa de Inicio) y el de
       ZonaClientes.aspx (SIN id, fa-align, en el contenido, que se MEZCLABA con
       el item "Estadísticas"). El usuario quiere: el abrir/cerrar arriba (en la
       posición de Inicio) y el menú con cada sección y SU icono (Estadísticas ya
       tiene fa-chart-simple). Por eso ocultamos el del .aspx (el que NO tiene id)
       y dejamos el del master arriba. Scoped a .ZonaClientes → no afecta a otras.
       (Antes se ocultaba el del master por error; corregido.) */
    .ZonaClientes .contenedor_menu_boton:not([id]) {
        display: none !important;
    }

    /* (issue 2, cont.) El toggle .aspx ocultado hacía de espaciador en el flujo;
       sin él, el menú #menu_lateral sube y su 1er item (ESTADÍSTICAS) queda
       TAPADO bajo la cabecera, que en móvil es position:fixed (159px, z-index
       5000). Le damos margin-top para que el menú —y por tanto su contenido—
       arranque bajo la cabecera y ESTADÍSTICAS se vea con su icono fa-chart-simple
       junto al resto de secciones. Solo .ZonaClientes <768. */
    .ZonaClientes #menu_lateral {
        margin-top: 2.5rem;
    }

    /* (issue 1) "Artículos Pendientes" (ListadoArticulosPendientes, GridView ~14
       columnas): las celdas llevan clases Bootstrap col-xs-* (float + width %)
       que en móvil aplastan las columnas hasta partir el texto letra a letra
       ("Destino" -> D/e/s/t/i/n/o). El contenedor .scrollGridListadoPendientes ya
       tiene overflow-x:auto, pero la tabla se comprimía en vez de deslizarse.
       Le damos min-width y dejamos que las celdas tomen su ancho natural sin
       partir → la tabla mantiene ancho legible y SCROLLEA dentro del recuadro
       (Regla #6). Solo la tabla del grid (.border_table), no tablas anidadas. */
    .scrollGridListadoPendientes table.border_table {
        min-width: 760px;
    }
    .scrollGridListadoPendientes table.border_table td,
    .scrollGridListadoPendientes table.border_table th {
        float: none;
        width: auto;
        white-space: nowrap;
    }

    /* F4-fix (2026-06-16, hallazgo en móvil real): las tablas-resumen del
       perfil del cliente (ESTADÍSTICAS/Id=1: .facturas_Rep, .albaranes_Rep,
       pedidos sin confirmar/confirmados, .datos_carritos_pendientes) se
       comprimían al min-width:768px que el .overflowador les da (PrincipalTablet
       L755). A 768px columnas como Factura ("02-2201080") o Fecha ("22/10/2024")
       PARTÍAN en dos líneas (corte por el guion/barra) y descuadraban las filas
       (usuario: "la factura se descuadra y la fecha", "con la longitud se rompen
       las cosas", "en albaranes se rompen los pedidos"). En escritorio esa misma
       tabla mide ~1100px y NO parte. Les subimos el min-width en <768 para que las
       columnas tengan el aire de escritorio; la tabla sigue deslizándose dentro
       del .overflowador (Regla #6: se ve igual, hace scroll). >=768px intacto.
       Mismo nº de clases que la regla original (.overflowador .X) + carga
       posterior → la vence sin !important. */
    .overflowador .facturas_Rep,
    .overflowador .albaranes_Rep,
    .overflowador .pedidos_sin_confirmar_Rep,
    .overflowador .pedidos_confirmados_Rep,
    .overflowador .pedidos_confirmados_Rep_EST,
    .overflowador .datos_carritos_pendientes {
        min-width: 1024px;
    }

    /* (issue 3, 2026-06-22) FACTURAS en iPhone real (Safari): (a) las columnas no
       cuadraban porque la cabecera (.pedidos_pendientes) y cada fila de datos
       (.divs_panel_facturas) son display:table SEPARADAS con % que NO suman 100%
       → con table-layout:auto Safari dimensiona cada tabla por su contenido y
       desalinea; width:100% + table-layout:fixed aplica los % literales e
       idénticos y las cuadra. (b) la columna "Factura" (7%) se quedaba corta y la
       ID (p.ej. 02-22010080) SE SALÍA de su celda → subimos el min-width de
       facturas a 1366px (7% ≈ 95px) para que la ID quepa. Solo <768. */
    .overflowador .facturas_Rep {
        min-width: 1366px;
    }
    .overflowador .facturas_Rep .pedidos_pendientes,
    .overflowador .facturas_Rep .divs_panel_facturas {
        width: 100%;
        table-layout: fixed;
    }

    /* F3.2-fix (2026-06-16, repaso profundo): en "Modificar Contraseña" (Id=2)
       el login es un email largo sin espacios (p.ej. jjperez@harperandneyer.com)
       con word-break:normal → no partía y a 360px empujaba el ancho 9px (scroll
       horizontal). Que pueda partir si no cabe; a >=390px sigue en una línea.
       (También beneficia al "Cambiar contraseña" del representante, +3px.) */
    .modificar_psw .span_div_contraseña,
    .modificar_psw [id$='lblLogin'] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* --- F5: columnas de menú de las herramientas internas ---
       Entrada/Proveedores (menú "Entradas|Ventas", col-xs-2 ≈ 63px en un
       móvil) y backoffice Admin (col-xs-4 menú + col-xs-8 contenido):
       en <768px se apilan a todo el ancho, contenido debajo. */
    .container_entrada .columna_izquierda,
    .container_backoffice .columna_izquierda,
    .container_backoffice .columna_derecha {
        width: 100%;
    }

    /* --- F5: tablas de filtros/edición de las herramientas internas ---
       En Entrada/Proveedores (cabeceras th col-xs-1 con "Fecha Desde" etc.)
       y en el backoffice (Traducciones: inputs de 227px) desbordaban hasta
       +100px en móvil. Patrón scroll genérico. El menú del backoffice
       (asp:Menu, también <table>) NO entra: vive en .columna_izquierda. */
    .container_entrada table,
    .container_backoffice .columna_derecha table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

}

/* ============================ MÓVIL PEQUEÑO ========================= */
@media (max-width: 479px) {

    /* (reservado) */

}

/* ====================================================================
   responsive.txt #1 — Modal de confirmación al BORRAR artículo del carrito
   (2026-06-23). El diálogo Sí/No es el modal Bootstrap compartido #mymodal
   (Principal/CabeceraPedido.Master), poblado por showModal() en
   Javascript/custom/General.js: #btnOK = "Sí", #btnCancel = "No".
   En móvil los dos botones del .modal-footer quedaban mal colocados / poco
   claros. Ajuste SOLO móvil y SOLO a #mymodal (no afecta a los modales de
   facturas/emails ni a escritorio: todo va dentro de max-width). Reversible:
   borrar este bloque restaura el comportamiento anterior. */
@media (max-width: 767px) {

    #mymodal .modal-dialog {
        margin: 12px auto;
        max-width: 94vw;
    }

    #mymodal .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 10px;
    }

    #mymodal .modal-footer .btn {
        flex: 1 1 40%;
        min-width: 120px;
        margin: 0;
    }
}

/* ====================================================================
   responsive.txt #2 — Listado de artículos (ListadoArticulos.aspx,
   contenedor .contenedor_productos.cp9) en TABLET/iPad (768–1024px).
   Las tarjetas son columnas Bootstrap (col-sm-6 / col-md-4) SIN un .row
   contenedor (y además quedan "foster-parented" fuera de un <table>
   inválido). Con float, en iPad caben 2–3 por fila y, al tener alturas
   desiguales, se ENGANCHAN entre sí y la rejilla se rompe. En iPhone
   (col-xs-12 = 1 por fila) no ocurre, por eso solo falla en iPad.
   Solución: pasar SOLO .cp9 a flex-wrap en la banda tablet; las mismas
   columnas Bootstrap (50% / 33%) se reparten en rejilla limpia sin
   engancharse. Escritorio (>1024) y móvil (<768, ya correcto) intactos.
   El <table> vacío (#ProductsTable) queda como ítem flex de tamaño ~0 al
   final, sin afectar. Reversible: borrar este bloque. 2026-06-23. */
@media (min-width: 768px) and (max-width: 1024px) {

    .contenedor_productos.cp9 {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        float: none;
    }

    .contenedor_productos.cp9 .producto_individual {
        float: none;
    }
}

/* ====================================================================
   responsive.txt #2 (cont.) — iPad Air / Pro EN HORIZONTAL.
   El iPad Air moderno mide 1180px en horizontal (11" M2: 820×1180;
   13" M2: 1024×1366; Air 3: 834×1112), por encima del tope 1024 del
   bloque anterior, así que en horizontal volvía a la rejilla flotante
   de escritorio y se rompía igual. Aplicamos el mismo flex-wrap en la
   banda 1025–1366px PERO solo en dispositivos táctiles
   (any-pointer: coarse) → un PC/portátil con ratón a esos anchos NO se
   toca (se respeta "escritorio ni un píxel"; el iPad sí es táctil).
   2026-06-23. */
@media (min-width: 1025px) and (max-width: 1366px) and (any-pointer: coarse) {

    .contenedor_productos.cp9 {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        float: none;
    }

    .contenedor_productos.cp9 .producto_individual {
        float: none;
    }
}