/* ═══════════════════════════════════════════════════════════════════════════
   10 · La puerta y el panel de administración — en el teléfono
   ───────────────────────────────────────────────────────────────────────────
   Dos mundos con un mismo problema y dos motivos distintos:

   · **La puerta** (entrar, solicitar, olvidada, aceptar, baja) es lo primero
     que ve alguien que todavía no es cliente, y lo ve casi siempre desde el
     móvil: si esa pantalla parece un formulario suelto sobre un fondo vacío,
     el producto parece un formulario suelto.
   · **Administración** (clientes, google, usuarios, captación, campañas,
     estado, laboratorio) son TABLAS LARGAS. En un teléfono la tabla no cabe,
     y lo que se quedaba fuera no era un adorno: era la columna de la derecha,
     donde viven «Terminar», «Vincular», «Anular», «Excluir» y el resultado de
     cada sincronización. Un panel que en el móvil enseña el nombre y esconde
     la acción no es una versión reducida: es una versión inútil.

   Criterio único para las tablas, el mismo en las siete pantallas: **se
   apilan**. Cada fila pasa a ser una tarjeta y cada dato lleva delante su
   rótulo, que sale del `data-r` que pone el PHP (convención de la casa, ver
   `09-cuenta.css`). No hay ninguna tabla mía que sea una rejilla para comparar
   en horizontal — todas se leen fila a fila, «este negocio, esta sede, esta
   invitación» — así que ninguna se queda en scroll lateral.
   La excepción está marcada abajo y NO es mía: las dos tablas de vigilancia
   que `estado.php` hereda de `inc/vigilancia-vista.php`.

   Colores SIEMPRE por variable (`var(--tx)`, `var(--ln)`, `var(--s1)`…): la
   marca de cada cliente redefine esos tokens y hay paneles en oscuro.
   Todo dentro de media queries: el escritorio no se toca en este encargo.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ═════════════════════════════════════════════════════════════════════════
     1 · LA PUERTA
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── El argumento vuelve, pero DEBAJO ──
     `pm360.css` esconde `.plado` entero por debajo de 900 px. Se entiende el
     porqué (quien viene a entrar quiere el campo, no el folleto), pero así el
     móvil —que es por donde llega un cliente nuevo— se queda sin una sola
     palabra de qué es esto: tres promesas y el respaldo de Google, perdidos.
     La salida no es elegir: es el orden. La tarjeta primero, tal cual está, y
     el argumento detrás para quien baje. Nada desaparece y nada estorba. */
  body.puerta .plado {
    display: block;
    order: 2;                 /* `.pwrap` es un grid: la tarjeta sigue arriba */
    margin-top: 26px;
    text-align: center;
  }
  body.puerta .pcard { order: 1 }
  /* El logo grande de este bloque sobra: la tarjeta ya enseña `.plogo-mini`
     justo encima, y la marca dos veces en la misma pantalla es ruido. */
  body.puerta .plado .plogo-enlace { display: none }
  body.puerta .plado h2 {
    font-size: 22px;
    line-height: 1.3;
    margin: 0;
    max-width: none;
  }
  body.puerta .ppromesas { margin-top: 18px; gap: 14px; text-align: left }
  body.puerta .ppromesas i { font-size: 12.5px; max-width: none }

  /* ── Se toca con el pulgar ──
     `.pmini` («He olvidado la contraseña», «Ya tengo cuenta») medía 20 px de
     alto: es el enlace de quien ya ha fallado una vez, y fallar el toque es
     volver a fallar. Lo mismo con el logo de la tarjeta, que es la única
     salida hacia la web de producto. */
  body.puerta .pmini {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
  }
  body.puerta .plogo-mini {
    min-height: 42px;
    display: flex;
    align-items: center;
  }
  body.puerta .plogo-mini img { margin-bottom: 0 }
  body.puerta .pcard h1 { margin-top: 14px }

  /* Un campo de menos de 16 px hace que iOS haga zoom al enfocarlo y deje la
     pantalla descuadrada; `.pin` está en 15 px. */
  body.puerta .pin { font-size: 16px }
  body.puerta .pbt { min-height: 46px }

  /* ── La baja (`/baja.php`) ──
     Pantalla suelta, con su propia hoja incrustada y sus colores fijos: la abre
     gente que no es cliente nuestro y no hay marca que aplicar. Aquí sólo se
     tocan medidas. `body.pbaja` y no `.caja` a secas: son nombres demasiado
     genéricos para soltarlos sobre todo el panel. */
  body.pbaja { padding: 16px 14px }
  body.pbaja .caja { padding: 24px 20px }
  body.pbaja h1 { font-size: 20px }
  /* El botón de la baja es la única acción de la pantalla: a lo ancho y alto
     de dedo. Estaba en `inline-block` con 11 px de padding. */
  body.pbaja .btn {
    display: block;
    text-align: center;
    min-height: 46px;
    line-height: 24px;
  }
  /* El correo de contacto es un enlace de 15 px de alto dentro de un párrafo
     pequeño: se le da línea propia y altura de toque. */
  body.pbaja .tm { line-height: 1.75 }
  body.pbaja .tm a {
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
  }

  /* ═════════════════════════════════════════════════════════════════════════
     2 · TABLAS APILADAS  ·  la convención de la casa
     ─────────────────────────────────────────────────────────────────────────
     Mismo esqueleto que `09-cuenta.css`, repetido aquí a propósito: estas siete
     pantallas no pueden depender de que exista la hoja de otra zona. Son las
     mismas declaraciones, así que da igual cuál gane.
     ═════════════════════════════════════════════════════════════════════════ */

  /* El envoltorio deja de recortar: si la tabla ya no es ancha, el scroll
     lateral sólo sirve para esconder el borde de las tarjetas.

     ⚠ ACOTADAS A `.pg-admin` EL 18-sep-2026. Estaban escritas sin acotar —
     `.scroll:has(> table.apila)` a secas—, o sea que esta hoja de zona decidía
     el `overflow` de TODO el panel desde dentro de su propio bloque. Es el
     mismo patrón que `pm360.css:3967` (`.plain>.scroll`, acotada a `#tcli` ese
     mismo día): una regla global escondida en un fichero cuyo nombre dice que
     es de otra cosa. Quien viniera a tocar la administración se llevaba por
     delante Competencia, Categorías, Palabras, Denuncias, Accesos y Facturas
     sin verlas nombradas en ningún sitio.

     Medido antes de acotar, con la regla desactivada y las 22 cajas del panel
     que hoy caen bajo ella (`<div class=".scroll"><table class="apila">` en
     sus tres formas), a 360 y a 760 px: las ÚNICAS que se quedaban con
     `overflow:auto` eran NUEVE, y las nueve son de esta zona —
     `admin/usuarios.php:550`, `admin/faltan.php:351`, `admin/google.php:633`
     `:685` y `:716`, `admin/clientes.php:645` (#tcli) y las tres de
     `estado.php` (:160, :299, :340), que también es `pg-admin`—. Las otras
     trece no se movieron ni un píxel porque ya las cubre su propia hoja:

       · `.plain.scroll` (una sola caja) → `pm360.css:3841`, la convención
         — accesos ×2, facturas, admin/usuarios:290, cupones, gsc ×2, altas
       · `.pg-competencia .plain > .scroll`  → `06-analisis-b.css:164`
       · `.pg-categorias`  y `.pg-palabras`  → `04-analisis-a.css:82-83`
       · `.pg-denuncias .scroll`             → `07-vigilancia.css:81`
       · el informe                          → `informe.css:415`

     O sea: la regla global no sostenía cuatro pantallas ajenas, como se temía.
     Sólo sostenía las suyas, y de paso pisaba las de todos. */
  .pg-admin .scroll:has(> table.apila) { overflow: visible }
  .pg-admin .plain.scroll:has(> table.apila) { overflow: visible }
  /* Captación y Campañas montan la tabla dentro de un `.card` con
     `style="overflow:auto"` escrito en el HTML: un estilo en línea no lo gana
     ninguna hoja, y sin `!important` la tarjeta seguiría recortada. */
  .pg-admin .card:has(> table.apila) { overflow: visible !important }

  table.apila,
  table.apila thead,
  table.apila tbody,
  table.apila tr,
  table.apila td { display: block; width: auto }

  table.apila thead { display: none }   /* cada celda ya se rotula sola */

  table.apila tr {
    padding: 13px 15px;
    border-bottom: 1px solid var(--ln);
  }
  table.apila tr:last-child { border-bottom: 0 }
  table.apila td {
    padding: 5px 0 0;
    border: 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13.5px;
    text-align: left;          /* pisa el `text-align:right` de `td.num` */
  }
  table.apila td.tit,
  table.apila td:first-child {
    display: block;
    padding: 0 0 4px;
    font-size: 15px;
  }
  table.apila td[data-r]::before {
    content: attr(data-r);
    flex: none;
    color: var(--dm);
    font-size: 12px;
    font-weight: 600;
  }
  table.apila td[data-r] > * { min-width: 0 }
  table.apila td.mono { font-size: 12.5px; word-break: break-all }
  /* Un correo largo dentro de una celda no tiene por dónde partirse y empuja la
     tarjeta fuera de la pantalla: medido en Captación, 14 px de arrastre lateral
     en toda la página por un `salon@juanluispeluqueross.com`. `anywhere` sólo
     parte cuando de verdad no cabe. */
  .pg-admin table.apila td { overflow-wrap: anywhere }
  /* Y el correo es la acción de la pantalla de Captación: se toca, así que mide
     lo que mide un dedo. */
  .pg-admin table.apila td[data-r="Contacto"] a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
  }

  /* ── Lo que esta zona añade a la convención ──
     Aquí la celda que titula la tarjeta NO es siempre la primera: en el rastro
     de Google la primera columna es la fecha y lo que identifica la entrada es
     «qué se hizo»; en el Laboratorio la primera es la casilla de publicar. El
     orden de las `<td>` no se toca (manda el `thead` del escritorio) y se
     recoloca aquí con `order`, que es lo que permite arreglar el móvil sin
     descuadrar la tabla de siempre. */
  .pg-admin table.apila tr { display: flex; flex-direction: column }
  .pg-admin table.apila td.tit { order: -1 }
  /* `[hidden]` tiene que seguir escondiendo: la fila «Ningún negocio …» de
     Clientes nace con `hidden`, y una regla de clase le gana al `display:none`
     del navegador. Sin esto el aviso de lista vacía saldría SIEMPRE. */
  .pg-admin table.apila tr[hidden] { display: none }

  /* Cuando hay un `.tit` explícito, la primera celda es una celda más. */
  .pg-admin table.apila tr:has(td.tit) td:first-child:not(.tit) {
    display: flex;
    padding: 5px 0 0;
    font-size: 13.5px;
  }

  /* La fila de «no hay ninguno» (Clientes) ocupa la tarjeta entera, sin rótulo.
     El `width:100%` NO sobra: una celda con `colspan` no se estira sola al
     pasar a bloque — Chrome le sigue calculando un ancho de contenido. */
  .pg-admin table.apila td[colspan] { width: 100%; box-sizing: border-box }
  /* La lista de fichas de Google tiene su propia regla POR ID en la hoja base
     (`#tsedes td:first-child{width:34px}`, la columna de la casilla) y un id le
     gana a cualquier clase: hay que repetirlo para soltar ese ancho, porque en
     el teléfono esa casilla ya no es una columna estrecha sino una fila
     rotulada. `#tsedes` es ahora el envoltorio de las cuentas plegadas, no la
     tabla: la regla de la hoja base sigue alcanzándolo por descendencia. */
  .pg-admin #tsedes table.apila td:first-child { width: auto; padding-right: 0 }
  .pg-admin #tsedes input.marca { width: 20px; height: 20px }
  /* La casilla se toca por toda la fila, no por sus 20 px. */
  .pg-admin table.apila td.c .marcalb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-height: 40px;
    cursor: pointer;
  }
  .pg-admin table.apila td.c { align-items: center }

  /* El nombre del negocio ES el enlace a su panel (lo dice la propia pantalla),
     y medía 19 px de alto. */
  .pg-admin table.apila td.tit a {
    display: flex;
    align-items: center;
    min-height: 38px;
  }
  .pg-admin table.apila td.tvacio { display: block; text-align: center }

  /* La primera celda de la tarjeta SÍ lleva rótulo cuando no es el título.
     La convención lo quita de `td:first-child` (allí la primera celda es
     siempre el título), pero en las fichas de Google la primera es la casilla
     de marcar y sin rótulo es un cuadrito sin nombre. */
  .pg-admin table.apila tr:has(td.tit) td[data-r]:first-child::before {
    content: attr(data-r);
  }

  /* ── La columna de acciones ──
     Iban tres a cinco botones de 28 px pegados unos a otros: en Clientes,
     «Borrar» a cuatro píxeles de «Marca». Aquí pasan a dos por fila, de 40 px,
     y lo destructivo baja solo a una fila propia y ya en rojo — en un teléfono
     NO HAY hover, así que el rojo de `:hover` de la hoja base no llega nunca. */
  .pg-admin table.apila td.acc {
    padding-top: 11px;
    white-space: normal !important;   /* pisa el `nowrap` en línea del PHP */
  }
  .pg-admin table.apila td.acc::before { content: none }
  .pg-admin table.apila td.acc:empty { display: none }
  .pg-admin table.apila td.acc,
  .pg-admin table.apila td.acc .cacc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }
  .pg-admin table.apila td.acc form { display: block; flex: 1 1 calc(50% - 4px); margin: 0 }
  .pg-admin table.apila td.acc .btn-s,
  .pg-admin table.apila td.acc .btn-p,
  .pg-admin table.apila td.acc button,
  .pg-admin table.apila td.acc > a {
    flex: 1 1 calc(50% - 4px);
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
  .pg-admin table.apila td.acc .t-cr,
  .pg-admin table.apila td.acc .peligro {
    flex: 1 0 100%;
    border-color: var(--cr-b);
    color: var(--cr-t);
    background: var(--cr-s);
  }

  /* Una celda con varias líneas dentro (teléfono + «sin web», nota + reseñas)
     no cabe al lado de su rótulo: partía los números de teléfono por la mitad.
     Cuando la celda trae bloques, el rótulo se pone encima y el dato debajo. */
  .pg-admin table.apila td[data-r]:has(div) { display: block }
  .pg-admin table.apila td[data-r]:has(div)::before { display: block; margin-bottom: 2px }

  /* El desplegable de vincular una ficha a su negocio es la acción de esa
     tarjeta: a lo ancho y con alto de dedo, no un control de 28 px al final
     de una fila. */
  /* Acotado a `#tsedes`: apuntar por el rótulo («Cliente») alcanzaba también a
     la columna Cliente de «Últimas sincronizaciones» de Estado, que es un
     número y quedaba partido en dos líneas sin necesidad. */
  .pg-admin #tsedes table.apila td[data-r="Cliente"] { display: block }
  .pg-admin #tsedes table.apila td[data-r="Cliente"]::before { display: block; margin-bottom: 4px }
  .pg-admin table.apila td .sel,
  .pg-admin table.apila td > select { width: 100%; min-height: 42px }

  /* ── Casillas que se puedan marcar ──
     13 px de casilla es la mitad de lo que tapa un dedo. Afecta a marcar
     fichas de Google, a elegir ficheros en el Laboratorio y a los «negocios de
     más» de una invitación: tres sitios donde marcar mal tiene consecuencias. */
  .pg-admin input[type="checkbox"],
  .pg-admin input[type="radio"] { width: 20px; height: 20px; flex: none }
  .pg-admin table.apila td.c { padding-top: 0; padding-bottom: 6px }

  /* ═════════════════════════════════════════════════════════════════════════
     3 · LAS CIFRAS Y LOS FILTROS DE ADMINISTRACIÓN
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── La cifra protagonista ──
     `--t-hero` son 60 px: «105.549 reseñas» partía en dos líneas y el
     separador vertical se quedaba colgando al final de la fila anterior, que
     es lo que hacía que el bloque pareciera roto. Una pareja cifra+rótulo por
     línea, y los separadores fuera: en columna ya no separan nada. */
  .pg-admin .hero-n { flex-direction: column; align-items: flex-start; gap: 4px }
  .pg-admin .hero-n .sep { display: none }
  .pg-admin .hero-n b { font-size: 40px }
  .pg-admin .hero-n b.n2 { font-size: 30px }
  .pg-admin .hero-n u { font-size: 15px }
  .pg-admin .hero { gap: 22px }

  /* ── La tira de tres cifras ──
     Medido en `/estado.php` a 390 px: tres columnas de 99 px con «105.549»
     dentro. No es que se recortara, es que **los números se pisaban unos a
     otros** y se leía «105.5498325», o sea un dato falso. Una por línea.
     `!important` porque el número de columnas va en un `style=` del PHP y un
     estilo en línea no lo gana ninguna hoja. */
  .pg-admin .tira { grid-template-columns: 1fr !important }
  .pg-admin .tira > div {
    border-right: 0;
    border-bottom: 1px solid var(--ln2);
    /* Una fila por cifra: el rótulo y su pie a la izquierda, el número a la
       derecha. Apilados del todo (rótulo / número / pie) serían tres bloques
       altos por dato y la tira ocuparía media pantalla para decir tres cosas. */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    align-items: baseline;
    padding: 12px 15px;
  }
  .pg-admin .tira > div:last-child { border-bottom: 0 }
  .pg-admin .tira .k  { grid-column: 1; grid-row: 1 }
  .pg-admin .tira .ft { grid-column: 1; grid-row: 2; justify-content: flex-start }
  .pg-admin .tira .v  { grid-column: 2; grid-row: 1 / span 2; align-self: center;
                        justify-content: flex-end }
  .pg-admin .tira .v b { font-size: 24px }

  /* ── Filtros ──
     Eran una fila de controles de 36 px que se estrujaban unos a otros; el
     buscador quedaba en 200 px y el desplegable de estado, cortado. Un control
     por línea y 42 px de alto. */
  .pg-admin .filtros { gap: 8px }
  .pg-admin .filtros .sel,
  .pg-admin .filtros input[type="search"],
  .pg-admin .filtros input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
    /* ⚠ 18-sep-2026 · 42 → 44 px. El suelo de toque `@media (pointer: coarse)`
       del final de `pm360.css` deja la barra de filtros base en 44; esta hoja es
       más específica y ganaba, así que el mismo mando medía 42 en administración
       y 44 en las pantallas sin hoja propia. Se iguala al 44 de la guía de Apple,
       que es también el de `.mnu-btn`. Va con un control por línea, así que dos
       píxeles más no mueven nada. */
    height: 44px;
    font-size: 16px;          /* por debajo de 16 px iOS hace zoom al enfocar */
  }
  .pg-admin .filtros .btn-s,
  .pg-admin .filtros .btn-p,
  .pg-admin .filtros button {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;         /* ídem: cuadra con los campos de arriba */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pg-admin .filtros .lim { flex: 1 1 100%; margin-left: 0; min-height: 32px }
  /* Una casilla con su texto se toca entera: el `<label>` es la zona útil, así
     que es él quien tiene que medir 40 px, no la casilla. Vale para «sólo sin
     vincular» de Google y para «sólo contactables» de Captación, que lleva un
     `height:36px` escrito en el HTML. */
  .pg-admin .filtros .chk,
  .pg-admin label.chk,
  .pg-admin label.tm:has(> input[type="checkbox"]) {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px !important;
    margin-left: 0;
  }

  /* Los desplegables de «qué cuentas de Google hay» y los chips de filtro. */
  .pg-admin details > summary { min-height: 42px; display: flex; align-items: center }
  /* Los chips de cuenta pasaron de `<button>` a `<a>` al hacerse enlaces de
     verdad: la regla tiene que seguirlos o se quedan en 37 px. */
  .pg-admin .gchips .gchip { min-height: 44px }
  .pg-admin .gchips { gap: 8px }

  /* ── El resumen de cada cuenta plegada ──
     Es lo único que se ve con la lista cerrada, así que tiene que caber entero:
     nombre, cuántas fichas lleva dentro y cuántas siguen sin vincular. A 390 px
     las tres cosas no entran en una línea, así que el nombre se lleva la suya y
     las dos cifras van debajo. El fondo, el marco y el alto de toque van en
     línea en el PHP porque son los mismos a cualquier ancho. */
  /* Vuelve a ser `list-item`: la regla de arriba pone en fila todos los
     `<summary>` de administración y aquí eso quitaba el triángulo de plegar —
     lo único que dice que la cuenta se abre— y dejaba las tres piezas en una
     fila apretada de tres columnas. En flujo normal se leen como una frase y
     caen a la línea siguiente cuando no caben. */
  .pg-admin .gacc > summary { display: list-item; line-height: 1.7 }
  .pg-admin .gacc > summary .chip { margin-left: 8px }
  .pg-admin .btn-google, .pg-admin .btn-google.chico { min-height: 42px }

  /* Los mandos del mapa de Captación son de Leaflet y nacen en 30 px: en un
     teléfono el mapa se maneja con los dedos, pero el zoom de precisión se
     pulsa, y 30 px no se acierta. */
  /* `.leaflet-touch .leaflet-bar a` de la hoja de Leaflet tiene la misma
     especificidad que `.pg-admin .leaflet-control-zoom a` **y se carga
     después** (el `<link>` va al final del cuerpo de Captación): con un peso
     igual gana el último, así que hace falta una clase más. */
  .pg-admin .leaflet-touch .leaflet-control-zoom a,
  .pg-admin .leaflet-touch .leaflet-bar a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
  }

  /* Los tres pendientes de Clientes («2 negocios sin locales · Ver»): el botón
     que aplica el filtro medía 31 px. */
  .pg-admin .cart-pend button.ver { min-height: 40px; padding: 0 16px }
  .pg-admin .cart-pend li { gap: 10px }

  /* Invitar a alguien (Usuarios): el papel y los negocios de más se eligen con
     el dedo, no con el ratón. Las casillas iban en varias columnas y los
     nombres largos se montaban unos sobre otros. */
  .pg-admin .segs label { min-height: 44px }
  /* `.checklist` no tiene estilo base ninguno (son `<label>` sueltos en línea):
     en el teléfono salían tres por fila con los nombres largos montados unos
     sobre otros. Uno por línea, con alto de dedo, y la lista acotada en una
     caja con marco y scroll PROPIO — son treinta negocios, y sin tope se comen
     la pantalla; sin `overflow` la lista se derramaba encima de la tabla de
     invitaciones de abajo (se vio en la captura, no en la medición). */
  .pg-admin .checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ln);
    border-radius: 11px;
    padding: 6px 10px;
    background: var(--s2);
  }
  .pg-admin .checklist label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 13.5px;
  }
  .pg-admin .sel.ancho, .pg-admin select.sel { min-height: 42px }

  /* Los formularios de la zona: 16 px para que iOS no haga zoom, y alto de
     dedo en los botones sueltos que no están dentro de una tabla. */
  .pg-admin .pin, .pg-admin input[type="text"], .pg-admin input[type="email"] { font-size: 16px }
  .pg-admin .btn-p, .pg-admin .btn-s { min-height: 40px }

  /* ═════════════════════════════════════════════════════════════════════════
     4 · LOS BLOQUES DE DIAGNÓSTICO  (`/estado.php` y `/lab.php`)
     ─────────────────────────────────────────────────────────────────────────
     Las dos pantallas enseñan lo mismo en dos formas, y por eso se tratan con
     la misma regla, que es una sola idea partida en dos casos:

     · Lo que es **una referencia suelta** —una ruta, un nombre de fichero, una
       clave— es prosa: se parte por donde haga falta y nunca desborda. Un
       `storage/avisos.json` cortado a la mitad no se puede ni copiar.
     · Lo que es **un volcado de registro** —el `pre` de los errores, el diff
       del Laboratorio— NO se puede replegar: romper una línea de log cambia lo
       que pone. Se queda en scroll horizontal, pero **con indicador**: una
       sombra en el borde que sólo está mientras quede algo hacia ese lado. Va
       pintada con `background-attachment:local`, así que no hace falta ni un
       elemento más en el HTML ni una línea de JavaScript.
     ═════════════════════════════════════════════════════════════════════════ */

  /* Caso A · referencias sueltas: se parten. */
  .pg-admin .ficha p.mono,
  .pg-admin .guia p.mono,
  .pg-admin .notag code,
  .pg-admin .lab-pie code,
  .pg-admin p code,
  .pg-admin td .mono {
    overflow-wrap: anywhere;
    word-break: break-word;
    /* `!important`: el tamaño va en un `style=` del PHP (11,5 px) y en un
       teléfono eso no se lee. */
    font-size: 12px !important;
    line-height: 1.55;
  }

  /* Caso B · volcados de registro: scroll con sombra-indicador.
     La sombra va pegada al borde de la caja (`background-attachment:scroll`) y
     el velo del color del fondo va pegado al contenido (`local`): así la sombra
     sólo se ve mientras quede algo hacia ese lado, y desaparece sola al llegar
     al final. Es un indicador de verdad —dice si hay más y por dónde— sin un
     elemento más en el HTML ni una línea de JavaScript. */
  .pg-admin .lab-err pre,
  .pg-admin .lab-diff,
  .pg-estado .scroll:not(:has(> table.apila)) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background-image:
      linear-gradient(to right,  var(--s1), transparent),
      linear-gradient(to left,   var(--s1), transparent),
      linear-gradient(to right,  color-mix(in srgb, var(--tx) 30%, transparent), transparent),
      linear-gradient(to left,   color-mix(in srgb, var(--tx) 30%, transparent), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .pg-admin .lab-err pre { font-size: 12px }

  /* Y si una tabla se queda en scroll, que se lea: encogida a 364 px repartía
     seis columnas a 60 px y «Sabores del Puerto (Muelle Uno)» salía en cuatro
     líneas de dos palabras. Con un ancho mínimo las columnas recuperan su sitio
     y lo que se hace es arrastrar — que es justo lo que el indicador anuncia.
     El `thead` viaja con el contenido, así que cada columna llega rotulada. */
  .pg-estado .scroll:not(:has(> table.apila)) > table { min-width: 900px }
  /* Y las columnas de metadatos (`hace 7 días`, la nota) en una línea: partidas
     en dos palabras por línea hacen la fila el triple de alta sin añadir nada. */
  .pg-estado .scroll:not(:has(> table.apila)) td.tm,
  .pg-estado .scroll:not(:has(> table.apila)) th { white-space: nowrap }

  /* ── ⚠ La excepción, y NO es mía ──
     Las dos tablas de «La ficha» y «Las reseñas» de `/estado.php` las pinta
     `inc/vigilancia-vista.php`, que es el mismo fichero que usa la pantalla de
     Vigilancia del cliente (otra mano, y ya marcó su lienzo `pg-vigilancia`).
     No puedo ponerles `data-r` sin tocar ese fichero, y apilarlas sin rótulos
     dejaría seis datos seguidos sin decir cuál es cuál — «Antes» y «Ahora» sin
     nombre no significan nada. Así que aquí se quedan en scroll horizontal con
     el mismo indicador de arriba, que es la otra salida legítima, y queda
     apuntado en el informe. */
  .pg-estado .scroll:not(:has(> table.apila)) { padding-bottom: 2px }

  /* ═════════════════════════════════════════════════════════════════════════
     5 · EL LABORATORIO
     ═════════════════════════════════════════════════════════════════════════ */

  /* Los rótulos de estado de las dos máquinas iban a 10,5 px: en un teléfono
     eso es una mancha de color, no una palabra — y lo que dicen es si el
     laboratorio está cerrado al mundo o no. */
  .pg-lab .lab-et { font-size: 12px; padding: 3px 9px }
  .pg-lab .lab-maq em, .pg-lab .lab-maq i { font-size: 12px }
  .pg-lab .lab-est { font-size: 12px }
  /* El contador de errores («143») iba a 11 px: es la cifra que dice si hay que
     mirar o no, y en un teléfono a 11 px no se lee. */
  .pg-lab .lab-n, .pg-admin .lab-n { font-size: 12px }
  .pg-lab .lab-ver i, .pg-lab .lab-ver .fs em { font-size: 12px }
  .pg-lab .lab-pie { font-size: 12.5px }

  /* «Abrir ↗» es el enlace a la otra máquina y medía 29 px. */
  .pg-lab .lab-ir {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
  }
  /* El desplegable de cada grupo de errores: es lo que se pulsa para ver el
     registro, y estaba en 19 px de alto. */
  .pg-lab .lab-err summary { min-height: 42px; display: flex; align-items: center; font-size: 13px }

  /* Publicar y volver atrás son las dos acciones con consecuencias de esta
     pantalla: a lo ancho, y separadas de lo que hay encima. */
  .pg-lab .lab-form .btn-p { width: 100%; min-height: 46px; margin-top: 12px }
  .pg-lab .lab-ver { flex-direction: column; align-items: stretch; gap: 8px }
  .pg-lab .lab-ver form .btn-s { width: 100%; min-height: 42px }
  .pg-lab .lab-nota input { min-height: 42px; font-size: 16px }
  /* La ruta del fichero es el título de cada tarjeta: se parte, no se arrastra. */
  .pg-lab table.apila td.f code { overflow-wrap: anywhere; font-size: 12.5px }

  /* ═════════════════════════════════════════════════════════════════════════
     6 · LA PANTALLA DE ESPERA (`/actualizando.php`)
     ═════════════════════════════════════════════════════════════════════════ */

  /* «Qué dice el registro» es un `summary` de 19 px, y detrás está lo único
     que sirve el día que la sincronización falla. */
  .pg-espera .esp-tec summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
  /* El registro, tal cual: mismo trato que los volcados del Laboratorio. */
  .pg-espera .esp-tec code {
    display: block;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.6;
  }
  .pg-espera .esp-botones .btn-ico { min-height: 44px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Teléfono estrecho (360 px y menos)
   ───────────────────────────────────────────────────────────────────────────
   El corte va en 370 y no en 400 a propósito: un iPhone normal mide 390 px y
   ahí los botones de acción SÍ caben de dos en dos. Con el corte en 400 el
   teléfono más común del mundo caía en la versión estrecha y cada negocio
   ocupaba cinco filas de botón — medido: la lista de Clientes pasaba de 7.200
   a 14.500 px de alto. */
@media (max-width: 370px) {
  /* La tarjeta de la puerta llevaba 30 px de margen a cada lado: en un Android
     pequeño eso son 60 de los 360, y el campo de correo se queda en 236. */
  body.puerta .pcard { padding: 24px 18px 22px }
  body.puerta { padding: 20px 12px }
  body.pbaja .caja { padding: 20px 16px }

  /* A este ancho, dos botones por fila salen de 150 px con textos como
     «Terminar» o «Vincular»: uno por fila. */
  .pg-admin table.apila td.acc form,
  .pg-admin table.apila td.acc .btn-s,
  .pg-admin table.apila td.acc .btn-p,
  .pg-admin table.apila td.acc button,
  .pg-admin table.apila td.acc > a { flex: 1 0 100% }

  .pg-admin table.apila tr { padding: 12px 13px }
  .pg-admin .hero-n b { font-size: 34px }
  .pg-admin .hero-n b.n2 { font-size: 27px }
  .pg-admin .tira .v b { font-size: 20px }
}