/*!
 * BeplyTheme - Mobile base
 * Capa de cimientos que aplica únicamente bajo el breakpoint md (<768px).
 * Es 100% aditiva: el desktop no se ve afectado por estas reglas.
 */

/* Forzar tema claro siempre: aunque el SO esté en modo oscuro, la app es clara. */
:root {
    color-scheme: light;
}

/* === Adaptación de interacción a móvil táctil ===
   Estrategia general:
   - Quitamos los :hover stuck (que se quedan pegados tras tocar).
   - Quitamos los :focus stuck en botones/links (anillo azul se queda).
   - Conservamos :focus en inputs (necesario para ver dónde escribes).
   - Conservamos :active (es feedback momentáneo del tap, útil).
   - Conservamos :focus-visible (navegación por teclado, accesibilidad).
   No usamos selectores universales para no romper backgrounds explícitos. */
@media (hover: none), (pointer: coarse) {

    /* :hover anulado en interactivos comunes */
    a:hover,
    button:hover,
    .btn:hover,
    .nav-link:hover,
    .nav-tabs .nav-link:hover,
    .nav-pills .nav-link:hover,
    .dropdown-item:hover,
    .dropdown-toggle:hover,
    [role="button"]:hover,
    [data-bs-toggle]:hover,
    .list-group-item:hover,
    table tbody tr:hover,
    .table-hover tbody tr:hover,
    .clickableListRow:hover,
    .card:hover,
    .dashboard-link:hover,
    .beply-mb-card-item:hover,
    .beply-mb-chip:hover,
    .beply-mb-appbar__btn:hover,
    .beply-mb-bottomnav__item:hover,
    .beply-mb-fab:hover,
    .beply-mb-menupage__item > a:hover,
    .beply-mb-menupage__item > button:hover,
    .beply-mb-menupage__sub a:hover,
    .beply-mb-menupage__logout:hover {
        /* Sin cambios: el navegador heredará los estilos base del elemento */
        transition: none !important;
    }

    /* :focus anulado en elementos no editables cuando NO viene por teclado */
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    .btn:focus:not(:focus-visible),
    .nav-link:focus:not(:focus-visible),
    .dropdown-item:focus:not(:focus-visible),
    .dropdown-toggle:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible),
    [data-bs-toggle]:focus:not(:focus-visible),
    .beply-mb-appbar__btn:focus:not(:focus-visible),
    .beply-mb-bottomnav__item:focus:not(:focus-visible),
    .beply-mb-fab:focus:not(:focus-visible),
    .beply-mb-menupage__item > a:focus:not(:focus-visible),
    .beply-mb-menupage__item > button:focus:not(:focus-visible),
    .beply-mb-chip:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

    /* :active sin transition para que el feedback sea instantáneo */
    a:active,
    button:active,
    .btn:active,
    .nav-link:active {
        transition: none !important;
    }

    /* Quitar el rectángulo gris/azul del tap (Android Chrome / iOS Safari) */
    a, button, .btn, [role="button"], [data-bs-toggle] {
        -webkit-tap-highlight-color: transparent;
    }

    /* === FIX HOVER STUCK en componentes nuevos del Dashboard mobile ===
       Al tocar un .card / .beply-mb-module / .beply-mb-pending__item el
       :hover y/o :focus se quedaba pegado tras soltar el dedo (típico tap
       en touchscreen). Resultado visual: borde negro pegado en el card
       tocado. Aquí los reseteamos a su estado base en touch. */
    .beply-mb-module:hover,
    .beply-mb-module:focus,
    .beply-mb-module:focus-visible,
    .beply-mb-module:active,
    .beply-mb-pending__item:hover,
    .beply-mb-pending__item:focus,
    .beply-mb-pending__item:focus-visible,
    .beply-mb-pending__item:active,
    .beply-mb-hero__sub-item:hover,
    .beply-mb-hero__sub-item:focus,
    .beply-mb-hero__sub-item:focus-visible,
    .beply-mb-hero__sub-item:active,
    .beply-mb-quick-row__item:hover,
    .beply-mb-quick-row__item:focus,
    .beply-mb-quick-row__item:focus-visible,
    .beply-mb-quick-row__item:active,
    #mainContent .card:hover,
    #mainContent .card:focus,
    #mainContent .card:focus-visible,
    #mainContent .card:active,
    #mainContent a.card:hover,
    #mainContent a.card:focus,
    #mainContent a.card:focus-visible,
    #mainContent a.card:active,
    .dashboard-link:hover,
    .dashboard-link:focus,
    .dashboard-link:focus-visible,
    .dashboard-link:active {
        border-color: var(--beply-mb-border) !important;
        background: var(--beply-mb-surface) !important;
        color: var(--beply-mb-fg) !important;
        text-decoration: none !important;
        transform: none !important;
    }
    /* El icono dentro del quick action no debe quedarse rojo después del tap */
    .beply-mb-quick-row__item:active svg,
    .beply-mb-quick-row__item:focus-visible svg {
        color: var(--beply-mb-fg) !important;
    }
}

/* ===== Body offsets para app bar fija y bottom nav =====
   IMPORTANTE: las reglas de bg blanco y data-bs-theme reset SOLO aplican
   en mobile — antes estaban fuera de @media y modificaban silenciosamente
   el desktop. Ahora quedan scoped. */
@media (max-width: 767.98px) {
    html, body {
        background-color: #ffffff;
        color: #212529;
    }
    [data-bs-theme="dark"] {
        --bs-body-bg: #ffffff;
        --bs-body-color: #212529;
    }

    body {
        /* CRÍTICO: padding-top despeja el app-bar fijo; padding-bottom el
           bottom-nav. `!important` porque en algunas vistas (Edit/Panel) el
           core/custom.css pisaba el padding-top del body (quedaba en 8px) y el
           contenido/título se metía bajo el app-bar. El override nativo
           (.beply-mobile-native-webview) es más específico y sigue ganando. */
        padding-top: calc(var(--beply-mb-bar-h) + var(--beply-mb-safe-top)) !important;
        padding-bottom: calc(var(--beply-mb-nav-h) + var(--beply-mb-safe-bottom) + 8px) !important;
        background: var(--beply-mb-bg);
    }

    /* FacturaScripts marca el <body> de las fichas con `.bg-light`, y ese gris
       asomaba por debajo de la tarjeta —una franja justo encima de la barra de
       guardar— después de haber dejado la ficha blanca y a sangre. El fondo de
       la página tiene que acompañar a la superficie que la ocupa. */
    body.bg-light {
        background: var(--beply-mb-surface) !important;
    }

    body.beply-mobile-native-webview {
        padding: 0 !important;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    html.beply-mobile-native-webview {
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.beply-mobile-native-webview .beply-mb-scroll-root {
        position: fixed;
        top: calc(var(--beply-mb-bar-h) + var(--beply-mb-safe-top));
        left: 0;
        right: 0;
        bottom: calc(var(--beply-mb-nav-h) + var(--beply-mb-safe-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--beply-mb-bg);
    }

    /* MenuTemplate.html.twig añade 3 <br/> hardcoded al final del body — en
       desktop sirven como spacer pero en móvil generan scroll fantasma con
       franja blanca debajo del contenido. Los ocultamos. */
    body > br,
    body.beply-mobile-native-webview .beply-mb-scroll-root > br {
        display: none;
    }

    /* BeplyLimits inyecta #trial-banner como barra fija abajo. En mobile
       tapa el bottom nav y rompe la UX. Lo ocultamos y beply-mobile.js
       (trialBannerToModal) lo recicla en un modal una vez cada 24h. */
    #trial-banner { display: none !important; }

    /* Estilo del modal del trial — pequeño, COMPACTO, centrado, cuadrado Beply.
       Bootstrap por defecto:
         · hace .modal-dialog full-width en mobile
         · `.modal-dialog-centered` aplica `display:flex` + `min-height` con
           el alto del viewport → estira `.modal-content` hasta ocupar
           toda la pantalla (rascacielos blanco). Lo cortamos. */
    .beply-mb-trial-modal .modal-dialog {
        max-width: 300px;
        width: auto;
        margin: auto;                       /* centra horizontalmente */
        /* Cancela el alto-100% que mete .modal-dialog-centered */
        min-height: auto !important;
        display: block !important;
        /* Centrado vertical "casi en el medio" sin usar flex */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .beply-mb-trial-modal .modal-content {
        border-radius: 0;
        border: 1px solid var(--beply-mb-border);
        height: auto !important;
        min-height: 0 !important;
    }
    .beply-mb-trial-modal__body {
        padding: var(--beply-mb-gap-lg) var(--beply-mb-pad);
        font-size: var(--beply-mb-fs-sm);
        line-height: 1.35;
        text-align: center;
    }
    .beply-mb-trial-modal__body .fa-clock {
        display: block;
        margin: 0 auto var(--beply-mb-gap);
        color: var(--beply-mb-accent);
        font-size: 22px;
    }
    .beply-mb-trial-modal__body a {
        display: inline-block;
        margin-top: var(--beply-mb-gap-md);
        color: var(--beply-mb-accent);
        font-weight: 700;
        text-decoration: none;
        font-size: var(--beply-mb-fs-sm);
    }
    .beply-mb-trial-modal__footer {
        border-top: 1px solid var(--beply-mb-border);
        padding: var(--beply-mb-gap-sm) var(--beply-mb-gap);
    }
    .beply-mb-trial-modal__footer .btn {
        border-radius: 0;
        font-weight: 500;
        font-size: var(--beply-mb-fs-sm);
        padding: 6px 12px;
    }

    /* La navbar de desktop existente se oculta visualmente en móvil pero queda en el DOM
       por compatibilidad con plugins que inyectan ítems via includeViews('MenuTemplate', 'MenuIcon*') */
    body > nav.navbar.bg-primary,
    body.beply-mobile-native-webview .beply-mb-scroll-root > nav.navbar.bg-primary {
        display: none !important;
    }

    /* El espacio pt-3 que el core mete tras la navbar también sobra */
    #main-content > .pt-3,
    #main-content > .bg-light.pt-3,
    body > .pt-3,
    body > .bg-light.pt-3,
    body.beply-mobile-native-webview .beply-mb-scroll-root > .pt-3,
    body.beply-mobile-native-webview .beply-mb-scroll-root > .bg-light.pt-3 {
        padding-top: 0 !important;
    }

    /* Containers más compactos */
    .container,
    .container-fluid {
        padding-left: var(--beply-mb-pad);
        padding-right: var(--beply-mb-pad);
    }

    /* Tipografía base más compacta */
    body {
        font-size: var(--beply-mb-fs-base);
        -webkit-tap-highlight-color: transparent;
    }

    h1, .h1 { font-size: 22px; }
    h2, .h2 { font-size: 20px; }
    h3, .h3 { font-size: 18px; }
    h4, .h4 { font-size: 16px; }
    h5, .h5 { font-size: 15px; font-weight: 600; }

    /* Botones — target táctil mínimo */
    .btn {
        min-height: var(--beply-mb-tap);
        padding: 10px 14px;
        font-size: var(--beply-mb-fs-base);
    }
    .btn-sm {
        min-height: 36px;
        padding: 6px 10px;
        font-size: var(--beply-mb-fs-sm);
    }
    .btn-lg {
        min-height: var(--beply-mb-tap-lg);
    }

    /* Inputs — 16px mínimo para evitar zoom iOS, area cómoda */
    .form-control,
    .form-select,
    select.form-control {
        font-size: var(--beply-mb-fs-input);
        min-height: var(--beply-mb-tap);
        padding: 10px 12px;
    }
    .form-control-sm,
    .form-select-sm {
        min-height: 40px;
        font-size: var(--beply-mb-fs-input);
    }

    /* Toasts — empujados arriba para no quedar tapados por el bottom nav */
    .toast-container.bottom-0,
    .toast-container.position-fixed {
        bottom: calc(var(--beply-mb-nav-h) + var(--beply-mb-safe-bottom) + var(--beply-mb-gap)) !important;
        z-index: var(--beply-mb-z-toast);
    }

    /* Modales: COMPACTOS y CENTRADOS verticalmente en móvil.
       FS/Bootstrap por defecto en mobile estira `.modal-dialog` a 100vh.
       Estrategia: el wrapper `.modal` (que ya es position:fixed por BS)
       lo convertimos en flex container para centrar el dialog (sin
       depender de `.modal-dialog-centered`). */
    .modal {
        display: none;
    }
    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }
    .modal-dialog,
    .modal-dialog.modal-dialog-centered {
        margin: 0 auto !important;
        max-width: calc(100% - 32px) !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        position: relative;
        padding: 0 !important;
    }
    .modal-content {
        min-height: auto !important;
        height: auto !important;
        max-height: calc(100vh - 64px) !important;
        /* `dvh` sigue a la barra del navegador cuando se esconde o aparece;
           con `vh` la altura se calcula sobre la pantalla completa y el
           contenido quedaba por debajo del borde. */
        max-height: calc(100dvh - 64px) !important;
        border: 1px solid var(--beply-mb-border) !important;
        border-radius: 0 !important;
        background: var(--beply-mb-surface, #fff) !important;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
        margin: 0 !important;
        overflow-y: auto;
    }
    .modal-header {
        border-bottom: 1px solid var(--beply-mb-border) !important;
        padding: 14px 18px !important;
    }
    .modal-header .modal-title {
        font-family: var(--beply-mb-font-text);
        font-weight: 700;
        font-size: 16px;
    }
    .modal-body {
        padding: 16px 18px !important;
        font-size: 14px;
        line-height: 1.4;
    }
    .modal-footer {
        border-top: 1px solid var(--beply-mb-border) !important;
        padding: 12px 18px !important;
        gap: 8px;
    }
    .modal-footer .btn {
        border-radius: 0 !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Dropdowns: que ocupen ancho útil cuando aparezcan */
    .dropdown-menu {
        min-width: 220px;
        box-shadow: var(--beply-mb-shadow-hi);
    }
    .dropdown-item {
        min-height: var(--beply-mb-tap);
        display: flex;
        align-items: center;
        font-size: var(--beply-mb-fs-base);
    }

    /* Breadcrumbs: el de mobile-header.css lo recicla como PageHeader negro
       con flex-wrap. NO queremos scroll horizontal porque el usuario lo
       reportó como UX rota en EditFactura (header con scroll lateral).
       En su lugar, dejamos wrap natural. */
    .breadcrumb {
        font-size: var(--beply-mb-fs-sm);
        flex-wrap: wrap;
        overflow: visible;
        white-space: normal;
        margin-bottom: var(--beply-mb-gap);
    }

    /* ============================================================
       SCROLLBARS — invisibles en mobile (gestos touch)
       ============================================================
       FacturaScripts/algunos plugins activan scrollbars custom rojas o
       gruesas en desktop. En mobile las anulamos completamente — el
       scroll sigue funcionando con touch, solo se oculta la barra. */
    *,
    html,
    body,
    .beply-mb-scroll-root,
    .table-responsive,
    .modal,
    .modal-content,
    .dropdown-menu,
    .nav-tabs-wrapper,
    .nav-tabs-scroll,
    pre,
    code,
    textarea,
    select,
    .filterview,
    .container-fluid,
    [class*="overflow"] {
        scrollbar-width: none !important;       /* Firefox */
        -ms-overflow-style: none !important;    /* IE/Edge legacy */
    }
    *::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .beply-mb-scroll-root::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .modal::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar,
    .dropdown-menu::-webkit-scrollbar,
    pre::-webkit-scrollbar,
    code::-webkit-scrollbar,
    textarea::-webkit-scrollbar,
    select::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        display: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    *::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-corner,
    *::-webkit-scrollbar-button {
        background: transparent !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Tarjetas — Bootstrap card respeta los radii cuadrados de Beply */
    .card {
        border-color: var(--beply-mb-border);
        margin-bottom: var(--beply-mb-gap-lg);
    }
    .card-header {
        padding: var(--beply-mb-gap-md) var(--beply-mb-pad);
        background: var(--beply-mb-surface);
        font-weight: 600;
    }
    .card-body {
        padding: var(--beply-mb-pad);
    }

    /* Tablas con table-responsive: ya gestionado por mobile-list.css */
    .table {
        font-size: var(--beply-mb-fs-sm);
    }

    /* Print: vuelve al diseño original */
    @media print {
        body.beply-mobile-shell {
            padding: 0 !important;
        }
    }
}

/* ============================================================
   QUITAR EFECTOS DE FOCUS en inputs (mobile)
   Sin halo azul (box-shadow) ni outline al enfocar — petición UX.
   Se conserva el borde base del control para que siga delimitado.
   ============================================================ */
@media (max-width: 767.98px) {
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus,
    .form-control:focus-visible,
    .form-select:focus-visible,
    input:focus, input:focus-visible,
    textarea:focus, textarea:focus-visible,
    select:focus, select:focus-visible,
    .input-group:focus-within .form-control {
        box-shadow: none !important;
        outline: 0 !important;
        border-color: var(--beply-mb-border, #e5e7eb) !important;
    }
}

/* ============================================================
   ANTI-FOUC (mobile): ocultar el contenido hasta que el shell JS
   haya montado tarjetas/toolbar/etc. Evita el flash "desktop
   responsive → tema móvil" al navegar. Se revela con beply-mb-ready
   (lo añade init() al terminar; hay un failsafe en el BodyEnd).
   El selector exige el bottom nav para no ocultar páginas standalone
   (login, errores, microtemplates) que no cargan el shell JS.
   ============================================================ */
@media (max-width: 767.98px) {
    html:not(.beply-mb-ready) body:has(.beply-mb-bottomnav) {
        opacity: 0 !important;
    }
    html.beply-mb-ready body:has(.beply-mb-bottomnav) {
        opacity: 1;
        transition: opacity .12s ease-out;
    }
}

/* ============================================================
   BLOQUES <pre> — que no desborden la pantalla
   ============================================================
   Las páginas de log y de error vuelcan trazas y rutas largas en <pre>.
   Sin ajuste, esas líneas empujan el ancho del documento y aparecía
   scroll horizontal en TODA la página (medido: +134px en AdminPlugins,
   +56px en EditLogMessage), que es lo que rompe la sensación de app
   nativa. Confinamos el desbordamiento dentro del propio bloque.
   ============================================================ */
@media (max-width: 767.98px) {
    pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   RED DE SEGURIDAD — ninguna cadena larga rompe el layout
   ============================================================
   Una sola palabra sin espacios más ancha que la pantalla (una ruta,
   una URL, una referencia larga, un aviso de PHP) ensancha el documento
   entero y con él el shell fijo: medido, la portada pasaba de 390 a
   828 px de ancho y aparecía scroll horizontal en toda la app.

   Se aplica solo a contenedores de texto para no alterar el cálculo de
   tamaño de tarjetas ni de la cuadrícula.
   ============================================================ */
@media (max-width: 767.98px) {
    #main-content p,
    #main-content b,
    #main-content strong,
    #main-content .alert,
    #main-content dd,
    #main-content blockquote {
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   NADA DE MAQUETACIÓN CRUDA ANTES DE LA CAPA MÓVIL
   ============================================================
   La regla de más arriba se apoya en `body:has(.beply-mb-bottomnav)`, y esa
   barra se inyecta al final del body: mientras el HTML se descarga no existe,
   la regla no encaja y la página se ve sin adaptar. Medido: a los 160ms el
   body estaba a opacidad 1 con el shell aún sin montar.

   `beply-mb-app` la pone un script en la cabecera —lo único que llega a
   tiempo—, así que la página nace oculta. Se sigue revelando con
   `beply-mb-ready`, y sólo afecta a pantallas de móvil: las standalone
   (login, errores) no pasan por esta plantilla y nunca se ocultan.
   ============================================================ */
@media (max-width: 767.98px) {
    html.beply-mb-app:not(.beply-mb-ready) body {
        opacity: 0 !important;
    }
    html.beply-mb-app.beply-mb-ready body {
        opacity: 1;
        transition: opacity .12s ease-out;
    }
}