/* =====================================================================
   fesv-responsive.css — Capa responsive global (Fase 1)
   ---------------------------------------------------------------------
   Este archivo se carga AL FINAL de la cadena de CSS (ver Pages/_Layout.cshtml)
   para ganar por orden de cascada sobre bootstrap.min.css, site.css,
   fesv-theme.css y FESv.Web.styles.css (CSS aislado de componentes).

   REGLA DE ORO: TODO lo que hay aquí vive dentro de una @media query.
   En escritorio (>= 992px) este archivo no debe cambiar absolutamente nada.

   Breakpoints usados (los de Bootstrap 5):
     <  576px   móvil chico / teléfono en vertical (360-430px reales)
     <  768px   teléfono grande
     <  992px   tablet vertical y todo lo de abajo
   ===================================================================== */


/* =====================================================================
   1. RED DE SEGURIDAD PARA TABLAS
   ---------------------------------------------------------------------
   Problema: 149 archivos .razor tienen <table> y solo 54 la envuelven en
   .table-responsive. Las 95 restantes desbordan el ancho del body y
   arrastran scroll horizontal a TODA la página (el usuario mueve la
   pantalla entera en vez de la tabla).

   Solución: en tablet/móvil convertimos la tabla en su propio contenedor
   con scroll horizontal. `display:block` sobre <table> hace que el ancho
   deje de propagarse al layout; `overflow-x:auto` le da su propia barra.

   Escape hatch: agregá class="table-no-scroll" a una tabla que ya esté
   resuelta por su pantalla (p.ej. tablas que colapsan a tarjetas) y esta
   regla la ignora. Las tablas ya envueltas en .table-responsive quedan
   excluidas porque Bootstrap ya les da el scroll del contenedor.
   ===================================================================== */
@media (max-width: 991.98px) {
    main table:not(.table-no-scroll),
    .card-body > table:not(.table-no-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }

    /* La tabla ya envuelta por Bootstrap no necesita el hack: dejarla
       como table normal evita doble scroll y anchos raros. */
    .table-responsive > table {
        display: table;
        white-space: normal;
    }

    /* Ninguna pantalla debe generar scroll horizontal del documento.
       NOTA: a propósito NO usamos `overflow-x: hidden` en html/body —
       eso rompe `position: sticky` (topbar) y el offcanvas del sidebar.
       Limitamos el ancho y dejamos que el fix de tablas haga el trabajo. */
    body {
        max-width: 100%;
    }
}


/* =====================================================================
   2. TARGETS TÁCTILES
   ---------------------------------------------------------------------
   Problema: todo el proyecto usa form-control-sm / btn-sm (63 usos en
   Facturacion, 111 en Compras, 91 en ArticuloEditor). Eso da controles de
   ~24-28px de alto, muy por debajo del mínimo táctil recomendado (44px).
   En un teléfono son casi imposibles de acertar con el pulgar.

   Solución: en <992px las variantes -sm recuperan tamaño usable. En
   escritorio siguen siendo compactas (la densidad ahí es deseable).
   Bonus: font-size 1rem en los inputs evita el auto-zoom de iOS Safari,
   que hace zoom cuando el input tiene menos de 16px.
   ===================================================================== */
@media (max-width: 991.98px) {
    .form-control-sm,
    .form-select-sm {
        min-height: 42px;
        font-size: 1rem !important;
        padding: .4rem .55rem !important;
    }

    .btn-sm {
        min-height: 40px;
        padding: .4rem .7rem;
    }

    .btn-group-sm > .btn {
        min-height: 40px;
        min-width: 40px;
    }

    /* Checkboxes y radios: el default de Bootstrap es 1rem — imposible
       de tocar con precisión en pantallas de selección masiva. */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Botones de solo icono dentro de celdas de tabla: darles aire. */
    .input-group-sm > .btn,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        min-height: 42px;
    }
}


/* =====================================================================
   3. TIPOGRAFÍA Y DENSIDAD
   ---------------------------------------------------------------------
   Problema: hay tablas con class="small" sobre .table-sm que terminan en
   ~12px — ilegibles en un teléfono. Y el padding de .table-sm (.3rem)
   pega las filas entre sí, lo que hace difícil acertar un enlace.

   Solución: base de 15px (en vez de 16) para que quepa un poco más de
   contenido sin perder legibilidad, filas más altas y un piso de tamaño
   para .small / <small>.
   ===================================================================== */
@media (max-width: 767.98px) {
    html {
        font-size: 15px;
    }

    .table-sm > tbody > tr > td,
    .table-sm > thead > tr > th {
        padding: .55rem .4rem;
    }

    .small, small {
        font-size: .85rem;
    }

    /* Títulos de página: los h1/h2 del escritorio comen pantalla. */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }

    /* Cards y contenedores: recuperar ancho útil. El padding de
       escritorio (1rem+) deja muy poco espacio para el contenido. */
    .card-body {
        padding: .75rem;
    }

    .container, .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}


/* =====================================================================
   4. MODALES A PANTALLA COMPLETA EN MÓVIL
   ---------------------------------------------------------------------
   Problema: un modal centrado en un teléfono de 360px queda con márgenes
   laterales y un formulario apretado en el centro. Bootstrap tiene
   .modal-fullscreen-sm-down pero hay que ponerlo modal por modal.

   Solución: red de seguridad — en <576px TODO modal va a pantalla
   completa. Escape hatch: .modal-keep-size para confirmaciones cortas
   (ConfirmDialog) donde el fullscreen sería exagerado.
   ===================================================================== */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-keep-size) {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

    .modal-dialog:not(.modal-keep-size) .modal-content {
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    /* El cuerpo del modal scrollea; header y footer quedan fijos. */
    .modal-dialog:not(.modal-keep-size) .modal-body {
        overflow-y: auto;
    }
}


/* =====================================================================
   5. prefers-reduced-motion
   ---------------------------------------------------------------------
   Accesibilidad: usuarios con sensibilidad vestibular (y quien haya
   activado "reducir movimiento" en el SO) no deben sufrir transiciones,
   spinners animados ni deslizamientos de offcanvas.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   6. UTILIDADES DE AYUDA
   ---------------------------------------------------------------------
   Piezas reutilizables para que las pantallas que se vayan adaptando no
   inventen cada una su propio CSS.
   ===================================================================== */

/* --- .fesv-sticky-actions -------------------------------------------
   Barra de acciones fija al pie de la pantalla (Guardar / Cancelar).
   En un formulario largo en móvil, el botón Guardar queda a 3 pantallas
   de scroll; esto lo mantiene siempre al alcance del pulgar.

   Uso:
     <div class="... has-sticky-actions"> ...formulario... </div>
     <div class="fesv-sticky-actions d-lg-none"> <button/> </div>

   La clase .has-sticky-actions va en el CONTENEDOR del contenido para
   que las últimas filas no queden tapadas por la barra.
   Solo aplica en <992px: en escritorio los botones van en su lugar normal.
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fesv-sticky-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        padding: .6rem;
        display: flex;
        gap: .5rem;
        background: var(--bs-body-bg, #fff);
        border-top: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
        /* Respetar la barra de gestos de iOS / Android. */
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    }

    .fesv-sticky-actions > .btn {
        flex: 1 1 auto;
    }

    .has-sticky-actions {
        padding-bottom: 80px;
    }
}

/* --- .fesv-touch-target ---------------------------------------------
   Fuerza el mínimo táctil de 44x44px en cualquier elemento clickeable
   que se haya quedado chico (iconos sueltos, enlaces de tabla, etc.).
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fesv-touch-target {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- .fesv-mobile-only / .fesv-desktop-only -------------------------
   Equivalentes a d-lg-none / d-none d-lg-block, pero sin forzar un
   display concreto: el elemento conserva el suyo (flex, grid, table-row…)
   cuando es visible. Útil donde d-*-block rompe el layout.
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fesv-desktop-only { display: none !important; }
}

@media (min-width: 992px) {
    .fesv-mobile-only { display: none !important; }
}


/* =====================================================================
   7. AJUSTES VARIOS DE LAYOUT EN MÓVIL
   ---------------------------------------------------------------------
   Piezas comunes de Bootstrap que en pantallas angostas se comportan mal.
   ===================================================================== */
@media (max-width: 767.98px) {
    /* Dropdowns que se salen por el borde derecho de la pantalla. */
    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }

    /* Botones sueltos que quedan pegados al hacer wrap. */
    .btn-toolbar > .btn,
    .btn-toolbar > .btn-group {
        margin-bottom: .35rem;
    }

    /* Grupos de input que no caben: permitir que bajen de línea. */
    .input-group.flex-wrap-mobile {
        flex-wrap: wrap;
    }

    /* Imágenes y media embebida nunca desbordan. */
    img, svg, canvas, video {
        max-width: 100%;
    }
}


/* =====================================================================
   Cifras tabulares — usada en cards y tablas para que los montos
   alineen verticalmente (los dígitos ocupan el mismo ancho).
   Se aplica en todos los breakpoints, no solo móvil.
   ===================================================================== */
.tabular-nums,
.sg-card .fw-bold,
.fesv-sticky-actions .total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}