/*------------------------------------------------------------------
MOBILE APP UI — Fase 0-1: shell de navegación (bottom nav + drawer "Más")
Hoja aditiva: no modifica reglas de theme.css / new_ui.css.
Se carga después de ambas para poder sobreescribir sin !important.
Todo vive dentro de @media (max-width: 991px): el desktop no se toca.
-------------------------------------------------------------------*/

@media (max-width: 991px) {

    /* ---------- Fase 6 (fix): hueco blanco enorme arriba de cada página ----------
       Causa real (todo pre-existente en theme.css, no introducido por estas fases):
       1) .page-container tenía "position:relative; top:88px" -> desplaza todo
          88px hacia abajo dejando ese hueco encima.
       2) .header-desktop pasaba a "height:170px" fijo pensado para 2 filas
          (Acceso Rápido + notificaciones/cuenta) pero su contenido real es
          más bajo -> caja vacía.
       3) .main-content sumaba encima un padding-top de 65px pensado para
          compensar el header FIJO de escritorio, que en mobile ya no aplica
          (el header pasa a position:relative). Los tres efectos se sumaban. */
    .page-container {
        position: static;
        top: 0;
    }

    .header-desktop {
        height: auto;
        min-height: 56px;
        padding: 10px 15px;
    }

    .header-desktop .section__content {
        position: static;
        -webkit-transform: none;
        transform: none;
        width: 100%;
    }

    .main-content {
        padding-top: 10px;
    }

    /* Deja espacio para que la bottom nav fija no tape contenido */
    .main-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Fase 6 (fix): título y botón de acción "descuadrados" ----------
       .overview-wrap ya traía flex-direction:column con un "order" pensado
       para una clase .button que ya no se usa (los botones actuales son
       .au-btn) -> el order no aplicaba y el botón podía quedar antes que el
       título según el HTML de cada página. Forzamos: título primero, botón
       después, sin importar qué clase de botón use la página. */
    .overview-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .overview-wrap h2 {
        order: 1;
        margin-bottom: 10px;
    }

    .overview-wrap > a,
    .overview-wrap > .button,
    .overview-wrap .au-btn {
        order: 2;
        align-self: flex-start;
    }

    /* ---------- Fase 9: tablas responsive sin scroll horizontal ----------
       Reemplaza el enfoque anterior (columnas ocultas + botón "+" para
       expandir, extensión Responsive de DataTables) por una tarjeta por
       fila con TODAS las columnas visibles de una — nada queda oculto
       tras un tap, y no hay scroll horizontal. datatables-mobile.js le
       pone a cada <td> un atributo data-label con el texto de su columna
       (tomado del <thead>) para poder mostrar "Campo: Valor" acá. */
    table.dataTable {
        border: 0 !important;
        background: transparent !important;
    }

    table.dataTable thead {
        display: none;
    }

    /* Cada fila-tarjeta es blanca; si el contenedor de alrededor
       (.card, .card-body o el wrapper que arma DataTables) también es
       blanco, las tarjetas se pierden contra el fondo y no se ve dónde
       termina una fila y empieza la siguiente. Se hacen transparentes
       para que se note el fondo de la página detrás. Acotado a
       contenedores que efectivamente envuelven una DataTable, para no
       afectar otras tarjetas del sitio (fichas, etc). */
    .dataTables_wrapper,
    .card:has(table.dataTable),
    .card-body:has(table.dataTable) {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    table.dataTable,
    table.dataTable tbody,
    table.dataTable tr {
        display: block;
        width: 100% !important;
    }

    table.dataTable tr {
        margin-bottom: 14px;
        background: var(--white);
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    table.dataTable td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
        padding: 10px 14px;
        border: 0 !important;
        border-bottom: 1px solid var(--gray_fields) !important;
        white-space: normal;
        word-break: break-word;
    }

    table.dataTable tr td:last-child {
        border-bottom: 0 !important;
    }

    table.dataTable td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: var(--blue_titles);
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
    }

    table.dataTable td[data-label=""]::before {
        content: none;
    }

    /* ---------- Bottom nav ---------- */

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: stretch;
        background: var(--white);
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mnav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 2px 6px;
        border: 0;
        background: transparent;
        color: var(--gray_text);
        text-decoration: none;
        font-size: 10.5px;
        line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-item:hover,
    .mnav-item:focus {
        color: var(--gray_text);
        text-decoration: none;
    }

    .mnav-icon {
        width: 34px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        transition: background-color .15s ease;
    }

    .mnav-icon img {
        width: 18px;
        height: 18px;
    }

    .mnav-label {
        color: var(--gray_text);
        font-weight: 500;
        white-space: nowrap;
    }

    .mnav-item.active .mnav-icon,
    .mnav-more.mnav-open .mnav-icon {
        background-color: var(--blue_soft);
    }

    .mnav-item.active .mnav-label,
    .mnav-more.mnav-open .mnav-label {
        color: var(--blue_titles);
        font-weight: 700;
    }

    .mnav-dots {
        color: var(--blue_titles);
    }

    /* ---------- Drawer "Más" ---------- */

    .mnav-drawer {
        position: fixed;
        inset: 0;
        z-index: 1040;
        visibility: hidden;
        pointer-events: none;
    }

    .mnav-drawer--open {
        visibility: visible;
        pointer-events: auto;
    }

    .mnav-drawer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(23, 57, 103, 0.45);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .mnav-drawer--open .mnav-drawer__backdrop {
        opacity: 1;
    }

    .mnav-drawer__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Alto FIJO (no max-height): el cuadro tiene que ocupar siempre
           el mismo 90% de la pantalla desde el momento en que se abre,
           sin importar cuántos items tenga el submenú abierto. Con
           max-height el cuadro se agrandaba (y su borde superior subía,
           tapando la cabecera) a medida que el acordeón crecía; con
           height fijo eso ya no puede pasar: lo que crece hace scroll
           adentro de .mnav-drawer__body, el cuadro no se mueve.
           dvh (dynamic viewport height) evita además el bug clásico de
           iOS Safari donde "vh" se calcula con la barra de Safari
           colapsada aunque en ese momento esté visible, haciendo que el
           cuadro termine más alto que la pantalla realmente visible. */
        height: 90vh;
        height: 90dvh;
        background: var(--white);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1);
        display: flex;
        flex-direction: column;
        /* Nada debe poder dibujarse ni desbordar fuera de esta caja,
           pase lo que pase adentro (red de seguridad además del fix de
           .mnav-drawer__body de abajo). */
        overflow: hidden;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    .mnav-drawer--open .mnav-drawer__panel {
        transform: translateY(0);
    }

    .mnav-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid var(--gray_fields);
        flex: 0 0 auto;
    }

    .mnav-drawer__title {
        font-size: 16px;
        font-weight: 700;
        color: var(--blue_titles);
    }

    .mnav-drawer__close {
        border: 0;
        background: var(--gray_fields);
        color: var(--gray_text);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .mnav-drawer__body {
        /* flex:1 1 auto + min-height:0 es lo que realmente permite que este
           bloque se achique y haga scroll interno en vez de forzar a todo
           el panel a crecer más allá de max-height (bug clásico de
           flexbox: sin min-height:0 un hijo flex no se achica por debajo
           del alto de su contenido). Antes de este fix, con un submenú
           largo el header (título + cerrar) se perdía arriba de la
           pantalla. */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Evita que, al llegar al final del scroll interno (con un
           submenú largo), el "rebote" del dedo se filtre hacia la página
           de atrás y la desplace junto con el drawer. */
        overscroll-behavior: contain;
        padding: 8px 0 16px;
    }

    .mnav-list {
        margin: 0;
        padding: 0;
    }

    /* Fila de nivel superior: ancho completo, ícono + texto + (si tiene
       subitems) chevron a la derecha. Un único estilo para "Inicio" y
       para las categorías con submenú, para que se vean consistentes. */
    .mnav-list > li > a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 20px;
        gap: 14px;
        color: var(--blue_titles);
        text-decoration: none;
        font-size: 15.5px;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-list > li {
        border-bottom: 1px solid var(--gray_fields);
    }

    .mnav-list > li:last-child {
        border-bottom: 0;
    }

    .mnav-row-icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
    }

    .mnav-row-icon img {
        width: 20px;
        height: 20px;
    }

    .mnav-row-label {
        flex: 1 1 auto;
        text-align: left;
    }

    .mnav-chevron {
        flex: 0 0 auto;
        color: #b9c2d4;
        transition: transform .2s ease, color .2s ease;
    }

    /* Categoría seleccionada (contiene la página actual): fondo suave +
       color de acento, igual que en el sidebar de escritorio. */
    .mnav-list > li.active > a {
        color: var(--blue_primary);
        background-color: var(--blue_soft);
    }

    .mnav-has-sub.mnav-open > a .mnav-chevron {
        transform: rotate(90deg);
        color: var(--blue_primary);
    }

    .mnav-list > li > a:active {
        background-color: var(--gray_fields);
    }

    /* Sub-lista: fondo diferenciado, tipografía secundaria (más chica,
       peso normal, gris) y una línea guía para marcar la jerarquía. */
    .mnav-sub-list {
        display: none;
        position: relative;
        margin: 0;
        padding: 6px 0 10px;
        background-color: #FAFBFD;
    }

    .mnav-has-sub.mnav-open > .mnav-sub-list {
        display: block;
    }

    .mnav-sub-list::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 10px;
        left: 40px;
        width: 1px;
        background-color: #E4E9F2;
    }

    .mnav-sub-list li a {
        display: block;
        width: 100%;
        padding: 10px 20px 10px 56px;
        font-size: 14px;
        font-weight: 400;
        color: var(--gray_text);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mnav-sub-list li a:active {
        background-color: var(--gray_fields);
    }

    .mnav-sub-list li.active a {
        color: var(--blue_primary);
        font-weight: 700;
    }

    body.mnav-scroll-lock {
        overflow: hidden;
    }

    /* ---------- Fase 3: fichas y formularios ---------- */

    /* Barras de acciones que ya usaban Bootstrap .fixed-bottom (ordenes,
       campañas, cupones, ddbb-ficha, leads-ficha): se suben para no quedar
       tapadas por la bottom nav. */
    .fixed-bottom {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Resto de fichas: el footer con el botón "Guardar" queda pegado abajo
       (sticky) mientras se hace scroll a formularios largos, en vez de
       quedar flotando al final. Selector acotado a footers que sí
       contienen el botón .guardar para no afectar otros .card-footer del
       sitio (listados, modales, etc). Si el navegador no soporta :has(),
       degrada de forma segura al comportamiento normal (sin sticky). */
    .card-footer:has(.guardar) {
        position: sticky;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        background-color: var(--white);
        z-index: 20;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    /* ---------- Fase 4: modales, dropdowns y overlays ---------- */

    /* Todos los modales Bootstrap (32 archivos) pasan a comportarse como
       bottom-sheet a pantalla completa en vez de un cuadro centrado
       pequeño. Un solo cambio central, no se toca ningún modal. */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
        pointer-events: none;
    }

    .modal-dialog-centered {
        min-height: 100%;
    }

    .modal.fade .modal-dialog {
        transform: translateY(100%);
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    .modal-content {
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        border: 0;
        pointer-events: auto;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    /* El botón que colapsa el sidebar de escritorio no tiene función en
       mobile: el sidebar que controla ya está oculto por la bottom nav. */
    .toggle {
        display: none;
    }

    /* Touch targets: Bootstrap 4 da a .dropdown-item ~24px de alto por
       defecto (mínimo recomendado: 44px). Usado en "Acceso Rápido",
       "Buscar en" y respuestas rápidas de leads-ficha. */
    .dropdown-item {
        padding: 12px 20px;
        font-size: 10.5pt;
    }

    /* Evita que el menú se corte contra el borde en pantallas angostas */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* Icono de ayuda del header: agranda el área táctil real sin cambiar
       demasiado el espaciado visual entre iconos */
    .noti__item {
        padding: 10px;
        margin-right: 8px;
    }

    /* ---------- Fase 5: pulido "app feel" ---------- */

    /* Retroalimentación táctil: feedback visual inmediato al tocar,
       en vez de esperar el :hover que no existe en touch. */
    .mnav-item:active .mnav-icon {
        background-color: var(--blue_soft);
    }

    .mnav-drawer__close:active {
        background-color: var(--gray_fields);
    }

    .guardar:active,
    .btn:active {
        opacity: .8;
    }

    .dropdown-item:active {
        background-color: var(--blue_soft);
    }

    /* ---------- Fase 7: campos de formulario — tamaño y aire ----------
       Dos problemas reportados:
       1) Zoom automático de iOS Safari al tocar un campo: pasa siempre
          que un input/select/textarea tiene font-size menor a 16px. El
          caso más claro es ".newUI .card-body .form-control" que baja a
          11px (ej. ddbb-avanzado.php), pero hay estilos inline puntuales
          (style="font-size:10pt") con especificidad muy alta que solo un
          !important puede vencer con seguridad — por eso el !important
          acá, no como estilo general.
       2) Todo se veía chico y apretado: labels a 8pt/11px, poco espacio
          entre campos. Subimos tamaños y separaciones para mobile. */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .newUI .card-body .form-control,
    .selectize-input,
    .selectize-input input,
    .select2-container .select2-selection,
    .select2-search__field,
    .tagit input[type="text"],
    .au-input {
        font-size: 16px !important;
    }

    .form-control,
    .newUI .card-body .form-control {
        min-height: 46px;
        padding: 10px 14px;
    }

    textarea.form-control {
        min-height: 90px;
    }

    .select2-container .select2-selection--single {
        height: 46px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 46px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }

    /* Labels: de 8pt/11px legacy a un tamaño legible, con más aire */
    label,
    .form-control-label,
    .newUI .card-body label {
        font-size: 13.5px;
        margin-bottom: 8px;
    }

    .newUI .card-body {
        padding: 18px 16px;
    }

    /* Más separación entre campos apilados */
    .form-group {
        margin-bottom: 20px;
    }

    .row.form-group {
        margin-bottom: 4px;
    }

    .row.form-group > [class*="col-"] {
        margin-bottom: 16px;
    }

    .row.form-group > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    /* ---------- Fase 8: selects — por qué no se leía el placeholder ----------
       El fix de la Fase 7 (min-height/padding en .form-control) no alcanzaba
       en los <select> porque el navegador (sobre todo iOS Safari) les aplica
       una apariencia nativa que no siempre respeta padding/altura custom, y
       el texto quedaba centrado mal o cortado. Solución: quitar la
       apariencia nativa y dibujar la flechita nosotros mismos con CSS, así
       controlamos el alto real. */
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        line-height: 1.4;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        padding-right: 34px;
    }

    select.form-control[multiple] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
        padding-right: 14px;
        min-height: 110px;
    }

    /* ---------- Fase 8: botón flotante de USO (ddbb-avanzado.php) ----------
       No aporta nada en mobile (ya tenemos la bottom nav) y competía en
       posición con ella. */
    .uso-fab-outer {
        display: none;
    }

    /* ---------- Fase 9: barra de herramientas de DataTables (Exportar
       CSV, buscador, largo de página) se solapaba ----------
       Causa real: custom.php trae varios hacks tipo
       "#listaproveedores_wrapper .dt-buttons{margin-top:-20px}" pensados
       para alinear el botón junto al buscador en una sola fila de
       escritorio. En mobile, al apilarse verticalmente, ese margen
       negativo hace que el botón se monte sobre lo que está arriba. Como
       son selectores con ID (más específicos que una clase), hace falta
       !important para vencerlos con seguridad. */
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        margin-top: 0 !important;
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 10px;
    }

    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dataTables_paginate {
        white-space: normal;
        text-align: center !important;
    }

    /* Mismo tipo de hack (margin-top negativo) en el botón de acción que
       va junto al título de cada página (ej. "Crear Campaña"): antes de
       apilarlo (Fase 6) compensaba estar al lado del título; apilado ya
       no hace falta y solo lo monta sobre el título. */
    .overview-wrap .au-btn--small {
        margin-top: 0 !important;
    }
}