/* ══════════════════════════════════════════════════════════════════════════════════
   movil-comun.css — LO COMÚN DEL TELÉFONO (2026-10-05, mockups móviles aprobados por Jair)

   La barra inferior con rótulos que sustituye al panal en el teléfono, la hoja inferior
   `BeeHoja` que usan «Más», Proyectos y el PUP, los flotantes que suben por encima de la
   barra y la safe-area del iPhone. Se carga DESPUÉS de bee-theme.css en las 22 páginas
   con chasis.

   ⚠️ POR QUÉ NO VIVE EN bee-theme.css. La hoja base tiene once bloques del teléfono
   repartidos por el archivo, ARRIBA de reglas de escritorio de la misma especificidad: una
   regla móvil nueva que empate con una de escritorio escrita después pierde por orden y
   queda inerte sin un aviso (pasó tres veces: gotcha `interfaz-en-el-telefono`). Aquí todo
   lo del teléfono va CALIFICADO —`body.app[data-nav="panal"] …`, `#bee-tabbar …`,
   `.modal-backdrop.bee-hoja-bd …`— para ganar por especificidad, no por la suerte del orden.

   ⚠️ UN SOLO CORTE: `max-width: 760px`, el mismo de toda la app. Nunca `min-width: 761px`
   (rendija de 760,5 px con zoom).

   ⚠️ EL ESCRITORIO NO CAMBIA: la barra sólo existe en el DOM del teléfono (bee-panal.js la
   monta con el corte y la desmonta al cruzarlo) y las reglas de abajo que no van dentro
   del @media sólo tocan nodos que el escritorio no tiene, o valen cero ahí (`env()`).
   ══════════════════════════════════════════════════════════════════════════════════ */

/* LA MARCA DE QUE ESTA HOJA CARGÓ. bee-panal.js sólo monta la barra si lee `1` aquí: en el
   relevo del service worker puede llegar el JS nuevo con la hoja vieja, y una barra sin su
   estilo saldría como una lista de enlaces encima de la página.
   `--bee-tabbar-h` vale 0 hasta que la barra existe; con ella, bee-panal.js publica su alto
   MEDIDO (con la safe-area) y de ahí cuelgan la reserva del contenido y los flotantes. */
:root { --movil-comun: 1; --bee-tabbar-h: 0px; }

/* SAFE-AREA. Con `viewport-fit=cover` (necesario para que la barra no quede bajo el indicador
   de inicio del iPhone) la página entera se extiende bajo la muesca y el indicador: en
   HORIZONTAL (donde el ancho ya pasa de 760 y manda la disposición de escritorio), en la PWA
   instalada y en el iPad. `env()` vale 0 en cualquier pantalla sin muesca, así que en
   escritorio nada de esto mueve un píxel ni cambia un estilo calculado (0px = 0px).
   ⚠️ Lo que vive fuera del corte es una LISTA CERRADA que vigila front.movil-nav: nodos que el
   escritorio no tiene (BeeHoja, la barra), la marca de `:root`, o márgenes y rellenos hechos
   SÓLO de `env(safe-area-inset-*)` sobre elementos a los que la casa no pone ese margen.

   El contenido: con el panal, `.app-main` arranca en x=0 y se aparta de la muesca por los dos
   lados. Con el menú lateral el que está pegado a la izquierda es el RAIL (un flex item
   pegajoso, no un fijo): se aparta él con su margen y empuja a `.app-main`, que entonces sólo
   se aparta por la derecha (si también lo hiciera por la izquierda, contaría la muesca dos
   veces). */
body.app .app-main { padding-right: env(safe-area-inset-right); }
body.app:not([data-nav="sidebar"]) .app-main { padding-left: env(safe-area-inset-left); }
body.app[data-nav="sidebar"] bee-navbar { margin-left: env(safe-area-inset-left); }

/* LA CHROME FIJA (panal, lupa, «Colapsar», dock, burbuja de exportar, burbuja de la lupa, chip
   de red): se aparta con MÁRGENES, no reescribiendo su `left/right/bottom`. Cada flotante tiene
   media docena de posiciones según la pantalla, el modo y el editor (bee-theme.css,
   movil-pup.css) y copiarlas todas para sumarles `env()` era abrir media docena de empates. El
   margen se suma a la posición que gane, sea cual sea: en un fijo, `bottom` mide hasta el borde
   del MARGEN, así que `margin-bottom: env(…)` lo sube justo eso; y el margen del lado al que NO
   está anclado (`left: auto`) no lo mueve. Ninguna regla de la casa les pone margen (medido).
   La píldora del menú lateral va centrada con `left: 50%`: sólo sube. */
body.app .bee-panal,
body.app #bee-lookup-btn,
body.app .qt-collapse-fab,
body.app #bee-dock,
body.app .bee-export,
body.app #bee-lookup,
body.app #bee-net {
  margin: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.app[data-nav="sidebar"] #bee-pill { margin-bottom: env(safe-area-inset-bottom); }


/* ══ BeeHoja — LA HOJA INFERIOR ═════════════════════════════════════════════════════
   Un `.modal-backdrop` con un `.modal` dentro (ver bee-panal.js): hereda trampa de foco,
   Escape, el toque que empezó en el fondo y la recesión de los flotantes. Aquí sólo se le
   cambia la FORMA: pegada abajo, a todo lo ancho, con las esquinas de arriba redondeadas.
   Fuera de todo @media porque sólo el teléfono la abre. */
.modal-backdrop.bee-hoja-bd { place-items: end stretch; padding: 0; }

/* Ancho DEFINIDO (100 %, no `min()`): un modal con una tabla ancha crece a su min-content y
   empuja la página de lado (gotcha `interfaz-en-el-telefono` §«Un modal con una tabla ancha»).
   `dvh` y no `vh`: en el teléfono la barra del navegador se come el vh y la hoja se cortaba
   abajo. `overscroll-behavior` evita que el gesto que llega al fondo arrastre la página. */
.modal-backdrop.bee-hoja-bd > .modal.bee-hoja {
  width: 100%; max-width: none; min-width: 0;
  max-height: 92vh; max-height: 92dvh;
  border-radius: var(--r3) var(--r3) 0 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: auto; overscroll-behavior: contain;
  animation: bee-hoja-in 200ms var(--ease-out);
}
@keyframes bee-hoja-in { from { opacity: 0; transform: translateY(16px); } }

/* Al cerrar baja un poco en vez de encogerse (la regla de los modales la escala). */
.modal-backdrop.bee-hoja-bd.closing > .modal.bee-hoja { transform: translateY(12px); }

/* Reducir movimiento = quitar el DESPLAZAMIENTO y conservar el fundido. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.bee-hoja-bd > .modal.bee-hoja { animation-name: fade-in; }
  .modal-backdrop.bee-hoja-bd.closing > .modal.bee-hoja { transform: none; }
}

/* El asa: dice «esto se desliza desde abajo», nada más (no arrastra). */
.modal.bee-hoja .bee-hoja-asa {
  flex: none; width: 36px; height: 4px; margin: 8px auto 2px;
  border-radius: 999px; background: var(--line-2);
}

/* La cabecera se queda a la vista mientras el cuerpo se desplaza: la ✕ no puede irse. */
.modal.bee-hoja .bee-hoja-h {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 6px 2px 16px; background: var(--panel);
}
.modal.bee-hoja .bee-hoja-t {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-head); font-variation-settings: 'wdth' 110, 'wght' 700;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.008em; text-transform: none;
}
/* 44 px de blanco: el cerrar de los modales mide 30 y en el dedo no alcanza. */
.modal.bee-hoja .bee-hoja-h .icon-btn[data-close] { flex: none; width: 44px; height: 44px; }

.modal.bee-hoja .bee-hoja-cuerpo { min-width: 0; padding: 2px 8px 12px; }

.modal.bee-hoja .bee-hoja-sec + .bee-hoja-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
/* `--muted` y no `--faint`: el rótulo de sección se LEE, y `--faint` reprueba AA. */
.modal.bee-hoja .bee-hoja-sec-t {
  padding: 10px 10px 6px;
  font-family: var(--font-head); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* LA FILA. Un `button` hereda del global las ALTAS, el tracking y 0.7rem: aquí van nombres
   propios (un cliente, una sección), así que se devuelve todo a texto de lectura. */
.modal.bee-hoja .bee-hoja-fila {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 8px 10px; margin: 0;
  border: 0; border-radius: var(--r2); background: none;
  color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease-out);
}
.modal.bee-hoja .bee-hoja-fila:active { background: var(--panel-2); }
@media (hover: hover) and (pointer: fine) {
  .modal.bee-hoja .bee-hoja-fila:hover { background: var(--panel-2); }
}
.modal.bee-hoja .bee-hoja-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal.bee-hoja .bee-hoja-fila .f-ico {
  flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; color: var(--muted);
}
.modal.bee-hoja .bee-hoja-fila .f-ico:empty { display: none; }
.modal.bee-hoja .bee-hoja-fila .f-ico svg { width: 22px; height: 22px; }
.modal.bee-hoja .bee-hoja-fila .f-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modal.bee-hoja .bee-hoja-fila .f-et { line-height: 1.25; text-transform: none; overflow-wrap: anywhere; }
.modal.bee-hoja .bee-hoja-fila .f-sub { font-size: 0.78rem; font-weight: 400; line-height: 1.3; color: var(--muted); text-transform: none; }
.modal.bee-hoja .bee-hoja-fila .f-sub:empty { display: none; }
/* «Estás aquí» (ley del ámbar): el ícono en ámbar y un velo del mismo tono. El RÓTULO no se
   pinta de ámbar: en el tema claro el ámbar como texto no llega ni a 2:1. */
.modal.bee-hoja .bee-hoja-fila.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.modal.bee-hoja .bee-hoja-fila.on .f-ico { color: var(--accent); }
.modal.bee-hoja .bee-hoja-fila.on .f-et { font-weight: 700; }
.modal.bee-hoja .bee-hoja-fila.peligro,
.modal.bee-hoja .bee-hoja-fila.peligro .f-ico { color: var(--danger); }
.modal.bee-hoja .bee-hoja-fila.off { opacity: 0.45; cursor: default; }
/* Una fila que espera red acusa recibo con la misma rueda que `.icon-btn.is-busy`: «no pasa
   nada» y «está cargando» no pueden verse igual. */
.modal.bee-hoja .bee-hoja-fila.is-busy { pointer-events: none; }
.modal.bee-hoja .bee-hoja-fila.is-busy::after {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent;
  animation: bl-spin 0.7s linear infinite;
}

/* «Más» en dos columnas: diecisiete accesos en una sola columna no caben sin desplazar. */
.modal.bee-hoja.bee-mas .bee-hoja-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.modal.bee-hoja.bee-mas .bee-hoja-sec-t { grid-column: 1 / -1; }


/* ══ LA BARRA INFERIOR ══════════════════════════════════════════════════════════════
   Fuera del teléfono no se pinta nunca, aunque un nodo sobreviviera al cruce del corte. */
#bee-tabbar { display: none; }

/* Chrome PERSISTENTE entre páginas: sin nombre propio caería en la foto de `root` y haría
   fundido en cada navegación. La receta de TRES reglas del panal (gotcha `interfaz-y-css`
   §«Del panal»): sin animación de grupo, sin foto vieja, la nueva estática. */
#bee-tabbar { view-transition-name: bee-tabbar; }
::view-transition-group(bee-tabbar) { animation: none; }
::view-transition-old(bee-tabbar) { display: none; }
::view-transition-new(bee-tabbar) { animation: none; opacity: 1; }

@media (max-width: 760px) {
  /* z 90: por DEBAJO de los modales y las hojas (100) y del velo del recorrido (9000), que
     la tapan solos sin sumarla a ninguna lista de recesión. Por encima del contenido. */
  body.app[data-nav="panal"] #bee-tabbar {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--panel-2); border-top: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--luz);
  }
  body.app[data-nav="panal"] #bee-tabbar .bt-tab {
    flex: 1 1 0; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    margin: 0; padding: 7px 2px 6px;
    border: 0; border-radius: 0; background: none; color: var(--muted);
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 120ms var(--ease-out);
  }
  /* Una barra de pestañas no se encoge al tocarla (el «press» global de los botones). */
  body.app[data-nav="panal"] #bee-tabbar .bt-tab:active { transform: none; color: var(--ink); }
  body.app[data-nav="panal"] #bee-tabbar .bt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  body.app[data-nav="panal"] #bee-tabbar .bt-ico { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; }
  body.app[data-nav="panal"] #bee-tabbar .bt-ico svg { width: 22px; height: 22px; }
  body.app[data-nav="panal"] #bee-tabbar .bt-et {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-head); font-variation-settings: 'wdth' 100;
    font-size: 10px; font-weight: 600; line-height: 1.1;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  /* Medido: «PROYECTOS» ocupa 70 px con este ancho de letra y este tracking, y la pestaña
     mide un quinto de la pantalla menos su relleno — no cabe por debajo de ~372 px (360 de
     muchos Android, 320 del iPhone SE viejo) y se cortaba en «PROYECT…». Ahí la letra se
     aprieta al ancho 88 del sistema (`--wdth-apretado`) y pierde relleno lateral. */
  @media (max-width: 380px) {
    body.app[data-nav="panal"] #bee-tabbar .bt-tab { padding-left: 0; padding-right: 0; }
    body.app[data-nav="panal"] #bee-tabbar .bt-et { font-variation-settings: 'wdth' 88; letter-spacing: 0.04em; }
  }
  /* «Estás aquí»: la ley del ámbar. La pestaña de Avisos se enciende igual mientras su
     popover está abierto (`marks()` de bee-auth.js pone `.on`, como en el panal). */
  body.app[data-nav="panal"] #bee-tabbar .bt-tab.on { color: var(--accent); }
  /* En el tema claro el ámbar como TEXTO no llega a 2:1 sobre el alza: el rótulo vuelve a la
     tinta y la pestaña lleva su filete ámbar arriba. */
  html[data-theme="light"] body.app[data-nav="panal"] #bee-tabbar .bt-tab.on { box-shadow: inset 0 2px 0 var(--accent); }
  html[data-theme="light"] body.app[data-nav="panal"] #bee-tabbar .bt-tab.on .bt-et { color: var(--ink); }
  /* El globito de Avisos, gemelo del `.bp-badge` del panal (mismo número, tope «10+»). */
  body.app[data-nav="panal"] #bee-tabbar .bt-badge {
    position: absolute; top: -5px; left: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
    background: var(--danger); color: #fff;
    font-family: var(--font-head); font-size: 9px; font-weight: 800; letter-spacing: 0; line-height: 1;
    box-shadow: 0 0 0 2px var(--panel-2);
    pointer-events: none;
  }
  /* `[hidden]` pierde contra el `inline-flex` de arriba: sin `!important` el globito diría «0». */
  body.app[data-nav="panal"] #bee-tabbar .bt-badge[hidden] { display: none !important; }
  /* El de «Autorizar» (2026-10-08, mockup `home.png`): la misma forma, en AZUL, el de la bandeja —es
     trabajo que espera, no una alarma (el rojo es de Avisos)—, con la cifra en el color del fondo de
     la página, que en los dos temas contrasta con su azul. Otra CLASE y no `.bt-badge`: el `setBadge`
     de Avisos pinta todo `.bt-badge` de la barra, y este número no es el de Avisos. */
  body.app[data-nav="panal"] #bee-tabbar .bt-badge-aut {
    position: absolute; top: -5px; left: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
    background: var(--info); color: var(--bg);
    font-family: var(--font-head); font-size: 9px; font-weight: 800; letter-spacing: 0; line-height: 1;
    box-shadow: 0 0 0 2px var(--panel-2);
    pointer-events: none;
  }
  body.app[data-nav="panal"] #bee-tabbar .bt-badge-aut[hidden] { display: none !important; }

  /* EN LUGAR DEL PANAL: con la barra montada el panal no se pinta (le gana a `.bee-panal`).
     ⚠️ «Con la barra montada» es la clase `con-tabbar` que bee-panal.js pone y quita JUNTO con
     el nodo `#bee-tabbar`, y no `:has(#bee-tabbar)`: Safari < 15.4 descarta ENTERA una regla
     con `:has()`, y ahí se pintaban el panal y la barra a la vez. */
  body.app[data-nav="panal"].con-tabbar #bee-panal { display: none; }

  /* En el editor del PUP (`body.qt-fs`) la barra cede su sitio a la barra de pulgar del PUP;
     su alto medido baja a 0 y con él todo lo que se apoyaba en ella. */
  body.app[data-nav="panal"].qt-fs #bee-tabbar { display: none; }

  /* LA RESERVA: que lo último de la página no quede debajo de la barra. Le gana a la de
     88 px del panal (`bee-theme.css`, 0-2-2) por especificidad (0-4-2). Fuera del editor del
     PUP: ahí la barra no se ve y la reserva es de su barra de pulgar. */
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar main.content { padding-bottom: calc(var(--bee-tabbar-h, 64px) + 16px); }

  /* LOS FLOTANTES, fuera del editor. La lupa ⌘B no flota: su esquina es la del «Nuevo
     proyecto» y vive en «Más» («Consultar costos»). El dock de recientes cruza a la esquina
     izquierda, encima de la barra; al mudarlo se ANULA el eje que abandona (`right: auto`):
     un flotante con left Y right se va al lado contrario sin avisar. */
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar #bee-lookup-btn { display: none; }
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar #bee-dock {
    right: auto; left: 10px; bottom: calc(var(--bee-tabbar-h, 0px) + 10px); align-items: flex-start;
  }
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar .bee-export { bottom: calc(var(--bee-tabbar-h, 0px) + 10px); }
  /* La burbuja del PDF va de borde a borde (bee-theme.css) y se queda hasta que la cierras: al
     salir del editor a «PUPs del proyecto» el dock aparecía en la MISMA esquina, debajo de ella,
     y el PUP recién minimizado no se podía reabrir (medido a 375 px el 2026-10-05). Sube por
     encima del dock: 44 px por pestaña + 8 de hueco, y el dock guarda hasta DOS. El dock sólo
     existe con pestañas (bee-auth.js lo quita vacío), así que su presencia es la condición. */
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar:has(#bee-dock) .bee-export.bx-pdf { bottom: calc(var(--bee-tabbar-h, 0px) + 62px); }
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar:has(#bee-dock > .bee-dock-tab + .bee-dock-tab) .bee-export.bx-pdf { bottom: calc(var(--bee-tabbar-h, 0px) + 114px); }
  /* El dock CEDE ante el popover de Avisos/Favoritos: en el teléfono los dos viven abajo y el
     popover ocupa el ancho, y el dock (z 9998) le tapaba una esquina por encima (9997) — en la
     lista con la barra y en el editor del PUP (medido a 375 px el 2026-10-05). En escritorio no
     se cruzan (el popover cuelga del panal, a la izquierda) y la regla no vive ahí. */
  body.app:has(#bee-pill-panel:not([hidden])) #bee-dock { opacity: 0; pointer-events: none; }
  /* La burbuja de la lupa, abierta desde «Más»: se apoya encima de la barra, y sin la cola
     que apuntaba a un botón que en el teléfono ya no está ahí. */
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar #bee-lookup { bottom: calc(var(--bee-tabbar-h, 0px) + 12px); }
  body.app[data-nav="panal"]:not(.qt-fs).con-tabbar #bee-lookup .bl-card::after { display: none; }

  /* Todo modal en el teléfono: `dvh`, no `vh` (la barra del navegador se come el vh). */
  .modal-backdrop > .modal { max-height: 90dvh; }

  /* EL TOPBAR AL DEDO (pasada crítica del 2026-10-05, controles-estado-ios-4): el logo de
     Inicio y el botón de tema miden 34 px y el menú de usuario 42 (38 en el editor del PUP),
     por debajo de los 44 de un blanco táctil. Se agranda el blanco, NO el dibujo: un `::after`
     transparente lo extiende hasta 44 sin mover nada — el restyle del topbar es del lote de la
     Home. ⚠️ El `inset` se mide desde la caja de RELLENO (dentro del borde de 1 px): el de tema
     (34 con borde → 32) necesita 6 para llegar a 44, y el de usuario 4 (40 → 48; 36 → 44 en el
     editor). Medido con `elementFromPoint` a 375 px. Entre botones hay 0.7rem (11 px) y los
     anillos suman 6 + 4 − 2 de borde: no se pisan. */
  body.app bee-topbar .tb-home,
  body.app bee-topbar .tb-theme,
  body.app bee-topbar .tb-userbtn { position: relative; }
  body.app bee-topbar .tb-home::after,
  body.app bee-topbar .tb-theme::after,
  body.app bee-topbar .tb-userbtn::after { content: ''; position: absolute; inset: -5px; }
  body.app bee-topbar .tb-theme::after { inset: -6px; }
  body.app bee-topbar .tb-userbtn::after { inset: -4px; }

  /* LA SAFE-AREA NO SE CUENTA DOS VECES (gotcha `interfaz-en-el-telefono` §viewport-fit): lo
     que en el teléfono cuelga del alto MEDIDO de la barra (`--bee-tabbar-h`) o del de la barra
     de pulgar del PUP (`--qm-thumb-h`, movil-pup.css) ya trae el indicador de inicio dentro, y
     el margen de arriba (fuera del corte) lo sumaría otra vez. */
  body.app[data-nav="panal"].con-tabbar #bee-dock,
  body.app[data-nav="panal"].con-tabbar .bee-export,
  body.app[data-nav="panal"].con-tabbar #bee-lookup,
  body.app.qt-fs #bee-dock,
  body.app.qt-fs .bee-export,
  body.app.qt-fs #bee-lookup,
  body.app[data-nav="sidebar"].qt-fs #bee-pill { margin-bottom: 0; }
}

/* ═══ «Facturar a» y la factura al cliente en la HOJA del teléfono (2026-10-06) ═══
   El diálogo de `app/factura-cliente.js` va en `BeeHoja` con la clase `fc-hoja`. Calificado por la hoja
   (como todo lo de este archivo) para ganar por especificidad a las reglas de escritorio de la base. */
@media (max-width: 760px) {
  /* ⚠️ SIN `env(safe-area-inset-bottom)`: la hoja (`.modal.bee-hoja`, arriba) ya lo pone de relleno, y
     sumarlo aquí otra vez dejaba 86 px de aire bajo el botón en un iPhone con indicador (revisión del
     2026-10-06; en el Chromium sin pantalla el inset es 0 y no se veía). */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja .fc-pie { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding: 0.6rem 0 0.4rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja .fc-pie .btn { flex: 1 1 auto; min-height: 44px; }
  /* (v321, revisión de la segunda ronda, V321CP-R2-PANT-04) EL PAPEL DE LA ORDEN va a escala 1 (la segunda ronda, (a)) y LLENA la hoja: su
     pie —«Abrir en pestaña nueva», lo que pidió Jair— quedaba bajo el borde al abrirla (a 320×568, 4 de 4 aperturas; a 375×812, 3 de 4).
     El pie se PEGA abajo, como la cabecera de la hoja se pega arriba (lo que se desplaza es la `.modal.bee-hoja`): siempre a la vista,
     con su fondo y su filete para que el papel pase por debajo. Sin `env(safe-area-inset-bottom)`: la hoja ya lo pone (arriba). */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pjc-papel-modal .fc-pie {
    position: sticky; bottom: 0; z-index: 1; margin: 0 -8px; padding: 0.6rem 8px 0.4rem;
    background: var(--panel); border-top: 1px solid var(--line);
  }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja .fc-lista { max-height: none; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja .fc-opcion { min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja .fc-campos { grid-template-columns: 1fr 1fr; }
  /* Configuración → Clientes → «Razones sociales»: la fila de cinco piezas no cabe; nombre arriba, el
     resto abajo. */
  .modal-backdrop .modal .rs-row { grid-template-columns: auto 92px minmax(0, 1fr) auto; }
  .modal-backdrop .modal .rs-row > input[type="radio"] { grid-row: 1 / 3; }
  .modal-backdrop .modal .rs-row .rs-nombre { grid-column: 2 / 5; }
  /* «Cerrar proyecto» (F4, 2026-10-08): la HOJA DE CIERRE en el teléfono. Sus filas nacen como tarjetas (no
     como tabla) sólo en el teléfono (`app/cierre-proyecto.js`); aquí, que quepan en 375 px sin desplazarse de
     lado: la captura y su «Tomar lo costeado» se apilan, y el renglón libre va en dos líneas. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-resumen { grid-template-columns: 1fr 1fr; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-tarjeta { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.45rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-cab { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-cifras { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; font-variant-numeric: tabular-nums; margin-top: 0.3rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-cap input { flex: 1 1 8rem; width: auto; min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-cap .btn { min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-libre { grid-template-columns: minmax(0, 1fr) auto; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-libre [data-l="descripcion"] { grid-column: 1 / 3; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-acciones .btn { min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .fc-pie .pjc-faltan { flex: 1 1 100%; }
  /* (v320, fila 277) «Descartar borrador», de 44 para el pulgar, en su renglón bajo de quién y cuándo. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-borrador .btn { min-height: 44px; }
  /* «Con su IVA» (CI-1): el rótulo en su renglón y las TRES cifras debajo, a lo ancho (en 375 px cuatro columnas no
     caben); la cabecera conserva sus tres rótulos sobre ellas. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-iva-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.4rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-iva-fila > .pjc-iva-et { grid-column: 1 / -1; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-iva-cab > .pjc-iva-et { display: none; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-iva-fila > .num { font-size: 0.82rem; }
  /* El cierre POR PUP (F5, 2026-10-16): cada tarjeta lleva su Sugerida, su Real (y el motivo, que aparece cuando cambia la
     sugerida) y «cómo se le pagó» con sus dos botones a lo ancho; todo de 44 px para el pulgar y sin salirse de 375 px. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-c { display: block; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-cifras .pjc-t-et { display: inline; margin-right: 0.3rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-et { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-real { margin-top: 0.4rem; min-width: 0; }
  /* (v321) El «Cierre» a lo ancho de la tarjeta, con «Usar la más baja» (44 × 44) a su derecha. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-real { display: flex; width: 100%; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-real input { flex: 1 1 auto; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-real input, .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-motivo input { width: 100%; min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-usar { width: 44px; height: 44px; flex: none; }   /* (v317, N4) un ícono: 44 × 44 */
  /* (v321, fila 296) La orden, un ícono de 44 × 44 en el teléfono (su toque). */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-ver-orden { width: 44px; height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-campo { max-width: none; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-campo input { min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-acc { margin-top: 0.4rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-t-acc .btn { min-height: 44px; width: 100%; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-sinalta-acc .btn { min-height: 44px; flex: 1 1 8rem; }
  /* (v321, segunda ronda, A2) «Corregir monto» de la fila, de pulgar. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-sobre-acc .btn { min-height: 44px; flex: 1 1 8rem; }
  /* (v317, pasada de UI, N4) «Por qué y qué hacer» de «Sin alta» se toca con el dedo: 44 de alto (el texto, 20). */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.pj-cierre .pjc-porque > summary { min-height: 44px; padding: 12px 0; box-sizing: border-box; }
  /* FUSIONAR PROVEEDORES (K5, 2026-10-17; `app/fusion-proveedores.js`): las dos fichas se APILAN (la flecha apunta hacia
     abajo), cada elección de campo es una fila de 44 px a lo ancho, los dos botones de una marca van uno sobre otro y las
     acciones de la lista de fusiones, a lo ancho. Nada se desplaza de lado en 375 px. */
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-lados { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-flecha { justify-self: center; transform: rotate(90deg); }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-campo { grid-template-columns: minmax(0, 1fr); }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-igual { grid-column: auto; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-op { min-height: 44px; align-items: center; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-seg { display: flex; flex-direction: column; width: 100%; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-seg button { min-height: 44px; text-align: left; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-ficha { min-height: 44px; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-fichas { max-height: none; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-fusion-acc { width: 100%; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-fusion-acc .btn,
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fp-deshacer-acc .btn { min-height: 44px; flex: 1 1 8rem; }
  .modal-backdrop.bee-hoja-bd .bee-hoja.fc-hoja.fp-modal .fc-pie .fp-faltan { flex: 1 1 100%; }
}

/* ═══════════ PASADA DE UI DE v317 (B1/B2): EL TOQUE DE 44 PX DE LAS PIEZAS TOCABLES ═══════════
   ([[decisions/ui-pasada-v317]] §a). En el teléfono el botón de ícono y el chip de documento miden 32 px VISIBLES (en una
   tarjeta, 44 visibles lo descuadrarían todo) y EXTIENDEN el toque hasta 44 con un `::before` transparente de 6 px por lado: un
   pseudo-elemento posicionado es parte de su elemento para el toque. ⚠️ El lápiz chico (`ib-chico`, 26 en el escritorio) y el
   chip (24) SUBEN a 32 aquí: con 9 o 10 px de extensión, dos renglones de chips separados por 12 px se montaban uno sobre otro y
   el toque del de abajo lo contestaba el de arriba (medido en `front.bee-piezas` con `test/_tocables.js`, la guarda de la regla
   de oro). Con 6 px, 12 de separación bastan, y por eso el `.doc-grupo` se abre a 12. ⚠️ `::before` y NO `::after`: `::after`
   ya es la rueda de `.icon-btn.is-busy`. ⚠️ Sólo los MODIFICADORES nuevos (`ib-caja`, `ib-ok`, `ib-rojo`, `ib-chico`) y los
   chips: un `.icon-btn` a secas vive dentro de un `.bgroup` (pegado a su vecino) o ya mide 44 (la ✕ de `BeeHoja`), y una
   extensión que se monta sobre el vecino le ROBA el toque —tocas uno y salta el otro—.
   CALIFICADAS con `body.app` —una de las raíces de la lista cerrada de esta hoja (`front.movil-nav`); todas las páginas que la
   cargan la llevan— ([[gotchas/interfaz-en-el-telefono]]): la hoja base trae `.icon-btn` sin calificar más abajo.
   ⚠️ (v321, fila 317 de Jair: «Sí, arréglala») LOS 6 PX SE CUENTAN DESDE EL BORDE QUE SE VE, Y EL ABSOLUTO SE MIDE DESDE LA CAJA DE
   RELLENO: las cuatro piezas llevan 1 px de borde, así que `inset: -6px` daba 30 + 12 = **42** de toque, no 44 —en todas las pantallas
   del teléfono desde v317—, y la guarda decía 44 porque sumaba el `inset` a la caja de BORDE. Medido barriendo con `elementFromPoint`
   (la guarda corregida, `test/_tocables.js`): 42 × 42 el botón, 42 de alto el chip. Con `-7px` (6 + el borde) dan 44 y siguen
   asomando 6 px por fuera del borde: entre dos piezas a 12 px se tocan sin montarse, como se diseñó
   ([[gotchas/piezas-tocables]] §«La extensión de toque de 44…»). */
@media (max-width: 760px) {
  body.app .icon-btn.ib-caja, body.app .icon-btn.ib-ok, body.app .icon-btn.ib-rojo, body.app .icon-btn.ib-chico,
  body.app .chip-doc, body.app button.chip-alerta, body.app a.chip-alerta { position: relative; }
  body.app .icon-btn.ib-chico { width: 32px; height: 32px; }
  body.app .chip-doc, body.app .chip-alerta { height: 32px; min-height: 32px; }
  /* (paquete «pagos», G2) El folio que parte en sus guiones crece hacia abajo también aquí: con el alto fijo de arriba se cortaba. */
  body.app .chip-doc.cd-cortes { height: auto; }
  body.app .icon-btn.ib-caja::before, body.app .icon-btn.ib-ok::before, body.app .icon-btn.ib-rojo::before,
  body.app .icon-btn.ib-chico::before { content: ''; position: absolute; inset: -7px; }
  body.app .chip-doc::before, body.app button.chip-alerta::before, body.app a.chip-alerta::before { content: ''; position: absolute; inset: -7px 0; }
  body.app .doc-grupo { gap: 12px; }
  /* (v318, fila 255) El chip que LLEVA (`chipIr`, la lista de los cambios entre versiones): 32 visibles y 6 px de toque arriba y
     abajo, como el de documento; donde vive en lista (la banda del PUP) crece a 44 visibles con 12 de separación. (v321) `-7px`: 6
     fuera del borde de 1 px, como las demás piezas. */
  body.app .chip-ir { position: relative; min-height: 32px; }
  body.app .chip-ir::before { content: ''; position: absolute; inset: -7px 0; }
}