/* ════════════════════════════════════════════════════════════════════════
   mobile.css — capa transversal de responsividad para teléfono (≤768px)
   ════════════════════════════════════════════════════════════════════════
   POR QUÉ EXISTE
   Los estilos de cada página viven en bloques <style> DENTRO del .razor, que
   Blazor inyecta en el <body> — es decir, DESPUÉS de cualquier hoja del <head>.
   Con igual especificidad gana el que va último, así que una hoja del <head> no
   puede corregirlos. Auditando las 103 páginas aparecieron los mismos patrones
   una y otra vez (51 grids de columnas fijas, 17 archivos con tablas sin scroll,
   modales sin alto máximo, controles que solo aparecen con :hover). Arreglarlos
   uno por uno era inviable y frágil; esta capa los corrige de raíz.

   CÓMO GANA LA CASCADA (sin !important)
   Duplicamos la clase: `.form-grid.form-grid` tiene especificidad (0,2,0) y le
   gana a `.form-grid` (0,1,0) sin importar el orden del documento. Para
   elementos usamos `.main-content table` (0,1,1), que también le gana a
   `.tku-table` (0,1,0). Sin !important, una página puede seguir sobreescribiendo
   a propósito con más especificidad si lo necesita.

   POR QUÉ IMPORTA TANTO EL DESBORDE
   `.main-content` tiene `overflow-x: hidden` (MainLayout.razor.css): lo que se
   pasa de ancho NO se puede scrollear, se RECORTA. Cada desborde horizontal es
   funcionalidad perdida (típicamente la columna "Acciones" de una tabla), no
   sólo un problema estético.

   ALCANCE: todo está bajo `@media (max-width: 768px)` o `(pointer: coarse)`,
   así que el escritorio queda intacto.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── 1. GRIDS DE FORMULARIO ────────────────────────────────────────────
       Convención repetida en ~27 archivos: `grid-template-columns: 1fr 1fr`.
       En ~351px útiles quedan columnas de ~150px, donde no entra un input de
       teléfono ni un `<input type="date">` (iOS le da ~150px de mínimo). */
    .form-grid.form-grid,
    .field-row.field-row,
    .form-row-double.form-row-double,
    .fields-grid.fields-grid,
    .aaw-grid.aaw-grid,
    .aaw-etpl-grid.aaw-etpl-grid,
    .miam-grid.miam-grid,
    .atm-grid.atm-grid,
    .te-notify-grid.te-notify-grid,
    .tl-grid.tl-grid,
    .rubros-grid.rubros-grid,
    .em-grid.em-grid,
    .tx-form-row.tx-form-row,
    .ag-form.ag-form,
    .info-row.info-row,
    .pr-kind-picker.pr-kind-picker,
    .pr-vig-dates.pr-vig-dates,
    .rv-card.rv-card,
    .pay-stats.pay-stats {
        grid-template-columns: 1fr;
    }
    /* Con el grid ya en 1 columna, un `grid-column: span 2` crea una columna
       IMPLÍCITA y duplica el ancho del formulario (bug de EmailTemplatesPage). */
    .em-f-2.em-f-2,
    .em-f-3.em-f-3 {
        grid-column: span 1;
    }

    /* ── 2. FILAS-GRID DE EDITORES DE SCHEMA ───────────────────────────────
       Patrón `130px 1fr 110px auto auto auto auto` (7 columnas) en los editores
       de transacciones/operaciones/asociaciones: sólo los tracks fijos ya se
       comen 240px de los ~300px útiles dentro de un modal. Se apilan. */
    .ts-field-row.ts-field-row,
    .te-status-row.te-status-row,
    .opedit-sf-row.opedit-sf-row,
    .ase-extra-row.ase-extra-row,
    .schema-extra-row.schema-extra-row {
        grid-template-columns: 1fr;
    }

    /* ── 3. FILAS FLEX QUE NO ENVUELVEN ────────────────────────────────────
       Toolbars y barras de acción (`display:flex` sin `flex-wrap`) con selects
       y varios botones: el último elemento queda fuera de pantalla. Ojo que en
       varios casos ese último botón es el destructivo o el de confirmar. */
    .tx-add-item-row.tx-add-item-row,
    .ag-tools.ag-tools,
    .ag-resched.ag-resched,
    .filter-row.filter-row,
    .action-row.action-row,
    .acct-actions.acct-actions,
    .mp-actions.mp-actions,
    .page-header.page-header,
    .wiz-steps.wiz-steps,
    .hb-tabs.hb-tabs,
    .igcmt-topbar.igcmt-topbar,
    .fbcmt-topbar.fbcmt-topbar,
    .st-bulk.st-bulk,
    .product-card-footer.product-card-footer,
    .tplupd-banner.tplupd-banner,
    .info-row.info-row,
    .cred-item.cred-item,
    .pe-row.pe-row,
    .et-row.et-row,
    .tl-row.tl-row,
    .nr-head.nr-head,
    .actions.actions {
        flex-wrap: wrap;
    }
    /* La barra de acciones masivas de Stock se empuja con `margin-left:auto`;
       al envolver, ese auto la deja flotando rara. */
    .st-bulk.st-bulk { margin-left: 0; }

    /* ── 4. TABLAS ─────────────────────────────────────────────────────────
       El arreglo de mayor rendimiento de toda esta hoja. Una tabla de 7-9
       columnas dentro de `overflow-x:hidden` no scrollea: se recorta, y con ella
       la columna "Acciones" (editar/borrar) queda inalcanzable. Convertimos la
       tabla en un bloque con scroll horizontal propio, arrastrable con el dedo.

       Verificado a 375px: una tabla ancha (8 columnas) pasa a scrollear
       (contenido 744px en 349px visibles) y una tabla simple de 2 columnas con
       texto largo NO cambia — sigue envolviendo y entrando sin scroll. */
    .main-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Wrappers que ya existen pero RECORTAN (overflow:hidden, puesto sólo para
       el border-radius) en vez de dejar scrollear — caso CatalogCategories. */
    .table-wrap.table-wrap,
    .table-wrapper.table-wrapper,
    .table-container.table-container {
        overflow-x: auto;
    }

    /* ── 5. MODALES ────────────────────────────────────────────────────────
       Dos bugs distintos y ambos graves:
       (a) `min-width: 420px/460px` en un viewport de 375px → el modal se sale
           por los dos lados. OJO: `min-width` le GANA a `max-width` en CSS, así
           que hay que anularlo explícitamente.
       (b) Sin `max-height`, con el backdrop `fixed; inset:0` centrado y sin
           scroll, el contenido crece fuera del viewport y el footer (botón
           "Guardar") queda literalmente inalcanzable. */
    .modal.modal,
    .modal-box.modal-box,
    .tx-modal.tx-modal {
        min-width: 0;
        max-width: calc(100vw - 20px);
        max-height: 90dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Si el modal ya es flex-column, que scrollee el body (mantiene header y
       footer visibles, que es la mejor UX en teléfono). */
    .modal-body.modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Aire contra los bordes: varios backdrops no tienen padding y el modal
       queda pegado a la pantalla. */
    .modal-backdrop.modal-backdrop,
    .tx-modal-backdrop.tx-modal-backdrop {
        padding: 12px;
    }

    /* ── 6. POPOVERS ANCLADOS ──────────────────────────────────────────────
       Paneles `position:absolute` con `min-width` fijo montados dentro de
       columnas angostas (el selector de país del teléfono, el de íconos, el de
       emojis, el autocompletado de productos). De nuevo: `min-width` pisa a
       `max-width:100%`, así que se salen del viewport y los recorta el layout. */
    .phone-input-panel.phone-input-panel,
    .ip-panel.ip-panel,
    .emp-panel.emp-panel,
    .prod-dropdown.prod-dropdown {
        min-width: 0;
        max-width: min(92vw, 340px);
    }

    /* ── 7. TEXTO LARGO ────────────────────────────────────────────────────
       Mails, URLs, IDs y códigos monoespaciados sin punto de corte estiran el
       layout y desbordan la página entera. En los 31 archivos de negocio
       auditados `overflow-wrap` aparecía UNA sola vez. */
       ⚠️ `anywhere` vs `break-word`: NO son intercambiables. `anywhere` reduce el
       min-content del elemento a 1 carácter, así que un flex/grid item con esa
       regla puede encogerse hasta quedar en vertical (una letra por renglón).
       Pasó exactamente eso con `.ss2-connector-name` ("Mercadopago") cuando el
       selector `[class*="-name"]` lo alcanzó. Por eso los tokens realmente
       impartibles (código, URLs) usan `anywhere`, y el texto común usa
       `break-word`, que rompe sólo si de verdad no entra y NO toca el min-content. */
    .main-content code,
    .main-content .mono,
    .main-content [class*="-code"],
    .main-content .webhook-url {
        overflow-wrap: anywhere;
    }
    .main-content [class*="-email"],
    .main-content [class*="-mail"],
    .main-content [class*="-sub"] {
        overflow-wrap: break-word;
    }
    /* Textareas de instrucciones/HTML con `white-space: pre` obligan a scrollear
       en horizontal para leer un renglón. En teléfono siempre conviene wrap. */
    .main-content textarea {
        white-space: pre-wrap;
    }

    /* ── 8. IMÁGENES Y MEDIA ───────────────────────────────────────────────*/
    .main-content img,
    .main-content video,
    .main-content canvas {
        max-width: 100%;
        height: auto;
    }

    /* ── 9. PADDING DUPLICADO ──────────────────────────────────────────────
       `.main-content` ya aporta 0.75rem en móvil; varias páginas suman otro
       1–1.5rem propio y dejan el contenido en ~300px. Neutralizamos sólo el
       horizontal (el vertical no molesta). */
    .tku-page.tku-page,
    .ai-page.ai-page,
    .ar-page.ar-page,
    .cf-page.cf-page,
    .rv-page.rv-page,
    .hbc-wrap.hbc-wrap,
    .wiz-section.wiz-section,
    .stk-panel.stk-panel,
    .igcmt-body.igcmt-body,
    .fbcmt-body.fbcmt-body {
        padding-left: 0;
        padding-right: 0;
    }

    /* ── 9b. INPUTS Y SELECTS ──────────────────────────────────────────────
       Un <input> trae ~20 caracteres de ancho intrínseco, y varios declaran
       `min-width: 240px/280px`. Dentro de un grid o flex angosto eso impide que
       encojan y desborda el contenedor (el caso del editor de schema, donde dos
       tracks de 240px pedían 496px en un modal de ~290px). Con `min-width: 0`
       pueden achicarse hasta el ancho real disponible. */
    .main-content input,
    .main-content select,
    .main-content textarea {
        min-width: 0;
        max-width: 100%;
    }

    /* ── 9c. GRIDS auto-fill CON MÍNIMO MAYOR AL VIEWPORT ──────────────────
       `repeat(auto-fill, minmax(360px, 1fr))` fuerza tracks de 360px: con ~351px
       útiles, TODAS las tarjetas desbordan. (El patrón correcto sería
       `minmax(min(360px, 100%), 1fr)`.) */
    .aa-grid.aa-grid {
        grid-template-columns: 1fr;
    }

    /* ── 9d. GRÁFICOS DE BARRAS ────────────────────────────────────────────
       El gráfico de consumo dibuja una barra por día: con el rango de 90 días
       pide ~1076px y con "12 meses" ~4400px. Sin scroll propio se recorta. */
    .tku-chart.tku-chart {
        overflow-x: auto;
    }

    /* ── 9e. STEPPER DEL ONBOARDING ────────────────────────────────────────
       En móvil pasa a fila horizontal con `flex-wrap: nowrap`: 5 pasos de 38px
       + conectores + logo ≈ 450px, y `.ob-shell` los recorta con overflow. */
    .ob-sidebar.ob-sidebar {
        flex-wrap: wrap;
    }

    /* ── 10. SCROLL ANIDADO / ALTURAS DE ESCRITORIO ────────────────────────
       Paneles pensados para pantalla completa que dentro de `.main-content`
       (que YA es el contenedor de scroll) generan un segundo scroll interno o
       una pantalla en blanco de 100vh. */
    .rv-page.rv-page { height: auto; }
    .rv-timeline.rv-timeline { overflow: visible; }
    .callback-page.callback-page { min-height: 60vh; }
}

/* ── 11. AFORDANCIAS SOLO-HOVER (crítico en táctil) ────────────────────────
   Controles ocultos con `opacity: 0` que sólo se revelan con `:hover`. En un
   teléfono no existe el hover → son INALCANZABLES. Afecta al "+" para crear un
   turno en la agenda y al borrar de las tarjetas de asistente.

   Se combinan DOS condiciones a propósito: `pointer: coarse` (el caso correcto:
   dedo) y `max-width: 768px` (red de seguridad, porque hay navegadores/modos de
   emulación y equipos híbridos donde `pointer` no reporta `coarse`; con esa
   sola condición el control quedaría invisible igual). */
@media (max-width: 768px), (pointer: coarse) {
    /* Clase duplicada: `opacity` es la MISMA propiedad que declara el componente
       con la misma especificidad, así que sin esto ganaría el <style> del .razor
       por ir después en el documento. (Los tap targets de abajo no lo necesitan
       porque usan `min-width`/`min-height`, que le ganan a `width`/`height`.) */
    .ag-add.ag-add,
    .int-card-delete.int-card-delete {
        opacity: 1;
    }

    /* ── 12. TAP TARGETS ───────────────────────────────────────────────────
       Guía de accesibilidad: ~44px. Varios cierres de modal miden 28px, los
       "mini" ~20px y algunos borrar 18px: se fallan con el dedo. Subimos el
       área táctil sin tocar tipografía ni el aspecto en escritorio. */
    .modal-close,
    .btn-mini,
    .btn-xs,
    .icon-btn,
    .page-btn,
    .tx-expand-btn,
    .ints-menu-btn,
    .pm-del,
    .pg-del,
    .pg-void,
    .st-mail-x,
    .contact-del,
    .tet-act,
    .tl-act,
    .ca-x,
    .hbr-btn,
    .hbn-btn,
    .ace-del,
    .brn-x {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
