/* FlowGo (Localizadores): capa responsive exclusiva para telefono.

   Todo lo de este archivo vive detras de dos candados a la vez:
     1. html[data-flowmo-mobile-navigation="enabled"], que app.js solo pone en
        "enabled" cuando el user agent es un movil real (ver
        isFlowmoMobileWebNavigationEnabled), y
     2. las mismas media queries que ya usa el resto del movil de Flowmo.
   Con eso, escritorio y Electron no ven una sola regla de aqui: su diseno
   queda exactamente igual que antes.

   Ademas ninguna regla sale de FlowGo: todos los selectores cuelgan de
   .localizadores-*, .flowgo-*, .lz-*, .loc-cam*, .recorridos-* o de
   .app-shell.localizadores-mode, que solo existe con la seccion abierta. */

/* ============================================================
   1. Telefono (vertical y horizontal)
   ============================================================ */
@media (max-width: 720px) and (pointer: coarse),
       (max-width: 960px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {

  /* --- 1.1 La seccion ocupa toda la pantalla ---------------------------
     Sin esto el panel se quedaba a la altura de su contenido (~620 px en un
     iPhone 14) y abajo sobraba una franja vacia. */
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.localizadores-mode,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.localizadores-mode.sidebar-collapsed {
    grid-template-rows: minmax(0, 1fr);
  }

  html[data-flowmo-mobile-navigation="enabled"] .app-shell.localizadores-mode .discovery-panel,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.localizadores-mode.sidebar-collapsed .discovery-panel {
    height: 100%;
    min-height: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-workspace {
    height: 100%;
    min-height: 0;
    padding: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-frame-wrap {
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Splash de bienvenida: el logo grande no debe comerse la pantalla. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-placeholder {
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-splash .flowgo-img-lg {
    width: 240px;
    max-width: 68vw;
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-tagline { font-size: 13px; }
  html[data-flowmo-mobile-navigation="enabled"] .flowgo-splash-hint { font-size: 11.5px; }

  /* --- 1.2 Lista de unidades: hoja inferior sobre el mapa ---------------
     En escritorio es una tarjeta flotante de 300 px arriba a la izquierda.
     En movil esa tarjeta tapaba el mapa y quedaba debajo del boton
     "Recorridos", del boton "Vista anterior" y del zoom de Leaflet. Aqui pasa
     a ser una hoja anclada abajo: el mapa queda limpio arriba y la lista cae
     donde alcanza el pulgar. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native {
    /* --flowgo-sheet es el alto visible de la hoja y --flowgo-sheet-min el que
       conserva plegada. flowgo-mobile.js los reescribe al arrastrar el asa;
       estos valores son el punto de partida y tambien lo que se ve si ese
       archivo no llega a cargar. */
    --flowgo-sheet: min(50dvh, 410px);
    --flowgo-sheet-min: 76px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: var(--flowgo-sheet);
    max-height: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    /* Solida y sin desenfoque: ya no hay mapa detras y el telefono se ahorra
       el backdrop-filter, que es de lo mas caro de pintar en movil. */
    background: var(--panel, #fff);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -18px 44px -20px rgba(15, 23, 42, 0.45);
  }

  /* El mapa se queda con la mitad de arriba en vez de seguir por debajo de la
     hoja. Asi, cuando app.js centra una unidad con setView/fitBounds, el
     marcador cae en zona visible y no bajo la lista. app.js ya observa el
     tamano del contenedor y llama invalidateSize, asi que Leaflet se reajusta
     solo. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-map-col {
    bottom: var(--flowgo-sheet-min);
  }

  /* Sobre fondo blanco las tarjetas translucidas se perdian. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel .localizadores-live-device {
    background: var(--panel, #fff);
    border-color: var(--line, #e1e5ec);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel .localizadores-live-device.is-selected {
    border-color: #8b5cf6;
  }

  /* Mientras se arrastra manda flowgo-mobile.js: nada de transiciones. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-dragging .localizadores-devices-panel {
    transition: none;
  }

  /* Zonas de agarre. El asa, la barra de FlowGo y el encabezado "Unidades"
     arrastran la hoja, asi que el navegador no debe interpretar ese gesto como
     desplazamiento de la pagina. Los botones de dentro siguen recibiendo sus
     toques con normalidad. */
  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-brandbar,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-head {
    touch-action: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-brandbar,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-head {
    cursor: grab;
  }

  /* Asa para bajar o subir la hoja. La crea flowgo-mobile.js como boton real
     para que tambien responda a toque y a teclado. */
  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 0 5px;
    border: 0;
    background: none;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle:active {
    cursor: grabbing;
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle-bar {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.2);
    transition: background 0.16s ease, width 0.16s ease;
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle:active .flowgo-sheet-handle-bar,
  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle:focus-visible .flowgo-sheet-handle-bar {
    width: 56px;
    background: #7c3aed;
  }

  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: -4px;
    border-radius: 20px 20px 0 0;
  }

  /* Plegada solo se ve el asa y la barra de FlowGo. Lo de abajo se atenua en
     vez de desmontarse: asi no asoma ninguna rebanada de la fila de grupos ni
     hay saltos al volver a subirla, y todo sigue en su sitio. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-min .localizadores-grupos,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-min .localizadores-devices-head,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-min .localizadores-add-btn,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-min .localizadores-live-list {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-brandbar {
    padding: 6px 14px 4px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-brandbar .flowgo-img-sm {
    height: 26px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-demo-toggle {
    flex: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupos {
    padding: 6px 10px 5px;
  }

  /* Los grupos se deslizan de lado; el degradado avisa que hay mas. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupos-strip {
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-pill {
    scroll-snap-align: start;
    min-height: 30px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-head {
    padding: 8px 14px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-btn {
    margin: 0 10px 6px;
    padding: 9px;
    min-height: 40px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-list {
    gap: 7px;
    padding: 0 10px 10px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-device {
    gap: 9px;
    padding: 9px 11px;
  }

  /* Sin :hover en pantalla tactil el "levantar" se queda pegado al tocar. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-device:hover,
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-device:hover {
    transform: none;
  }

  /* --- 1.3 Controles del mapa ------------------------------------------ */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-map .leaflet-top.leaflet-left {
    top: calc(4px + env(safe-area-inset-top, 0px));
    left: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-map .leaflet-control-attribution {
    font-size: 10px;
  }

  /* Los creditos se apoyan siempre justo encima del borde de la hoja. Mover
     este elemento no obliga a Leaflet a recalcular el mapa. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-map .leaflet-bottom {
    bottom: calc(var(--flowgo-sheet) - var(--flowgo-sheet-min));
    transition: bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native.is-sheet-dragging .leaflet-bottom {
    transition: none;
  }

  /* --- 1.4 Botones flotantes: ya no pisan la lista --------------------- */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-fab {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-fab:hover {
    transform: none;
  }

  /* "Vista anterior" hoy no se dibuja (styles.css lo retira de la interfaz en
     todos los formatos). Se deja su colocacion movil por si vuelve: sin ella
     reaparecerian los encimamientos que se corrigieron aqui. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-advanced-btn {
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 10px;
    padding: 7px 12px;
    font-size: 12px;
  }

  /* --- 1.5 Modales de la seccion como hojas inferiores ------------------ */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-overlay,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-overlay,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-overlay {
    align-items: flex-end;
    padding: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-panel,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-panel,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-panel {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }

  /* Detalles del localizador */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-header {
    padding: 14px 16px 10px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-heading {
    min-width: 0;
  }

  /* El titulo y el lapiz caben en un renglon; al editar, app.js oculta el h2
     y deja el input + Guardar, asi que nowrap es seguro en los dos estados. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-name-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-name-input {
    min-width: 0;
    font-size: 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-body {
    padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-detail-motor-btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-motor-btn {
    justify-content: center;
    min-width: 0;
  }

  /* Anadir localizador: el carrusel scrollea y la navegacion queda fija. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-header {
    gap: 10px;
    padding: 12px 14px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-heading {
    gap: 10px;
    min-width: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-logo {
    height: 22px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-heading h2 {
    font-size: 15px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-heading p {
    font-size: 12px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-body {
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-carousel {
    flex: 1;
    min-height: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-carousel-viewport {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-slide {
    gap: 10px;
    padding: 16px 16px 10px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-slide h3 { font-size: 16px; }
  html[data-flowmo-mobile-navigation="enabled"] .lz-slide p { font-size: 13px; }

  /* 16 px evita que iOS haga zoom al enfocar el campo. */
  html[data-flowmo-mobile-navigation="enabled"] .lz-slide label input,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-field input[type="text"],
  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-manage-input,
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-range-inputs input {
    font-size: 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-cmd {
    flex-direction: column;
    gap: 6px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-cmd .localizadores-add-copy {
    align-self: flex-start;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-carousel-nav {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .lz-nav-btn {
    min-height: 42px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-config-row {
    flex-wrap: wrap;
  }

  /* Grupos (y el modal de camaras, que reutiliza el mismo panel) */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-header {
    gap: 10px;
    padding: 12px 14px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-heading {
    gap: 10px;
    min-width: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-heading .localizadores-add-logo {
    height: 24px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-heading h2 { font-size: 15px; }
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-heading p { font-size: 12px; }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-body {
    gap: 13px;
    padding: 13px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-row {
    flex-wrap: wrap;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-row-info {
    flex: 1 1 140px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-units {
    max-height: 34dvh;
    overscroll-behavior: contain;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-unit {
    min-height: 40px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-actions {
    gap: 10px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-actions > button {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-manage-add {
    align-self: stretch;
    justify-content: center;
  }

  /* --- 1.6 Pared de camaras -------------------------------------------
     El encabezado era una sola fila: los botones tapaban el nombre de la
     unidad y la X se salia de la pantalla. En movil se parte en dos filas. */
  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-title {
    flex: 1 1 160px;
    flex-wrap: wrap;
    gap: 8px 10px;
    min-width: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-logo {
    height: 24px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-title-txt h2 {
    font-size: 15px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-tools {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    gap: 8px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-tool {
    justify-content: center;
    min-width: 0;
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-close {
    width: 42px;
    height: 42px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-body {
    gap: 12px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-tile {
    min-height: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-feed {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-grid {
    grid-auto-rows: auto;
    overflow: visible;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-clip {
    flex-wrap: wrap;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-clip .loc-cam-event-info {
    flex: 1 1 130px;
    min-width: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-clip-actions {
    margin-left: auto;
  }

  /* Modal de clip */
  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-overlay {
    padding: 12px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-panel {
    max-height: 92dvh;
    overflow-y: auto;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-header {
    padding: 14px 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-stage {
    margin: 0 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-play {
    width: 44px;
    height: 44px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-cam-clip-meta {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 12.5px;
  }

  /* --- 1.7 Recorridos --------------------------------------------------- */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-overlay {
    padding: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-header {
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-heading {
    gap: 10px;
    min-width: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-brand-logo {
    height: 24px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-heading h2 { font-size: 15px; }
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-heading p { font-size: 12px; }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-close:hover {
    transform: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* La barra lateral vuelve a ser una columna: en fila cada bloque pedia
     260 px, se apilaban igual y el recorte de 44vh escondia "Ver recorrido". */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-sidebar {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    max-height: 48dvh;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line, #e1e5ec);
    overscroll-behavior: contain;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-block {
    flex: none;
  }

  /* La lista de unidades es un desplegable con panel absoluto. Puesto en el
     flujo empujaba el formulario hacia abajo cada vez que se abria, asi que
     aqui pasa a ser una tarjeta flotante centrada: el formulario de atras se
     queda quieto.

     El fondo difuminado lo dibuja .recorridos-panel::before y no la propia
     lista, para no romper el cierre por clic exterior de app.js: ese manejador
     cierra cuando el clic cae fuera de .recorridos-device-list, y el objetivo
     de un clic sobre el pseudo-elemento es .recorridos-panel, que si queda
     fuera. Tocar el fondo cierra; tocar la tarjeta no. */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-device-list {
    max-height: none;
    overflow: visible;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-select-trigger {
    min-height: 52px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-panel:has(.recorridos-device-list.is-open)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    /* Sin desenfoque: solo una sombra tenue que separa la tarjeta del
       formulario. Asi se sigue leyendo lo que hay detras y el telefono se
       ahorra el backdrop-filter, que es de lo mas caro de pintar. El fondo
       sigue existiendo porque es lo que recoge el toque para cerrar. */
    background: rgba(15, 23, 42, 0.18);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-select-panel {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: min(340px, calc(100% - 32px));
    max-height: min(62dvh, 460px);
    margin-top: 0;
    padding: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 26px 68px rgba(15, 23, 42, 0.34);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-select-option {
    min-height: 48px;
  }

  /* "Desde" y "Hasta" van uno debajo del otro: un datetime-local no cabe en
     media pantalla de telefono y se salia de su columna. */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-range-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-range-inputs label {
    min-width: 0;
    gap: 5px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-range-inputs input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-primary,
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-excel {
    min-height: 44px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-primary:hover,
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-excel:hover {
    transform: none;
  }

  /* El reproductor no cabe en un renglon: la linea de tiempo baja completa. */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-player {
    flex-wrap: wrap;
    gap: 8px 10px;
    width: calc(100% - 20px);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-timeline {
    order: 1;
    flex: 1 0 100%;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-play {
    width: 44px;
    height: 44px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-play:hover {
    transform: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-speed-select {
    min-height: 40px;
  }

  /* Resumen del recorrido: boton verde junto a la velocidad y panel justo
     encima del reproductor. Los crea flowgo-mobile.js moviendo ahi el bloque
     "Resumen" de la barra lateral, que en telefono quedaba lejos del mapa. */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 13px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(5, 150, 105, 0.3);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-toggle[hidden] {
    display: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-toggle svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, #059669, #047857);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    z-index: 12;
    width: min(330px, calc(100vw - 28px));
    max-height: 52dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid var(--line, #e1e5ec);
    border-radius: 16px;
    background: var(--panel, #fff);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.26);
    /* Keyframes propios: los de recorridosPanelIn terminan en un transform sin
       translateX y dejarian el panel descentrado, saliendose de la pantalla. */
    animation: flowgoSummaryIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes flowgoSummaryIn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  /* Punta que apunta al reproductor, para que se lea como un globo. */
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-pop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid var(--line, #e1e5ec);
    border-bottom: 1px solid var(--line, #e1e5ec);
    background: var(--panel, #fff);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-pop .recorridos-stats {
    animation: none;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-summary-pop h3 {
    margin: 0 0 9px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-map-empty {
    padding: 20px 18px 96px;
  }
}

/* ============================================================
   2. Telefono en horizontal
   Con menos de 500 px de alto una hoja inferior no deja ni mapa ni lista,
   asi que la tarjeta vuelve a la izquierda, mas angosta que en escritorio.
   ============================================================ */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-native {
    /* Sin hoja abajo: el mapa llega al borde y los creditos vuelven a su sitio. */
    --flowgo-sheet: 0px;
    --flowgo-sheet-min: 0px;
  }

  /* Aqui la tarjeta no se pliega; flowgo-mobile.js retira el asa al girar el
     telefono y esta regla cubre el instante entre el giro y ese aviso. */
  html[data-flowmo-mobile-navigation="enabled"] .flowgo-sheet-handle {
    display: none;
  }

  /* Sin gesto de arrastre, esas zonas vuelven a comportarse como siempre. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-brandbar,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-head {
    touch-action: auto;
    cursor: auto;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: calc(8px + env(safe-area-inset-left, 0px));
    width: 264px;
    height: auto;
    max-height: calc(100% - 16px);
    transition: none;
    padding-bottom: 0;
    border-radius: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 22px 55px -16px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  /* Aqui si flota sobre el mapa, asi que recupera el cristal de escritorio. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-devices-panel .localizadores-live-device {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(255, 255, 255, 0.68);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-live-map .leaflet-top.leaflet-left {
    left: calc(280px + env(safe-area-inset-left, 0px));
  }

  /* Hojas inferiores no funcionan con esta altura: modales centrados. */
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-overlay,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-overlay,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-overlay {
    align-items: center;
    padding: 8px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-details-panel,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-panel,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-panel {
    width: min(560px, 100%);
    max-height: 100%;
    border-radius: 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-body {
    grid-template-columns: 268px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-sidebar {
    max-height: none;
    border-right: 1px solid var(--line, #e1e5ec);
    border-bottom: 0;
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-select-panel {
    max-height: 60dvh;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-body {
    flex-direction: row;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-aside {
    flex: none;
    width: 264px;
  }
}

/* ============================================================
   3. Pantallas angostas (iPhone SE y similares)
   ============================================================ */
@media (max-width: 380px) and (pointer: coarse) and (orientation: portrait) {
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-detail-motor-btns {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-flowmo-mobile-navigation="enabled"] .recorridos-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .loc-camwall-close {
    width: 38px;
    height: 38px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .localizadores-add-heading p,
  html[data-flowmo-mobile-navigation="enabled"] .localizadores-grupo-heading p,
  html[data-flowmo-mobile-navigation="enabled"] .recorridos-heading p {
    font-size: 11.5px;
  }
}