/* =====================================================================
   movil.css — la cáscara de la app cuando la pantalla es angosta.

   REGLA QUE NO SE ROMPE: **todo** este archivo vive adentro del
   @media de abajo, y además cuelga de `body.movil`, que la pone
   movil.js con la MISMA consulta. O sea que en escritorio este archivo
   no puede cambiar ni un píxel, aunque tenga un error.

   Lo que hace, en una línea: el marco de cuatro zonas del escritorio
   (menú 30px + barra de trabajo 46px + sidebar 168px + statusbar 26px)
   se convierte en barra de arriba + mapa entero + navegación de abajo,
   y lo que se sacó del medio pasa a cajones y hojas.

   Ver docs/plan/producto/movil-web.md — fase 0 (cimientos), fase 1
   (cáscara de FTTH·MAP).
   ===================================================================== */

@media (max-width: 820px){

  :root{
    --mv-top: 52px;      /* barra de arriba */
    --mv-nav: 56px;      /* navegación de abajo, sin contar la zona segura */
    --mv-tap: 44px;      /* lo que pide Apple; Google pide 48dp */
    --mv-radio: 16px;    /* esquina de las hojas */
    --mv-segura: env(safe-area-inset-bottom, 0px);
  }

  /* ---------------------------------------------------------------
     0 · CIMIENTOS
     --------------------------------------------------------------- */

  /* 100dvh y no 100vh: en el navegador de un teléfono `vh` incluye la
     barra de direcciones, así que con 100vh la fila de abajo queda
     tapada justo cuando esa barra aparece o se va. */
  body.movil #app{
    grid-template-columns: 1fr;
    grid-template-rows: var(--mv-top) 1fr calc(var(--mv-nav) + var(--mv-segura));
    height: 100dvh;
    width: 100vw;
  }
  body.movil{ overscroll-behavior: none; }

  /* LA REGLA DE ORO. iOS acerca la página solo cuando se toca un campo
     con letra menor a 16px, y desde ahí lo que se ve deja de coincidir
     con lo que se toca: eso es "los campos son inexactos". No es un
     capricho de diseño, es el único número que apaga ese zoom. */
  body.movil input:not([type="checkbox"]):not([type="radio"]),
  body.movil select,
  body.movil textarea{
    font-size: 16px !important;
    min-height: 40px;
  }
  /* Las casillas también son puntos de toque: agrandarlas sin tocar el
     resto de la fila. */
  body.movil input[type="checkbox"],
  body.movil input[type="radio"]{ width:18px; height:18px; }

  /* ---------------------------------------------------------------
     1 · BARRA DE ARRIBA  (era #menubar)
     Los menús Archivo/Ver/Ayuda, las pestañas de sección y la cuenta
     se los lleva movil.js al cajón. Acá queda ☰ + buscador.
     --------------------------------------------------------------- */
  body.movil #menubar{
    grid-column: 1 / 2;
    grid-row: 1;
    height: var(--mv-top);
    gap: 10px;
    padding: 0 12px;
  }
  body.movil #menubar > .menu-item,
  body.movil #menubar > .menu-tabs,
  body.movil #menubar > #accountArea{ display: none; }

  /* El que se estira es el ENVOLTORIO: desde que el buscador es uno solo,
     #searchbox es el <input> de adentro y no la caja. */
  body.movil #dirBuscador{
    flex: 1;
    min-width: 0;
    width: auto;
    height: 36px;
    border-radius: 18px;
    padding: 0 14px;
  }

  #mvMenu{
    flex: none;
    width: var(--mv-tap); height: var(--mv-tap);
    margin-left: -10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; cursor: pointer;
  }
  #mvMenu i{ width: 19px; height: 2px; border-radius: 2px; background: var(--text); display: block; }

  /* ---------------------------------------------------------------
     2 · EL MAPA SE QUEDA CON LA PANTALLA
     --------------------------------------------------------------- */
  body.movil #map{ grid-column: 1 / 2; grid-row: 2; }
  body.movil #statusbar{ display: none; }          /* lo reemplaza la píldora */
  body.movil #sidebarResizer{ display: none; }     /* 7px no se agarran con el dedo */
  body.movil .leaflet-bottom{ bottom: 4px !important; }
  body.movil .leaflet-control-attribution{ font-size: 8px !important; }
  /* El selector de capas base queda solo arriba a la derecha (los
     botones de zoom se fueron abajo): que se pueda tocar. */
  body.movil .leaflet-control-layers-toggle{
    width: var(--mv-tap) !important; height: var(--mv-tap) !important; background-size: 22px 22px;
  }
  body.movil .leaflet-control-layers label{ min-height: 34px; display: flex; align-items: center; }

  /* Botones del mapa: acercar, alejar y dónde estoy.
     Los de Leaflet (app.js:1269, abajo a la derecha) miden 26×20 px —
     menos de la mitad de lo que pide el dedo— y encima le pelean el
     lugar a la atribución de OSM. Se ocultan y los reemplazan estos
     tres, que además suman el que en escritorio no hace falta: dónde
     estoy. Van abajo, que es donde llega el pulgar. */
  body.movil .leaflet-control-zoom{ display: none; }
  /* Debajo del botón de capas, que vive arriba a la derecha con 10px de
     margen y mide 44: 10 + 44 + 8 de aire. Los tres quedan en la misma
     columna, uno abajo del otro. */
  #mvMapaBotones{
    position: fixed; right: 10px; left: auto;
    top: calc(var(--mv-top) + 62px); bottom: auto;
    display: flex; flex-direction: column; gap: 8px; z-index: 1100;
  }
  /* Con un cajón abierto se van (quedarían debajo del velo y solo
     servirían para tocarlos sin querer). Dibujando SÍ se quedan: acercar
     antes de marcar un punto es justo lo que uno quiere hacer. */
  body.movil.mv-cajon-abierto #mvMapaBotones{ display: none; }
  #mvMapaBotones button{
    width: var(--mv-tap); height: var(--mv-tap);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--line); border-radius: 12px;
    color: var(--text); font-size: 20px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(4px);
    font-family: 'Inter', sans-serif; line-height: 1;
  }
  #mvMapaBotones button:active{ background: var(--panel-2); }
  #mvMapaBotones button svg{ width: 20px; height: 20px; }
  #mvMapaBotones button.buscando svg{ color: var(--drop); }

  /* Píldora de estado: es el statusbar, resumido a lo que se mira de
     verdad estando parado en la calle. */
  /* Arriba a la izquierda: a la derecha se montaba sobre el selector de
     capas de Leaflet, y abajo ahora están acercar/alejar/ubicar. Cuando
     se abre la columna de herramientas queda tapada, que está bien: en
     ese momento no se está mirando la coordenada. */
  #mvPildora{
    position: fixed; left: 62px; top: calc(var(--mv-top) + 12px); z-index: 1100;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 12px; font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; color: var(--text-dim); backdrop-filter: blur(4px);
    pointer-events: none;
  }

  /* El cartel de modo vive dentro del sidebar; movil.js lo saca a #app
     para que se vea con el cajón cerrado (si no, avisa adentro de un
     cajón que nadie tiene abierto). */
  body.movil #mode-banner{
    position: fixed; left: 10px; right: 10px; top: calc(var(--mv-top) + 64px);
    z-index: 1150; text-align: center; font-size: 12px;
  }

  /* ---------------------------------------------------------------
     3 · NAVEGACIÓN DE ABAJO
     --------------------------------------------------------------- */
  #mvNav{
    grid-column: 1 / 2; grid-row: 3;
    display: flex; align-items: flex-start;
    background: var(--menubar-bg); border-top: 1px solid var(--line);
    padding-bottom: var(--mv-segura);   /* la barra de gestos del iPhone tapa 34px */
    /* Encima del velo y de las hojas: la navegación es el punto fijo de la
       pantalla, siempre visible y siempre tocable. Por eso las hojas se
       paran SOBRE ella en vez de taparla. */
    z-index: 1480;
  }
  #mvNav button{
    flex: 1; height: var(--mv-nav);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 10px; font-family: 'Inter', sans-serif;
  }
  #mvNav button svg{ width: 20px; height: 20px; }
  #mvNav button.act{ color: var(--drop); }
  /* En solo vista (server/auth.js) las herramientas de dibujo ya no están:
     «Dibujar» abría una hoja vacía. Lo usa sobre todo el «Mapa GIS» de la
     app de campo, que siempre entra así. */
  body.mapa-solo-vista #mvNav button[data-mv="dibujar"]{ display: none; }

  /* Volver al mapa: aparece solo cuando está abierto SMARTLASER o
     ADMINISTRACIÓN, que ocupan toda la pantalla. */
  #mvVolver{
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(14px + var(--mv-segura)); z-index: 1300;
    display: none; align-items: center; gap: 7px;
    height: var(--mv-tap); padding: 0 20px; border-radius: 999px;
    background: var(--drop); border: none; color: #231000;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
  }
  body.movil.mv-otra-seccion #mvVolver{ display: flex; }
  body.movil.mv-otra-seccion #mvNav{ display: none; }
  body.movil.mv-otra-seccion #mvMapaBotones,
  body.movil.mv-otra-seccion #mvPildora{ display: none; }
  body.movil #smartLaserOverlay,
  body.movil #adminOverlay{ top: var(--mv-top); }

  /* ---------------------------------------------------------------
     4 · CAJONES  (sidebar de capas/proyectos, y menú)
     --------------------------------------------------------------- */
  #mvVelo{
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(4,10,22,.55); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .18s;
  }
  body.movil.mv-cajon-abierto #mvVelo{ opacity: 1; pointer-events: auto; }

  body.movil #sidebar,
  #mvCajon{
    position: fixed; top: 0; bottom: 0; width: min(86vw, 380px);
    z-index: 1500; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--panel); border-right: 1px solid var(--line);
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(24px + var(--mv-segura));
    transition: transform .22s ease;
  }
  body.movil #sidebar{ left: 0; transform: translateX(-101%); }
  body.movil #sidebar.mv-abierto{ transform: translateX(0); }
  #mvCajon{
    left: 0; transform: translateX(-101%); display: flex; flex-direction: column; gap: 16px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  #mvCajon::-webkit-scrollbar{ width: 0; }
  #mvCajon.mv-abierto{ transform: translateX(0); }

  #mvCajon .mv-cab{
    font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-dim); font-weight: 600;
  }
  /* Las pestañas de sección, grandes, arriba de todo. */
  #mvCajon .menu-tabs{ display: flex; flex-direction: column; gap: 8px; }
  #mvCajon .menu-tab{
    width: 100%; height: var(--mv-tap); border-radius: 10px; font-size: 13px;
    display: flex; align-items: center; padding: 0 14px;
    border: 1px solid var(--line);
  }
  #mvCajon .menu-tab.active{ border-color: transparent; }
  /* Archivo / Ver / Ayuda: en el teléfono no se despliegan con un clic,
     se muestran enteros. Así ningún manejador de app.js cambia y
     tampoco hace falta pelear con el `document.addEventListener('click')`
     que cierra los menús. */
  #mvCajon .menu-item{ border-top: 1px solid var(--line); padding-top: 12px; }
  #mvCajon .menu-item > button{
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 600; padding: 0 0 6px; pointer-events: none;
  }
  #mvCajon .menu-dropdown{
    display: block !important; position: static; min-width: 0;
    background: none; border: none; box-shadow: none; padding: 0;
  }
  #mvCajon .menu-dropdown button{
    min-height: var(--mv-tap); font-size: 13.5px; padding: 8px 10px;
    justify-content: flex-start; gap: 8px;
  }
  #mvCajon .menu-dropdown kbd{ display: none; }
  #mvCajon #accountArea{
    border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  }
  #mvCajon #accountArea button{ min-height: var(--mv-tap); padding: 0 14px; font-size: 13px; }

  /* El sidebar como cajón: mismas capas y mismo árbol, con renglones
     que se pueden tocar. */
  body.movil #sidebar .side-section h3{ font-size: 11px; }
  body.movil #sidebar .layer-row,
  body.movil #sidebar .tree-row{ min-height: var(--mv-tap); }
  body.movil #sidebar .tree-row{ font-size: 13px; }
  body.movil #sidebar .layer-row label{ font-size: 12.5px; }
  body.movil #sidebar .head-plus{ min-width: 32px; min-height: 32px; font-size: 15px; }

  /* ---------------------------------------------------------------
     5 · TIRA DE HERRAMIENTAS  (era la barra de trabajo)
     Ya no es un cajón que hay que abrir: vive SOBRE el mapa, pegada a
     la izquierda, siempre a la vista. Botones cuadrados de 44, solo el
     ícono — el nombre de la herramienta elegida lo dice la barra de
     abajo ("Poner Poste"), que es donde está el ojo al confirmar.

     Las propiedades del cable (tipo, hilos, distancia) no entran en 44px
     de ancho: se van a una tira horizontal arriba de la barra de dibujo,
     y solo aparecen cuando hay un cable elegido.
     --------------------------------------------------------------- */
  body.movil #toolbar{
    position: fixed; left: 8px; right: auto;
    top: calc(var(--mv-top) + 10px); bottom: auto;
    width: auto; height: auto; max-height: none;
    z-index: 1100;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: flex-start; gap: 6px;
    padding: 0; background: none; border: none; box-shadow: none;
    border-radius: 0; overflow: visible;
    transform: none;                 /* siempre puesta */
    /* app.css:174 le pone container-type:inline-size para su "container
       query" de escritorio (la que achica los botones cuando la barra
       queda corta). Acá eso rompe dos cosas de una: el ancho deja de
       depender del contenido —la tira medía 0— y el elemento pasa a ser
       el marco de referencia de sus hijos position:fixed, así que las
       propiedades del cable quedaban de 24px adentro de la tira en vez
       de cruzar la pantalla. */
    container-type: normal;
  }
  /* La navegación de abajo la puede esconder, para mirar el mapa limpio. */
  body.movil.mv-sin-herramientas #toolbar{ display: none; }

  /* La caja de la tira es MUCHO más grande que lo que se ve: el buscador
     la estira a 274 px de ancho y la columna de herramientas a 490 de
     alto, pero de eso solo se ven una columna de 44 px y el campo. El
     resto era caja transparente que igual se comía el toque: barriendo el
     centro del mapa a 390x844, entre y≈137 e y≈552 el elemento de arriba
     era #toolbar y no #map (medido el 2026-09-07), así que en media
     pantalla no se podía tocar nada — ni un vértice, ni una caja, ni un
     cable. Es la misma caja que anotó probar-arrastre-movil.js.
     El contenedor deja de recibir el toque; sus hijos —que son los que se
     ven— lo siguen recibiendo. */
  body.movil #toolbar{ pointer-events: none; }
  body.movil #toolbar > *{ pointer-events: auto; }

  body.movil #toolbar .tb-sep{ display: none; }
  body.movil #toolbar .tb-group{
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; width: auto;
  }

  body.movil .tool-btn,
  body.movil .cable-btn{
    width: var(--mv-tap); height: var(--mv-tap);
    min-height: var(--mv-tap); padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--line);
    backdrop-filter: blur(4px);
    font-size: 0;                    /* fuera el nombre, queda el ícono */
  }
  body.movil .tool-btn > span{ display: none; }
  body.movil .tool-btn .ic{ width: 22px; height: 22px; }
  body.movil .tool-btn .ic svg{ width: 100%; height: 100%; }
  /* El tipo de cable se reconoce por su trazo: más grueso y más ancho
     que en la barra del escritorio, que ahí iba al lado del nombre. */
  body.movil .cable-btn .cable-swatch{
    width: 24px; margin: 0; border-top-width: 4px;
  }

  /* Las propiedades del cable: tira horizontal sobre la barra de dibujo,
     y solo con un cable en la mano. */
  body.movil #toolbar #cableProps{
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--mv-nav) + var(--mv-segura));
    z-index: 1435;
    display: none;
    align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--panel); border-top: 1px solid var(--line);
    overflow-x: auto; white-space: nowrap;
    scrollbar-width: none;
  }
  body.movil #toolbar #cableProps::-webkit-scrollbar{ height: 0; }
  body.movil.mv-cable.mv-dibujando #toolbar #cableProps{ display: flex; flex-direction: row; }
  /* Con las propiedades puestas, la barra de dibujo sube para dejarles
     su renglón. */
  body.movil.mv-cable.mv-dibujando #mvDibujo{
    bottom: calc(var(--mv-nav) + var(--mv-segura) + 62px);
  }
  body.movil #cableProps label{ display: flex; align-items: center; gap: 6px; flex: none; font-size: 11px; }
  body.movil #cableProps select,
  body.movil #cableProps input{ width: auto; min-width: 92px; flex: none; }

  /* ---------------------------------------------------------------
     5b · LA MIRA Y LA BARRA DE DIBUJO  (fase 2, movil-mira.js)
     El dedo tapa el punto: por eso el punto lo marca una cruz fija en
     el centro del mapa y lo confirma un botón. La cruz NO recibe
     toques (pointer-events:none) — el mapa se sigue arrastrando y
     pellizcando por encima de ella.
     --------------------------------------------------------------- */
  #mvMira{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 650;                /* sobre los paneles de Leaflet (400), bajo sus controles (800) */
    pointer-events: none;
    width: 64px; height: 64px;
    opacity: 0; transition: opacity .15s;
  }
  #mvMira.mv-visible{ opacity: 1; }
  #mvMira .mv-mira-base{ width: 64px; height: 64px; display: block; }
  /* La forma de la herramienta, adentro del aro. El aro y la cruz se
     quedan naranjas siempre —son la mira— y lo de adentro toma el color
     del tipo, que es como se reconocen en el mapa y en la tira. */
  .mv-mira-forma{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    /* 24 adentro de un aro de 34 de diámetro: lo más grande que entra
       sin comerse el borde. A 20 la herramienta no se distinguía. */
    width: 24px; height: 24px;
  }
  .mv-mira-forma svg{ width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 0 2px rgba(4,10,22,.9)); }
  /* Con una herramienta en la mano, el puntito del centro sobra: lo
     reemplaza la forma. */
  #mvMira.mv-con-forma .mv-mira-punto{ display: none; }
  .mv-mira-aro{ fill: rgba(255,122,41,.10); stroke: var(--drop); stroke-width: 1.6; }
  .mv-mira-punto{ fill: var(--drop); }
  .mv-mira-cruz path{ stroke: var(--drop); stroke-width: 1.6; stroke-linecap: round; }
  /* Un halo oscuro detrás para que la cruz se lea igual sobre un techo
     blanco a pleno sol. */
  #mvMira svg{ filter: drop-shadow(0 0 3px rgba(4,10,22,.85)); }

  #mvDibujo{
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--mv-nav) + var(--mv-segura));
    z-index: 1440;
    background: var(--panel); border-top: 1px solid var(--line);
    border-radius: var(--mv-radio) var(--mv-radio) 0 0;
    padding: 12px 13px 14px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
    transform: translateY(calc(101% + var(--mv-nav)));
    transition: transform .2s ease;
  }
  #mvDibujo.mv-visible{ transform: translateY(0); }
  .mv-dib-info{
    display: flex; align-items: baseline; gap: 10px;
    font-size: 12px; color: var(--text-dim);
    padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--line);
    min-height: 17px;
  }
  .mv-dib-info b{ margin-left: auto; color: var(--drop); font-weight: 600; white-space: nowrap; }
  #mvDibujo button{
    font-family: 'Inter', sans-serif; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--line);
    background: var(--panel-2); color: var(--text);
  }
  .mv-dib-primario{
    width: 100%; height: 46px; font-size: 14px; font-weight: 600;
    background: var(--drop) !important; border-color: var(--drop) !important; color: #241000 !important;
  }
  .mv-dib-fila{ display: flex; gap: 8px; margin-top: 8px; }
  .mv-dib-fila button{ flex: 1; min-height: var(--mv-tap); font-size: 13px; }
  .mv-dib-fila button[hidden]{ display: none; }
  .mv-dib-fila button:disabled{ opacity: .38; }
  .mv-dib-x{ flex: 0 0 52px !important; font-size: 16px !important; color: var(--text-dim) !important; }

  /* Mientras se dibuja, fuera todo lo que tape el mapa o compita por el
     pulgar: los botones del mapa y la píldora vuelven al soltar. */
  body.movil.mv-dibujando #mvPildora{ display: none; }

  /* Y fuera también el cartel de modo: sus textos están escritos para un
     mouse ("clic en el nuevo destino", "doble clic para terminar", "Esc
     cancela") y en un teléfono no existe ninguna de las tres cosas. Lo
     que hay que hacer ya lo dice la barra de abajo, con botones. */
  body.movil.mv-dibujando #mode-banner{ display: none !important; }

  /* Cuando el ✕ queda solo (moviendo un elemento), que ocupe la fila en
     vez de ser un botoncito perdido en una esquina. */
  #mvDibujo.mv-solo-cancelar .mv-dib-x{ flex: 1 !important; font-size: 13px !important; }

  /* El globito que en escritorio sigue al cursor no tiene dónde pararse
     sin cursor: su texto ("saliendo de X") ya lo muestra la barra. */
  body.movil #nodeHoverTip{ display: none !important; }

  /* Los vértices de una ruta miden 10px. Un aro invisible de 44 los
     vuelve agarrables sin cambiar cómo se ven — Leaflet ya los sabe
     arrastrar con el dedo, lo que faltaba era poder acertarles. */
  body.movil .vertex-handle{ overflow: visible; }
  body.movil .vertex-handle::after{
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: var(--mv-tap); height: var(--mv-tap); border-radius: 50%;
  }
  /* La barra de editar vértices se para sobre la navegación, como las
     demás hojas, en vez de quedar flotando en el medio del mapa. */
  body.movil #vertexEditBar{
    left: 0; right: 0; bottom: calc(var(--mv-nav) + var(--mv-segura)); top: auto;
    transform: none; width: auto; border-radius: var(--mv-radio) var(--mv-radio) 0 0;
    flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 13px;
    z-index: 1445;
  }
  body.movil #vertexEditBar button{ min-height: var(--mv-tap); min-width: var(--mv-tap); font-size: 13px; }
  body.movil #vertexEditInfo{ width: 100%; text-align: center; font-size: 12px; }

  /* ---------------------------------------------------------------
     6 · LA FICHA, COMO HOJA DE ABAJO
     El transform !important desactiva el arrastre del título
     (makeDraggableByHandle en app.js escribe transform en línea): en
     una hoja pegada abajo, mover el panel solo sirve para perderlo.
     --------------------------------------------------------------- */
  body.movil #detail{
    top: auto; right: 0; left: 0; width: auto;
    bottom: calc(var(--mv-nav) + var(--mv-segura));
    max-height: 72dvh;
    border-radius: var(--mv-radio) var(--mv-radio) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 22px 16px 16px;
    transform: none !important;
    z-index: 1460;
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  body.movil #detail::before{            /* tirador, igual que la hoja de herramientas */
    content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--line);
  }
  body.movil #detail h4{ font-size: 16px; cursor: default !important; padding-right: 40px; }
  body.movil #detail label{ font-size: 11.5px; }
  body.movil #closeDetail{ width: var(--mv-tap); height: var(--mv-tap); font-size: 20px; top: 8px; right: 6px; }
  body.movil .chain-svg{ width: calc(100% - 26px); margin-inline: auto; }
  body.movil #detail .detail-actions{ display: flex; gap: 10px; padding-top: 12px; }
  body.movil #detail .detail-actions button{ flex: 1; min-height: var(--mv-tap); font-size: 14px; }
  body.movil #detail #saveBtn{ flex: 2; }
  /* "Mover" (lo agrega movil-mira.js): el doble clic del escritorio, hecho
     botón. Va primero porque es lo que más se usa en la calle. */
  body.movil #detail #mvMover{
    background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius: 6px; font-family: 'Inter', sans-serif; cursor: pointer;
  }

  /* ---------------------------------------------------------------
     7 · VENTANAS A PANTALLA COMPLETA
     Adelanto barato de la fase 3: sin esto, cualquier modal medido en
     píxeles de escritorio (980, 920, 760) se sale de la pantalla y
     deja el botón Guardar fuera de alcance. Las tablas anchas ya
     desplazan de costado dentro de su caja.
     --------------------------------------------------------------- */
  body.movil #usersModal,
  body.movil #napClientsModal,
  body.movil #kmzImportModal,
  body.movil #spliceModal{
    width: 100vw !important; max-width: 100vw;
    height: 100dvh !important; max-height: 100dvh;
    border-radius: 0; border: none;
    left: 0 !important; top: 0 !important; transform: none !important;
  }
  body.movil .sp-resize{ display: none; }        /* tiradores de 7px */
  body.movil #spliceHeader{ cursor: default; }
  body.movil .uf-row{ grid-template-columns: 1fr; }   /* formularios a una columna */
  body.movil #usersToolbar{ padding: 12px 14px 0; }
  body.movil .users-link,
  body.movil .splice-pdf-btn,
  body.movil .layer-export-btn{ min-height: 40px; font-size: 13px; }
  /* La ventana entera se desplaza, y las tablas quedan acotadas: si la
     tabla se lleva todo el alto, el formulario de abajo —y con él el
     botón Guardar— se va de la pantalla y no hay forma de llegarle. */
  /* display:block y no flex: en columna flexible la tabla y el
     formulario se peleaban el alto y la tabla quedaba en una franja de
     20px. Así cada pieza mide lo suyo y la ventana entera se desplaza. */
  body.movil #usersModal,
  body.movil #napClientsModal,
  body.movil #kmzImportModal{ display: block; overflow-y: auto; }
  body.movil #usersHeader,
  body.movil #napClientsHeader,
  body.movil #kmzImportHeader{
    position: sticky; top: 0; z-index: 5; background: var(--panel);
  }
  body.movil #usersTableWrap,
  body.movil #napClientsTableWrap,
  body.movil #napConnectedWrap{ max-height: 44dvh; overflow: auto; }
  /* Y los botones del formulario se quedan pegados abajo mientras se
     desplaza, que es donde hay que poder apretarlos siempre. */
  body.movil .uf-actions{
    position: sticky; bottom: 0; background: var(--panel);
    padding: 10px 0 calc(6px + var(--mv-segura)); margin-top: 4px;
  }
  body.movil .uf-actions button{ flex: 1; min-height: var(--mv-tap); }
  body.movil #photoLightbox img{ max-width: 96vw; }
  /* Los tiradores de la barra de vértices, a dedo (deshacer, rehacer,
     imán y la papelera nueva). */
  body.movil #vertexEditBar .veb-icon{ min-width: var(--mv-tap); min-height: var(--mv-tap); }
  /* Y el vértice en sí: el punto mide 12 px, que es lo que hace legible
     una ruta de veinte vértices, pero 12 px no se agarran con el pulgar.
     El aro va como ::before transparente y NO agrandando el ícono: el
     iconAnchor de Leaflet está calculado sobre 12x12 en app.js, y
     agrandarlo correría el dibujo respecto de la ruta. Es el aro de 44
     que pedía la fase 2 de movil-web.md. */
  body.movil .vertex-handle{ position: relative; }
  body.movil .vertex-handle::before{
    content: ''; position: absolute;
    inset: calc((var(--mv-tap) - 12px) / -2);
  }
  body.movil .vertex-handle.mid::before{
    inset: calc((var(--mv-tap) - 10px) / -2);
  }

  /* ---------------------------------------------------------------
     8bis · EL VISOR DE EMPALMES EN SOLO LECTURA
     Lo prende y lo apaga el botón «✎ Editar» que crea movil.js. Se
     apagan los blancos del empalme —los puntos de fibra y las líneas—
     y nada más: desplazar, pellizcar, mirar una ficha y descargar el
     PDF siguen andando. Así no hay una sola rama nueva en app.js.
     --------------------------------------------------------------- */
  body.movil #spliceModal.sp-solo-lectura .fiber-dot,
  body.movil #spliceModal.sp-solo-lectura .splice-link{ pointer-events: none; }
  body.movil #mvEditar.mv-editando{
    background: var(--drop); border-color: var(--drop); color: #201004;
  }

  /* La mufa modular en el teléfono NO vive acá: está en mufa-modular.css,
     que es la hoja propia del módulo y la comparten los tres hosts — la
     app, mufa-preview.html y la demo pública /mufa/. Esta hoja depende de
     la clase `body.movil`, que la pone movil.js, y movil.js no corre en la
     demo (mueve el menubar y el sidebar de la app, que ahí no existen). */

  /* ---------------------------------------------------------------
     9 · «GIRÁ EL TELÉFONO» (visor de empalmes, movil-web fase 4)
     Lo crea movil.js y lo prende/apaga con la clase .ver: de pie se
     ve, acostado desaparece solo. No ocupa lugar cuando no se ve
     —display:none— para no robarle alto al diagrama.
     --------------------------------------------------------------- */
  body.movil .mv-girar{
    display: none;
    align-items: center; gap: 8px;
    padding: 8px 10px 8px 14px;
    background: rgba(56,189,248,.10);
    border-bottom: 1px solid var(--line);
    color: #7dd3fc; font-size: 12px; line-height: 1.35;
  }
  body.movil .mv-girar.ver{ display: flex; }
  body.movil .mv-girar span{ flex: 1; }
  body.movil .mv-girar button{
    flex: 0 0 auto; width: 32px; height: 32px;
    background: none; border: none; color: #7dd3fc;
    font-size: 15px; cursor: pointer;
  }
}