/* =====================================================================
   AvanzaPI · Ajustes para dispositivos móviles
   ---------------------------------------------------------------------
   Capa puramente de layout (sin colores) para que la app sea usable en
   pantallas pequeñas con cualquier tema (Clásico o Reskin, claro/oscuro).
   Se carga siempre, después de las hojas del reskin.

   El problema principal: el bloque de iconos del header (#navbar-buttons)
   mide ~520px y en un viewport de 390px la mitad de los accesos (home,
   avanzaSIF, menú de usuario…) quedaba cortada e inaccesible.
   ===================================================================== */

@media (max-width: 767.98px) {

    /* ---------------------- HEADER ---------------------- */
    /* Compactar cada icono del header: 41px → 32px.
       En px y no en rem: la fuente raíz del proyecto es 13px, así que 2rem
       daban 26px y dejaban el icono por debajo del mínimo táctil. */
    .page-header .header-icon {
        width: 32px;
        min-width: 32px;
        padding-left: 0;
        padding-right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Botón hamburguesa: menos margen a la derecha */
    .page-header .hidden-lg-up .header-btn {
        margin-right: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .page-header {
        padding-right: 6px !important;
        padding-left: 8px !important;
    }

    /* Chip de entorno (LOCAL / TESTING): más pequeño para que no compita
       con los accesos reales */
    .page-header .avz-env-badge {
        font-size: 11px;
        padding: 2px 6px;
        letter-spacing: 0;
    }

    .page-header #testing_watermark_nav {
        padding: 0 2px 0 4px !important;
    }

    /* Botón del calendario: solo el icono, la fecha no cabe.
       Doble id para superar la especificidad de avanzalab-styles.css */
    #headerCalendarModalApp #todayButton > span {
        display: none;
    }

    #headerCalendarModalApp #todayButton {
        min-width: 0;
        width: auto;
        padding: 6px 9px;
    }

    #headerCalendarModalApp .calendar-wrapper {
        margin-left: 4px;
    }

    /* Selector de cliente de Process Work: que no fuerce 250px */
    .page-header #navbar-buttons > div.mr-2.ml-3 {
        min-width: 120px !important;
        flex: 1 1 auto;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* Avatar del menú de usuario un poco más pequeño */
    .page-header .profile-image {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* ---------------------- FORMULARIOS ---------------------- */
    /* iOS hace zoom automático al enfocar un campo de texto con fuente < 16px,
       y al hacerlo deja la página desplazada y descuadrada.

       Lleva !important porque la regla sin él no ganaba: medido sobre la app,
       un select.form-control.custom-select se quedaba en 11.96px y el buscador
       de select2 en 12.35px, pisados por hojas que se cargan después.

       Los checkbox y radio no entran: iOS no hace zoom con ellos y forzarles
       16px les cambia el tamaño de la caja. */
    .form-control,
    .custom-select,
    .p-inputtext,
    .filter-select,
    select,
    textarea,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    .select2-search__field,
    .select2-container--default .select2-selection--single {
        font-size: 16px !important;
    }

    /* La barra de búsqueda de los módulos hub necesita su propia regla: el
       reskin la fija con .input-group.input-group-lg .form-control.shadow-inset-2
       y font-size: .95rem !important, que con la raíz de 13px son 12.35px y gana
       por especificidad al selector de arriba. Se iguala para que ceda por orden
       de carga, que es el que tenemos a favor. */
    .input-group.input-group-lg .form-control.shadow-inset-2 {
        font-size: 16px !important;
    }

    /* ---------------------- ZONAS TÁCTILES ---------------------- */
    /* 190 de las 220 rutas medidas tenían algún control por debajo de 32px y
       44 bajaban de los 24px que exige WCAG 2.5.8: botones de acción de tabla
       a 17x17, iconos de tarjeta a 28x28, colapsables de panel a 13x13.
       Se les da superficie de pulsación sin agrandar el icono, centrando el
       contenido en una caja mayor. */
    .btn-xs,
    .btn-icon,
    .btn-panel,
    .page-link,
    .badge-icon,
    .p-button-icon-only,
    .js-lazy-header-calendar {
        min-height: 32px;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Controles con aspecto de enlace: no se les toca el ancho, que iría contra
       el texto, solo se les da alto de pulsación. El de twoFactorVerification
       medía 94x19 en una pantalla de la que no se puede salir de otra forma. */
    .lv3-link-btn,
    .plan-contable-arrow-btn {
        min-height: 24px;
    }

    /* Los iconos de acción de las tarjetas van sin texto que los ensanche. */
    .btn-action.btn-icon {
        min-height: 36px;
        min-width: 36px;
    }

    /* ---------------------- MODALES ---------------------- */
    /* Los modales grandes ocupan todo el ancho disponible */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }

    /* ------------- MODALES DE MODELOS FISCALES ------------- */
    /* El modal de edición de /fiscalModule se dimensiona desde JS
       (draggableResizableModal en public/js/fiscal/modelo303-index.js), cuyo
       mínimo son 520x360. En un viewport de 390px ese min-width gana al
       max-width: calc(100vw - 20px) del propio modal: se perdían 140px por la
       derecha y con ellos el botón de cerrar, así que no había forma de salir.

       Los selectores llevan `body` porque public/css/fiscal/modelo303-index.css
       se carga desde el <body> de la vista, después de esta hoja, y con la
       misma especificidad ganaría él. */
    body .modal-window {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-window .modal-header {
        flex: 0 0 auto;
    }

    /* Como caja flexible el cuerpo ya no depende del height: calc(100% - 54px),
       que deja el final del formulario tapado en cuanto el título envuelve. */
    .modal-window .modal-body {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        padding: 0.75rem;
    }

    /* 14px de agarre no se usan con el dedo y pisan el formulario. */
    .modal-window .resize-handle {
        display: none;
    }

    /* Tablas de casillas (modelos 111, 115, 123, 130, 131): a tres columnas los
       inputs se quedan en 15px de ancho. Cada fila pasa a caja flexible con la
       etiqueta en su propia línea y las casillas debajo, dos por línea. */
    .form111-table, .form111-table tbody, .form111-table tr, .form111-table td,
    .form115-table, .form115-table tbody, .form115-table tr, .form115-table td,
    .form123-table, .form123-table tbody, .form123-table tr, .form123-table td,
    .form130-table, .form130-table tbody, .form130-table tr, .form130-table td,
    .form131-table, .form131-table tbody, .form131-table tr, .form131-table td {
        display: block;
        width: auto;
    }

    .form111-table thead,
    .form115-table thead,
    .form123-table thead,
    .form130-table thead,
    .form131-table thead {
        display: none;
    }

    .form111-table tr,
    .form115-table tr,
    .form123-table tr,
    .form130-table tr,
    .form131-table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .form111-row-label,
    .form115-row-label,
    .form123-row-label,
    .form130-row-label,
    .form131-row-label {
        flex: 0 0 100%;
        width: auto;
        padding-right: 0;
    }

    .form111-cell,
    .form115-cell,
    .form123-cell,
    .form130-cell,
    .form131-cell {
        flex: 1 1 140px;
        padding: 0;
    }

    .form111-section,
    .form115-section,
    .form123-section,
    .form130-section,
    .form131-section,
    .form349-section {
        padding: 0.75rem;
    }

    /* El 349 es una rejilla de datos de 9 columnas: apilarla perdería la
       cabecera, así que scrolla en horizontal dentro de su sección. */
    .form349-section {
        overflow-x: auto;
    }

    .form349-table {
        min-width: 900px;
    }

    /* Estos inputs no son .form-control, así que necesitan su propio 16px
       para que iOS no haga zoom al enfocarlos. */
    .form111-input,
    .form115-input,
    .form123-input,
    .form130-input,
    .form131-input,
    .form349-input,
    .form390-input {
        font-size: 16px;
    }

    /* Barra de navegación de pasos (modelos 303, 131, 184, 193, 390): es un
       d-flex sin align-items, así que al envolver el bloque de la derecha los
       botones Anterior/Siguiente se estiraban a 114px de alto. */
    .form303-nav-controls {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    /* ---------------------- DATATABLES ---------------------- */
    /* La paginación con muchas páginas se sale: permitir salto de línea */
    .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }

    /* Barra de botones del datatable: que envuelva sin desbordar */
    .dt-buttons {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* Una tabla más ancha que la pantalla debe poder alcanzarse a base de
       scroll; apilarla perdería la cabecera de columnas. */
    .dataTables_wrapper {
        overflow-x: auto;
    }

    /* ---------------------- PANEL FISCAL ---------------------- */
    /* El panel de modelos fija overflow: hidden en .page-content y monta un
       selector de cliente con min-width: 500px en línea. Medido en 390px:
       el contenedor quedaba en client=390 con scroll=552, o sea 162px de
       contenido inalcanzable, incluidos el propio selector y la barra de
       acciones masivas. Es el único sitio de las 220 rutas donde había
       contenido de verdad inaccesible. */
    .hub-header .header-main .mr-2.ml-3 {
        min-width: 0 !important;
    }

    .hub-header .header-main > div.d-flex {
        flex-wrap: wrap;
    }

    .bulk-bar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Red de seguridad: el selector de ID gana al .page-content de la hoja del
       panel, que se carga después. Si algo sigue siendo más ancho que la
       pantalla, se alcanza con scroll en vez de recortarse. */
    body #js-page-content {
        overflow-x: auto;
    }

    /* ---------------------- CALENDARIOS ---------------------- */
    /* flatpickr en modo rango pinta dos meses y mide 618px. El arreglo correcto
       es showMonths: 1 en la configuración JS; hasta entonces, que al menos se
       pueda alcanzar y no se salga de la pantalla. */
    .flatpickr-calendar {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
    }
}

/* Teléfonos (< 576px): liberar sitio, el header va justo */
@media (max-width: 575.98px) {
    .page-header #chatTooltip {
        display: none !important;
    }

    .page-header .avz-env-badge {
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

/* Pantallas muy estrechas (< 375px): el chip de entorno tampoco cabe */
@media (max-width: 374.98px) {
    .page-header #testing_watermark_nav {
        display: none !important;
    }
}