/*
 * WMS Odoo · estilo del deck sobre motor-presentaciones.
 * Lámina de 1920 × 1080; margen lateral de 96 px. El texto se colorea con los roles de lámina
 * (--lamina-*), que traen la guarda de contraste de marca.css; los --marca-* se usan sólo en lo que
 * no es texto (franja, marcos, flechas y rellenos).
 * Tamaños: título 56 (Michroma), cuerpo 36, pie y rótulos del flujo 28 (Inter).
 * Cada lámina lleva una clase por tema (.s-cadena, .s-resumen…), no por número, para que
 * renumerar no obligue a tocar el CSS.
 */

:root {
  --m: 96px;
  --texto-titulo: 56px;
  --texto-cuerpo: 36px;
  --texto-menor: 28px;
  --sombra-marco: 0 18px 48px rgb(20 22 29 / 0.14), 0 2px 6px rgb(20 22 29 / 0.08);
  --sobre-relleno: var(--motor-sobre-primario, #fff);
}

/* ---------- Láminas claras: franja, sello, folio, título ---------- */

.lamina.clara,
.lamina.portada,
.lamina.cierre {
  padding: 0;
}

/* Franja a sangre arriba, azul con un segmento magenta. */
.lamina.clara::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    var(--marca-primario) 0 96px,
    var(--lamina-acento-relleno) 96px 336px,
    var(--marca-primario) 336px 100%
  );
}

.sello {
  position: absolute;
  right: var(--m);
  top: 52px;
  width: 60px;
  height: 57px;
}

.folio {
  position: absolute;
  right: 180px;
  top: 76px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lamina-suave);
}

.clara h2 {
  position: absolute;
  left: var(--m);
  top: 64px;
  font-size: var(--texto-titulo);
  font-weight: 400;
  white-space: nowrap;
}

.clara .cuerpo {
  position: absolute;
  left: var(--m);
  top: 146px;
  width: 1728px;
  font-size: var(--texto-cuerpo);
  line-height: 1.3;
}

/* ---------- Capturas ---------- */

.captura {
  position: absolute;
  left: var(--m);
  margin: 0;
}

/* Marco de navegador sobrio: barra con tres puntos y la captura debajo. */
.ventana {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sombra-marco);
}

.ventana::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(20 22 29 / 0.12);
  pointer-events: none;
}

.ventana-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  background: var(--marca-fondo-suave);
}

.ventana-barra i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(20 22 29 / 0.18);
}

.ventana-vista {
  overflow: hidden;
}

/* El lienzo es lo que se acerca: su transform-origin, en el HTML, es la zona que prueba la lámina.
   Las imágenes vienen a 1.5x; los atributos width y height del HTML fijan su tamaño en la lámina. */
.lienzo {
  position: relative;
}

.lienzo img {
  display: block;
}

.lienzo img.encima {
  position: absolute;
  left: 0;
  top: 0;
}

/* Pantalla de piso: marco de monitor, sin barra. */
.monitor {
  overflow: hidden;
  border: 12px solid var(--marca-tinta);
  border-radius: 18px;
  background: var(--marca-tinta);
  box-shadow: var(--sombra-marco);
}

/* Terminal portátil dibujada en CSS: cuerpo oscuro, ranura arriba, pantalla redondeada. */
.terminal {
  position: absolute;
  margin: 0;
  padding: 34px 16px 16px;
  border-radius: 56px;
  background: var(--marca-tinta);
  box-shadow: 0 30px 70px rgb(20 22 29 / 0.26), 0 2px 8px rgb(20 22 29 / 0.16);
}

.terminal::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 76px;
  height: 8px;
  margin-left: -38px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.16);
}

.terminal-pantalla {
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
}

.terminal img {
  display: block;
}

/* Recuadro de acercamiento: un recorte de la segunda captura, con su borde de acento. */
.recuadro {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 26px 64px rgb(20 22 29 / 0.24), 0 0 0 3px var(--lamina-acento-relleno);
}

.recuadro img {
  display: block;
}

/* Pie bajo la captura. */
.pie-fila {
  margin-top: 20px;
  font-size: var(--texto-menor);
  line-height: 1.2;
}

.pie {
  color: var(--lamina-suave);
  font-size: var(--texto-menor);
}

/* ---------- Portada y cierre ---------- */

.portada .lockup,
.cierre .lockup {
  position: absolute;
  left: var(--m);
}

.portada .lockup {
  top: 96px;
  width: 330px;
  height: 120px;
}

.portada h1 {
  position: absolute;
  left: var(--m);
  top: 372px;
  font-size: var(--motor-texto-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.portada .bajada {
  position: absolute;
  left: var(--m);
  top: 612px;
  width: 1320px;
  font-size: 44px;
  line-height: 1.3;
}

/* La línea del estándar, abajo, en el tono suave de la lámina azul. */
.portada .estandar {
  position: absolute;
  left: var(--m);
  top: 884px;
  width: 1500px;
  font-size: var(--texto-cuerpo);
  line-height: 1.3;
  color: var(--lamina-suave);
}

.cierre .lockup {
  top: 120px;
  width: 494px;
  height: 180px;
}

.cierre .cuerpo {
  position: absolute;
  left: var(--m);
  top: 404px;
  width: 1400px;
  font-size: 44px;
  line-height: 1.3;
}

.cierre .contacto {
  position: absolute;
  left: var(--m);
  top: 820px;
  display: flex;
  gap: 72px;
  font-size: 40px;
  font-weight: 500;
}

.cierre .contacto a {
  color: var(--lamina-tinta);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

/* ---------- La cadena (diagrama de flujo) ----------
   Nodos HTML en coordenadas de lámina y flechas en un SVG del tamaño de la lámina. Recorrido
   principal en una fila (y 344-448), el ramal de fabricación debajo del almacén (y 600-704) y la
   flecha de trazabilidad abajo, de Cliente a Proveedor (y 840). */

/* Todo el diagrama baja 24 px para quedar centrado entre el texto y el pie de la lámina; las
   coordenadas de nodos y flechas son las de la lámina sin ese desplazamiento. */
.s-cadena .diagrama {
  position: absolute;
  left: 0;
  top: 24px;
  width: 1920px;
  height: 1080px;
}

.s-cadena .flechas {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.s-cadena .trazo {
  fill: none;
  stroke: var(--marca-primario);
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.s-cadena .punta {
  fill: var(--marca-primario);
}

.s-cadena .regreso .trazo {
  stroke: var(--marca-acento);
}

.s-cadena .regreso .punta {
  fill: var(--marca-acento);
}

.s-cadena .nodo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 216px;
  height: 104px;
  padding: 0 14px;
  border: 3px solid var(--marca-primario);
  border-radius: 16px;
  background: #fff;
  color: var(--lamina-titulo);
  font-size: var(--texto-menor);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* El almacén, que es el tema, va relleno. */
.s-cadena .nodo.foco {
  background: var(--marca-primario);
  color: var(--sobre-relleno);
}

/* El ramal de fabricación, sobre niebla. */
.s-cadena .nodo.ramal {
  background: var(--marca-fondo-suave);
}

/* El rótulo va centrado sobre la línea de regreso (y = 840) por una fila que no se anima: GSAP deja
   translate: none en línea al animar, y un centrado con translate se perdería. */
.s-cadena .fila-rotulo {
  position: absolute;
  left: 0;
  right: 0;
  top: 810px;
  display: flex;
  justify-content: center;
}

.s-cadena .rotulo-regreso {
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border: 3px solid var(--marca-acento);
  border-radius: 28px;
  background: #fff;
  color: var(--lamina-acento);
  font-size: var(--texto-menor);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------- Lámina por lámina ---------- */

/* Resumen: una fila de texto y la captura grande. */
.s-resumen .captura {
  top: 210px;
}

/* Pasos: dos secuencias de tres pasos sobre la captura. */
.s-pasos .flujos {
  position: absolute;
  left: var(--m);
  top: 252px;
  display: grid;
  gap: 44px;
}

.s-pasos .flujo {
  display: grid;
  grid-template-columns: 430px auto;
  align-items: center;
}

.s-pasos .flujo-rotulo {
  font-size: 32px;
  font-weight: 500;
  color: var(--lamina-titulo);
}

.s-pasos .pasos {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.s-pasos .pasos li {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: var(--texto-cuerpo);
  counter-increment: paso;
}

.s-pasos .pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--marca-primario);
  color: var(--sobre-relleno);
  font-size: 30px;
  font-weight: 500;
}

.s-pasos .pasos li:not(:last-child)::after {
  content: "→" / "";
  margin: 0 30px 0 12px;
  color: var(--lamina-acento);
  font-size: 40px;
}

/* La fila del pie termina hacia y = 1030, como en Ubicaciones; los pasos quedan centrados entre el
   título y la captura. */
.s-pasos .captura {
  top: 563px;
}

/* Ubicaciones: texto en dos filas y la lista que cambia a la impresión de etiquetas. */
.s-ubicaciones .captura {
  top: 258px;
}

/* Acomodo: reglas arriba; abajo el texto y la terminal que asoma. */
.s-acomodo .captura {
  top: 150px;
}

.s-acomodo .cuerpo {
  top: 640px;
  width: 1060px;
}

.s-acomodo .terminal {
  left: 1273px;
  top: 600px;
}

/* Lotes: tabla arriba; abajo el texto y el acercamiento a las fechas. */
.s-lotes .captura {
  top: 150px;
}

.s-lotes .cuerpo {
  top: 640px;
  width: 860px;
}

.s-lotes .recuadro {
  left: 1024px;
  top: 620px;
}

/* Mínimo y máximo: reglas arriba; abajo el texto y el recuadro de la sugerencia. */
.s-minmax .captura {
  top: 150px;
}

.s-minmax .cuerpo {
  top: 776px;
  width: 900px;
}

.s-minmax .recuadro {
  left: 1116px;
  top: 712px;
}

/* Ola: texto, el lote en el escritorio y la terminal a la derecha. */
.s-ola .cuerpo {
  width: 1090px;
}

.s-ola .captura {
  top: 306px;
}

.s-ola .terminal {
  left: 1298px;
  top: 130px;
}

/* Handheld y conteo: columna de texto a la izquierda y terminales a la derecha. */
.lateral .columna {
  position: absolute;
  left: var(--m);
  top: 64px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.lateral h2 {
  position: static;
  white-space: normal;
}

.lateral .cuerpo {
  position: static;
  width: auto;
}

.lateral .pie {
  margin-top: auto;
}

.s-handheld .columna {
  width: 680px;
}

.s-handheld .t1 {
  left: 830px;
  top: 64px;
}

.s-handheld .t2 {
  left: 1347px;
  top: 164px;
}

.s-conteo .columna {
  width: 880px;
}

.s-conteo .t1 {
  left: 1120px;
  top: 64px;
}

/* Trazabilidad: el lote a la izquierda con el texto debajo, y el producto a la derecha. */
.s-trazabilidad .c-lote {
  top: 150px;
}

.s-trazabilidad .cuerpo {
  top: 612px;
  width: 865px;
}

.s-trazabilidad .c-producto {
  left: 1009px;
  top: 150px;
}

/* PackTally: texto en dos filas y la pantalla de piso. */
.s-packtally .captura {
  top: 258px;
}

/* ---------- Controles de navegación ----------
   Fuera del escenario. Aparecen al mover el puntero, tocar la pantalla o pulsar Tab y se ocultan
   solos, así que no salen en el render a PNG ni en el PDF. */

.controles {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgb(20 22 29 / 0.78);
  color: #fff;
  font: 500 16px/1 "marca-cuerpo", ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s linear 0.25s;
}

/* Con foco de teclado se quedan a la vista; tras un clic con el ratón, el foco del botón no los
   retiene (por eso :focus-visible y no :focus-within). */
html.controles-visibles .controles,
.controles:has(:focus-visible) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}

.ctl {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 30px;
  cursor: pointer;
}

.ctl:hover {
  background: rgb(255 255 255 / 0.16);
}

.ctl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ctl-cuenta {
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

html.modo-impresion .controles {
  display: none;
}

html.motor body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* En un teléfono, el escenario absoluto de 1920 px desbordaba la página y Chrome móvil ensanchaba
   innerWidth con ese desborde (583 px en un iPhone de 390, medido con agent-browser), que es con lo
   que el motor calcula la escala: la lámina salía recortada por los lados. Fijo no desborda la
   página, y en impresión manda la regla del motor. */
html.modo-proyeccion .escenario {
  position: fixed;
}

/* Avanzar con clic no debe ir dejando palabras seleccionadas. */
html.modo-proyeccion .escenario {
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .controles,
  html.controles-visibles .controles {
    transition: none;
  }
}