/* =========================================================================
   Móvil: que se comporte como una app y no como una web
   Se carga la última en <head> (base.html), así que reajusta sin tocar el resto de hojas. Todo va condicionado a
   `pointer: coarse` (dedo, no ratón): el escritorio y sus ventanas estrechas se quedan como estaban.

   1. Nada se desplaza de lado. Ni la página, ni los popups, ni las hojas de firma.
   2. Los tirones al llegar al final no mueven lo de detrás ni recargan la página (pull-to-refresh).
   3. Los toques responden al instante: sin retardo de doble toque, sin el destello gris de Android ni la
      selección de texto al dejar el dedo sobre un botón.
   4. En horizontal las barras no se comen la pantalla: la superior se esconde al bajar (js/movil_app.js) y la de
      búsqueda deja de ir fija; la cabecera del panel se compacta.
   ========================================================================= */

@media (pointer: coarse) {
    html {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 1 y 2. La página no tiene nada hacia donde desplazarse de lado (clip recorta sin crear un contenedor de scroll,
       así que no estropea las cabeceras sticky) y el tirón se queda donde empieza. Las tablas anchas que deben
       moverse de lado ya llevan su propia caja con overflow-x: auto, que no se ve afectada. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;
    }
    @supports (overflow: clip) {
        html,
        body { overflow-x: clip; }
    }

    /* Popups y hojas (reserva, OR, contrato, firma, finiquitos…): un `overflow-y: auto` convierte el eje X en `auto`
       y basta con que algo sobresalga unos píxeles para que la ventana baile de lado. Se recorta, se prohíbe el
       gesto horizontal y el tirón no pasa a la página de detrás. `pan-y` deja el scroll vertical; el lienzo de
       firma lleva `touch-action: none` propio y sigue mandando sobre esto. */
    [role="dialog"],
    .sheet-modal,
    .sheet-panel,
    .resmodal__panel,
    .ormodal,
    .fq-modal,
    .fq-modal__caja,
    .gt-modal,
    .gt-modal__caja {
        overflow-x: hidden;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    /* La hoja de las reservas (.sheet-panel) es `overflow-hidden` pero no se desplaza: quien se desplaza es el
       contenedor de fuera (#editModal). Con `contain` en ella el gesto no le llegaba y en Android el popup no se
       movía de arriba abajo (iOS lo ignora). Se deja pasar el gesto; la página de detrás ya está bloqueada con
       `html.sheet-abierto`. */
    .sheet-panel { overscroll-behavior: auto; }
    /* El velo de detrás de una hoja no tiene nada que mover: que arrastrar sobre él no arrastre la página */
    .sheet-scrim,
    .nav-scrim { touch-action: none; overscroll-behavior: contain; }
    /* El menú móvil también tiene su scroll propio y solo vertical */
    .nav-mobile { overflow-x: hidden; touch-action: pan-y; }

    /* 3. Respuesta inmediata al tocar */
    a,
    button,
    [role="button"],
    summary,
    label,
    select,
    input,
    textarea {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    /* Lo que es mando (no contenido) no se selecciona ni abre el menú de «copiar» al mantener pulsado. El texto de
       las filas, los teléfonos y las matrículas sí se pueden seguir copiando. */
    button,
    [role="button"],
    summary,
    .site-nav,
    .dock,
    .stat,
    .pbtn,
    .action-icon-btn,
    .sheet-btn,
    .nav-mobile-item,
    .resmodal__head {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    input,
    textarea,
    [contenteditable] { -webkit-user-select: text; user-select: text; }
}

/* Al enfocar un campo con letra menor de 16px, iOS amplía la página y la deja descentrada hacia un lado, que es
   justo el baile de los popups con formularios. 16px lo evita sin tocar la ampliación voluntaria con los dedos. */
@media (pointer: coarse) and (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
    select,
    textarea { font-size: 16px !important; }
}

/* 4. Móvil en horizontal. Hay poca altura: nada fijo que se la coma */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    /* Barra superior más baja y, con el menú cerrado, escondida al bajar (la clase la pone movil_app.js) */
    .site-nav { padding-top: 2px !important; padding-bottom: 2px !important; }
    .site-nav__inner { min-height: 0; }
    /* 96px de margen era para la barra de 69px de alto; ahora mide la mitad */
    .container.content { margin-top: 46px; }
    .nav-brand__workshop { display: none; }
    .nav-brand__mark { width: 26px; height: 26px; font-size: 11px; }
    .nav-brand__name { font-size: 13px; }
    .nav-mobile {
        max-height: calc(100vh - 52px);
        max-height: calc(100dvh - 52px);
    }

    /* La barra de búsqueda y filtros deja de ir pegada arriba: ocupaba media pantalla en cada desplazamiento */
    .command-bar { position: static !important; margin-top: 8px; padding: 8px 10px; gap: 8px; }

    /* Cabecera del panel: una línea de título y los contadores, sin el santo ni el aire de la vista vertical */
    .panel-header { padding: 10px 16px 8px !important; }
    .panel-header__eyebrow,
    #onThisDayCard,
    #onThisDayWidget { display: none !important; }
    .panel-header__top { gap: 12px; }
    .panel-header__title { font-size: 20px !important; margin-top: 0 !important; }
    .panel-clock { padding: 4px 12px !important; width: auto !important; }
    .panel-clock__time { font-size: 20px !important; }
    .panel-clock__date { font-size: 11px; margin-top: 0; }
    .stat-strip {
        margin-top: 8px !important;
        padding-top: 8px !important;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px;
    }
    .stat { padding: 2px 8px !important; min-width: 0 !important; }
    .stat__chip { display: none; }
    .stat__value { font-size: 20px !important; line-height: 1.1; }
    #quickFleetSection { margin-top: 24px !important; }
}

/* La barra superior se esconde al bajar y vuelve al subir (como la del navegador o la de una app nativa) */
.site-nav { transition: transform .28s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.site-nav.site-nav--oculta { transform: translateY(-110%); }
/* La barra de búsqueda sticky (tableta) sube a ocupar su sitio mientras la superior está escondida */
html.nav-oculta .command-bar { top: 8px; }
.command-bar { transition: top .28s cubic-bezier(.32, .72, 0, 1), box-shadow .2s; }

@media (prefers-reduced-motion: reduce) {
    .site-nav, .command-bar { transition: none; }
}