/* movil.css · adaptación a móvil (07-10, J: «la misma información y funciones, ordenadas en el espacio del móvil»).
   Se carga con media="(max-width:760px)": en ordenador no se aplica. Va con movil.js. */

/* ── 03 · Registro (J, 07-10: «se solapan textos, lo de Ejemplo · datos de muestra, y no se entiende bien») ─────────────────── */
/* la etiqueta «Ejemplo · datos de muestra» va sola encima del título (movil.js la mueve); en la línea de debajo se partía y se montaba */
.rg-eti-ejemplo{display:inline-block;margin:0 0 8px;padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.rg-bd{height:auto}
.rg-bd-cab{flex-direction:column;align-items:stretch;gap:12px}
.rg-buscar{flex:none;box-sizing:border-box;width:100%;height:42px}
.rg-buscar input{font-size:16px}   /* con menos de 16 px, el iPhone amplía la página al escribir */
/* filtros en una sola fila que se desliza de lado, en vez de partirse en dos */
.rg-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.rg-filtros::-webkit-scrollbar{display:none}
.rg-filtros button{flex:none;padding:10px 14px}
/* la lista: unas seis filas a la vista, el resto deslizando dentro, sin arrastrar la página */
.rg-filas{flex:none;max-height:min(372px,52svh);overscroll-behavior:contain}
.rg-fila{padding:11px 6px}
.rg-art img{width:40px;height:40px}
/* el informe de cada fila sale como hoja desde abajo y a pantalla completa de ancho (dentro de la tarjeta quedaba cortado y
   se transparentaban las filas de detrás); movil.js la saca al <body> y pone el velo */
.rg-detalle{position:fixed;inset:auto 0 0 0;z-index:80;max-height:86svh;overflow:auto;overscroll-behavior:contain;
  padding:20px 18px calc(24px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#0b0e10;
  border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -24px 60px rgba(0,0,0,.6);animation:rg-sube .28s cubic-bezier(.2,.8,.2,1)}
.rg-detalle .rg-cerrar{position:sticky;top:0;float:right;z-index:1}
@keyframes rg-sube{from{transform:translateY(48px);opacity:0}}
.rg-velo{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.6)}
.rg-velo[hidden]{display:none}

/* ── 05 · El cerebro (J, 07-10: «sube la consola para que se solape un poco con la esfera; se nota muy separado») ─────────── */
/* la esfera se dibuja más pequeña que su lienzo y debajo quedaba una franja vacía: la consola sube sobre ella (su máscara ya
   desvanece las líneas de arriba) y la pista de «Deslízala para girarla» pasa arriba para no quedar tapada */
.cer-flujo{position:relative;z-index:2;margin-top:-16px}   /* J, 07-10 noche: «demasiado pegada»; la esfera (ya más pequeña) dibuja hasta 28 px del borde de su lienzo: la consola empieza justo debajo */
.cer-pista{bottom:auto;top:1.5%}

/* ── Película · el informe (J, 07-10: «las mismas cosas que en el ordenador, abajo y más pequeñas»; luego: «tapa la imagen: más
   abajo, más pequeñito y más sencillo; fuera el motivo del cliente y el resumen; que se vaya haciendo como la inspección y el
   destino») ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* una franja baja pegada abajo: cabecera y tiempo, el artículo en una línea (foto, producto y detalle), las cuatro comprobaciones
   y el destino; los campos se siguen rellenando como en ordenador (solo se ven los ya escritos) */
.informe{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 6px);left:6px;right:6px;width:auto;max-height:none;padding:8px 10px 10px;gap:5px;border-radius:14px}
.informe .inf-ultimo,.informe .inf-h,.informe .inf-codigo,.informe .movil-fuera{display:none!important}   /* movil.js marca motivo y resumen */
.informe .inf-sec{display:flex;gap:4px;padding-top:5px}
.informe .inf-destino{display:grid}
.informe .inf-sec:not(:has(.lleno,.siguiente)),.informe .inf-campo:not(.lleno):not(.siguiente){display:none}
.informe .inf-cab{gap:8px}
.informe .inf-logo{height:16px}
.informe .inf-tit p{font-size:12px}
.informe .inf-tit .inf-id{font-size:9px}
.informe .inf-estado{padding:4px 7px;font-size:8px}
.informe .inf-tiempo{font-size:9px}
.informe .inf-tiempo b{font-size:12px}
/* artículo: foto pequeña a la izquierda, producto y detalle sin rótulos */
.informe .inf-sec:has(.inf-foto){display:grid;grid-template-columns:40px minmax(0,1fr);gap:1px 10px;align-items:center}
.informe .inf-sec:has(.inf-foto):not(:has(.lleno,.siguiente)){display:none}
.informe .inf-sec:has(.inf-foto) .inf-foto{grid-column:1;grid-row:1 / span 2;width:40px;aspect-ratio:1;border-radius:7px}
.informe .inf-sec:has(.inf-foto) .inf-campo:not(.inf-foto){grid-column:2;display:block;font-size:11px;line-height:1.3}
.informe .inf-sec:has(.inf-foto) .inf-campo:not(.inf-foto):not(.lleno):not(.siguiente){display:none}
.informe .inf-sec:has(.inf-foto) .inf-l{display:none}
.informe .inf-v.fuerte{font-size:12px}
/* inspección: las cuatro comprobaciones en una fila */
.informe .inf-checks{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.informe .inf-check{font-size:10px;padding:4px 5px;gap:4px;white-space:nowrap;overflow:hidden}
.informe .inf-check::before{width:11px;height:11px}
/* destino en una sola línea */
.informe .inf-destino{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:'l b s';align-items:center;gap:0 10px;padding:6px 10px;border-radius:10px}
.informe .inf-destino b{font-size:14px}
.informe .inf-destino span:last-child{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Película · registro de hoy (J, 07-10: «ocupa toda la pantalla; que vaya abajo») ─────────────────────────────────────── */
.reg-mini{left:6px;right:6px;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 6px);padding:10px 10px 6px}
.reg-mini li{padding:5px 4px}
.reg-mini li:nth-child(n+4){display:none}
/* del 736 al 754 se ven a la vez el informe y el registro de hoy, y los dos van abajo: el informe se recoge (cabecera y tiempo) y
   sube justo encima del registro; desde ahí vuela a su fila como en ordenador */
.pelicula:has(.reg-mini.ver) .informe{bottom:calc(env(safe-area-inset-bottom,0px) + 172px)}
.pelicula:has(.reg-mini.ver) .informe .inf-sec,.pelicula:has(.reg-mini.ver) .informe .inf-destino{display:none}

/* ── 01 · Por qué (J, 07-10: «no se entiende: mientras lees una cifra ves la de abajo difuminada; dilo igual pero mejor») ────── */
/* una cifra cada vez, como una ficha: el número grande y, justo debajo, su frase y su fuente; al deslizar, la que se va sube y se
   apaga y la siguiente entra desde abajo (mismos --k/--a y .activo que pone pagina.js); fuera la máscara que dejaba ver las otras */
.animar .ruleta{-webkit-mask-image:none;mask-image:none}
.animar .r-n{top:22%;transform:translateY(calc(-50% + var(--k,0) * 56px));opacity:calc(1 - var(--a,0) * 1.6)}
.animar .r-txt{top:calc(22% + 44px);bottom:auto;transform:translateY(18px)}
.animar .r-item.activo .r-txt{transform:none}
.animar .r-txt p{font-size:17px}
.animar .r-txt::before{display:none}

/* ── 06 · Precio → 07 · Equipo (J, 07-10: «al acabar, un fundido con el equipo; no una línea de azul oscuro a negro») ─────── */
.pago::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:clamp(140px,24vh,240px);background:linear-gradient(180deg,rgba(0,0,0,0),#000);pointer-events:none}
.pago .contenido{z-index:1}

/* ── 02 · Objetos (J, 07-10: «Calzado, Tecnología, Ropa, Accesorios en la misma línea; un poco más pequeño») ─────────────────── */
.lotes-menu{flex-wrap:nowrap;gap:2px 10px}
.lotes-menu button{font-size:min(5vw,26px);white-space:nowrap}   /* movil.js la baja lo justo si no cabe (en inglés es más largo) */
/* las fotos de móvil son ahora verticales (catalogo_movil, cámara de móvil; J: «se veían cortadas»): a pantalla completa, con el menú
   arriba y el lote abajo por encima (los degradados de .lotes-fija ya los separan), en vez de la caja 4:5 del centro */
.animar .lotes-escena{inset:0;aspect-ratio:auto;transform:none}
/* la línea del escáner baja a la vez que se destapa la foto: la foto ocupa 100svh (pantalla visible) y la línea bajaba 100vh (la
   grande); en el iPhone no coinciden y se separaban (J, 07-10: «hay un gap entre la transición de la imagen y la línea azul») */
.animar .lotes-scan{transform:translateY(calc(var(--tw,0) * 100svh))}

/* ── Barra · selector EN | ES también en el móvil (J, 07-10: «el mismo en móvil»; en ≤860 px la página lo ocultaba por falta de
   sitio): logo y botón algo más compactos y el selector entre los dos ───────────────────────────────────────────────────────── */
.barra{gap:8px}
.barra-logo{font-size:16px;gap:7px}
.barra-logo img{height:23px}
.idioma{display:flex;margin-left:auto;padding:2px}
.idioma button{padding:7px 8px;font-size:11px}
.barra .boton{margin-left:0;height:38px;padding:0 12px 0 14px;font-size:13px;gap:6px}
.barra .boton svg{width:15px;height:15px}
@media (max-width:374px){.barra-logo{font-size:14px}.barra .boton svg{display:none}.barra .boton{padding:0 12px}}