/* ==========================================================================
   Constructor VEX IQ — la mesa de construccion, clara y ordenada
   --------------------------------------------------------------------------
   Direccion: la misma del inventario (contrato de Alma). El lienzo manda; la
   paleta y los pasos son cajones que se abren cuando hacen falta. Una sola
   herramienta activa a la vez, y lo tecnico (rejilla, iman, giro) vive en la
   hoja de Precision, no en la barra.

   Reglas de la casa: solo tokens del sistema de diseno, botones pastilla,
   campos con radio --radius-sm y alto --control-h, iconos del juego SVG (trazo
   1.8), sin glifos sueltos.
   ========================================================================== */

:root {
  /* Lo que lee el lienzo 3D (scene.js): fondo y suelo BLANCOS (el dueño:
     «el bg del constructor ponlo blanco en lugar de azul») y una rejilla gris
     neutra, sin tinte azul. Las piezas se separan del blanco por su contorno y
     su delineado. El lienzo es SIEMPRE claro. Los valores van en hex porque
     three no entiende color-mix. */
  --lienzo-fondo: #ffffff;
  --lienzo-suelo: #ffffff;
  --lienzo-rejilla: #d4d8de;
  /* El delineado fino de las piezas (tono.js): la linea de cada arista. Va en la
     tinta del sistema y no en un gris medio, porque es de 1 px y tiene que
     separarse del plastico claro en vez de fundirse con el. */
  --lienzo-arista: #102443;

  /* El riel lleva tres nombres y el mas largo es «Seleccionar»: a 12 px ocupa
     74 px, y el boton es el ancho del riel menos su relleno. */
  --riel-w: 92px;
  /* Radio de los controles (botones, chips, segmentos): 8 px, como una app de
     escritorio. La pastilla (--radius-pill) queda para barras de progreso,
     puntos e iconos circulares. */
  --radius-control: 8px;
  /* Radios de app, no de web de marketing: los de villacampast.com (18 y 30 px)
     hacen tarjetas y botones demasiado redondos para una herramienta. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --inspector-w: 328px;
  --barra-h: 60px;
  --pie-h: 32px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Solo para lectores de pantalla y para saltar al lienzo con el teclado. */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 var(--radius-sm) 0;
}
.salto:focus { left: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mono { font-family: var(--font-mono); }
.crece { flex: 1 1 auto; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- barra --- */

.barra {
  flex: 0 0 auto;
  height: var(--barra-h);
  /* El menu del perfil (perfil-menu.css) se cuelga de --barra-alto, que alli
     vale 60 px fijos. Aqui la barra mide otra cosa: 92 px en el telefono
     (ver el bloque de 520 px mas abajo). Declarado en la barra y no en :root
     porque perfil-menu.css se carga despues y ganaria el empate. */
  --barra-alto: var(--barra-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 30;
}

.barra__titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
  padding-right: var(--space-2);
  border-right: 1px solid var(--border);
  align-self: center;
  line-height: 1.2;
}
.barra__titulo::after { content: ""; }

/* La marca de la barra: el logo de Villacampa y, junto a el, «Constructor»; todo
   es un enlace a la portada. Hasta 900 px (telefono y tableta) el <picture> del
   HTML cambia el logo por el escudo. */
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.barra__marca:hover { color: var(--text); }
.barra__marca:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* El logo es el PNG oficial (525x134, fondo transparente, para fondo claro):
   a 30 px de alto mide 117; el escudo del telefono, 30. */
.barra__marca-logo {
  display: block;
  height: 30px;
  width: auto;
  flex: none;
}
.barra__marca picture { display: block; flex: none; }

.barra__marca-palabra {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-left: var(--space-2);
  border-left: 1px solid var(--border);
}

/* El nombre entero solo cabe en pantallas anchas: medido en la barra real,
   con «Constructor» a 1280 px se sale 82 px de largo. Por debajo del corte se
   queda el logo de Villacampa, que es lo que se reconoce.

   El corte es 1400 y es medido, no redondo. La palabra añade 109 px a la marca
   (227 con ella, 118 sin ella, con el logo de Villacampa de 30 px de alto).
   Medido en la barra servida a 1401 con sesión: con la palabra el campo del
   nombre queda en 265 px —95 por encima de su suelo de 170, y lo que no quepa
   se corta con puntos suspensivos y sigue en el title—; sin ella (1400), en
   374. Exportar conserva su etiqueta en los dos casos. No se baja sin volver a
   medir: cada 109 px que recupera la marca los pierde el campo. */
@media (max-width: 1400px) {
  .barra__marca-palabra { display: none; }
}

.barra__volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  color: var(--text-muted);
  text-decoration: none;
  flex: 0 0 auto;
}
.barra__volver:hover { background: var(--surface-2); color: var(--text); }
.barra__volver:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.barra__modelo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.barra__modelo input {
  font: inherit;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px var(--space-2);
  min-width: 0;
  width: min(420px, 100%);
  height: 44px;
  /* El nombre es lo unico que dice que modelo se esta editando: si no cabe, se
     corta con puntos suspensivos y no a mitad de una letra. El nombre entero
     sigue a mano en el `title`, que shell.js copia del valor, y en el lector de
     pantalla, que al llegar al campo lee el valor entero. */
  text-overflow: ellipsis;
}
.barra__modelo input:hover { border-color: var(--border); }
.barra__modelo input:focus {
  outline: none;
  border-color: var(--focus);
  background: var(--surface-2);
}

.barra__estado {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  background: var(--success-soft);
  color: var(--success);
  font-weight: 600;
}
.barra__estado[data-estado="guardando"] { background: var(--surface-2); color: var(--text-muted); }
.barra__estado[data-estado="error"] { background: var(--danger-soft); color: var(--danger); }

.barra__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.barra__sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 var(--space-1);
}

/* -------------------------------------------------------------- botones --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  /* Ningun boton por debajo de 44 px de ancho: el de Exportar, que a 390 solo
     lleva el icono, medía 42. */
  min-width: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.btn:hover { background: var(--border); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn--primario { background: var(--primary); color: var(--on-primary); }
.btn--primario:hover { background: var(--primary-hover); }

.btn--fantasma { background: transparent; border-color: var(--border); }
.btn--fantasma:hover { background: var(--surface-2); }
/* En la barra de arriba los botones son de herramienta: sin borde ni fondo, y
   solo al pasar el raton se marcan. Un borde por boton en una fila de cuatro
   los convierte en pastillas. */
.barra .btn--fantasma { border-color: transparent; font-weight: 500; color: var(--text); padding: 0 var(--space-3); }
.barra .btn--fantasma:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.barra .btn--fantasma .ico { color: var(--text-muted); }

.btn--icono {
  width: var(--control-h);
  /* Sin --control-h definida el ancho se quedaba en el del icono (42 px a 390):
     el boton de icono es un blanco tactil y no baja de 44. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
}
.btn--icono:hover { background: var(--surface-2); color: var(--text); }

.btn--mini { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--ancho { width: 100%; justify-content: flex-start; }
.btn--encendido { background: var(--success-soft); border-color: var(--success); color: var(--success); }

.btn.on { background: var(--primary-soft); color: var(--on-primary-soft); border-color: var(--primary-soft); }

.enlace {
  color: var(--link);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.enlace:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- campo --- */

.campo {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  margin-top: var(--space-3);
}

.campo__linea {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Una preferencia de si/no (el gizmo grande): la casilla a su tamano, no a lo
   ancho como los campos de texto, y su etiqueta al lado. Va con las dos clases
   porque `.campo input` viene despues y, con la misma especificidad, ganaria. */
.campo.campo--casilla {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.campo.campo--casilla input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.campo input,
.campo select,
/* Pestañas de plataforma (123 · GO · IQ · EXP · V5 · CTE · AIR): pestañas de
   app, subrayadas, sin cajas ni pastillas. Una sin piezas aun se ve mas tenue. */
.plataformas {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.plataformas::-webkit-scrollbar { display: none; }
.plataformas__tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.plataformas__tab:hover { color: var(--text); }
.plataformas__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.plataformas__tab[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.plataformas__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}
.plataformas__tab--vacia { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.plataformas__aviso {
  flex: 0 0 auto;
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-sm, 13px);
  line-height: 1.45;
}

.cajon__filtros input,
.cajon__filtros select,
.dialogo input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  height: var(--control-h);
  padding: 0 var(--space-3);
  width: 100%;
  min-width: 0;
}
.campo input:focus,
.campo select:focus,
.cajon__filtros input:focus,
.cajon__filtros select:focus,
.dialogo input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}

.campo__unidad { font-size: var(--text-sm); color: var(--text-muted); flex: 0 0 auto; }

/* Las flechitas del navegador no son del sistema: el paso lo dan los botones. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* ------------------------------------------------------------ estructura --- */

.app {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--riel-w) minmax(0, 1fr) var(--inspector-w);
  background: var(--bg);
}

/* ----------------------------------------------------------------- riel --- */

.riel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.riel__crece { flex: 1 1 auto; }

/* El riel es una columna sobria, como la de una herramienta profesional: sin
   cajas ni bordes. El modo encendido se dice con UNA señal (icono y nombre en
   el azul de la casa y una barra fina pegada al borde del riel), no con tres. */
.riel__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 2px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.riel__btn .ico { width: 20px; height: 20px; stroke-width: 1.75; }
/* Si un nombre no cupiera, se corta con puntos suspensivos dentro del boton:
   nunca se sale del riel ni pisa el lienzo. */
.riel__btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.riel__btn:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); color: var(--text); }
.riel__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.riel__btn[aria-pressed="true"] {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
}
.riel__btn[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
/* La barra del modo encendido, pegada al borde izquierdo del riel, como una
   pestaña abierta. Fina y sin caja alrededor. */
.riel__btn--activo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.riel__btn--activo .ico { color: var(--primary); }

/* Al pie del riel y aparte de los cuatro modos, con una raya fina encima, los
   atajos de teclado (el dueño los quiso aqui, donde antes estaba el paso). Al
   pasar el raton su icono se pinta en el azul de la casa, el mismo del modo
   activo. */
.riel__btn--pie {
  position: relative;
  margin-top: var(--space-3);
}
.riel__btn--pie::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-2) - 1px);
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--border);
}
.riel__btn--pie:hover .ico { color: var(--primary); }

/* ------------------------------------------------- el pie del lienzo --- */

/* «Teclado» y el cuadro del paso, uno al lado del otro y pegados a la esquina
   de abajo. El grupo es el que se coloca: si el texto crece o la pantalla se
   estrecha, se ponen en dos renglones en vez de taparse. */
.lienzo__pie {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 22;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
}

/* El cuadro del paso, como atajo a sus opciones: el nombre del paso en el que se
   dibuja y cuatro teclas a su lado (anterior, siguiente, mandar la pieza
   elegida a este paso y crear otro). 44 px de alto: se toca con el dedo. */
.paso-atajo {
  display: inline-flex;
  align-items: stretch;
  min-height: 44px;
  padding: 2px;
  font-size: var(--text-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 14%, transparent);
}

.paso-atajo__btn,
.paso-atajo__nombre {
  min-width: 36px;
  min-height: 38px;
  padding: 0 8px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

/* El nombre del paso manda: va en el azul de la casa y entre dos rayas finas,
   para que se vea que es el boton que abre el panel. */
.paso-atajo__nombre {
  min-width: 0;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--primary);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
}

.paso-atajo__btn:hover,
.paso-atajo__nombre:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Sin paso anterior (o sin siguiente) la flecha se apaga, pero sigue ahi: el
   cuadro no cambia de tamano al llegar al final. */
.paso-atajo__btn:disabled { opacity: 0.4; cursor: default; background: none; }

.paso-atajo__btn:focus-visible,
.paso-atajo__nombre:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* El menu de ⋯: las opciones de la ventana de pasos, encima del cuadro y dentro
   del lienzo. Es el mismo .menu de la barra, atado al pie en vez de a la
   esquina de arriba. */
.menu--paso {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 8px);
  min-width: 250px;
  /* Las ocho entradas caben sin scroll en escritorio; si la pantalla es baja,
     scrollea dentro (el .menu ya lo hace). */
  max-height: min(70vh, 420px);
}
.menu--paso button { min-height: 40px; }
.menu--paso button:disabled { opacity: 0.45; cursor: default; background: none; }

/* --------------------------------------------------------------- lienzo --- */

.lienzo {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--lienzo-fondo);
  touch-action: none;
}

.lienzo canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  /* El lienzo se agarra: la mano abierta invita a arrastrar la vista o una
     pieza. Al arrastrar de verdad, la mano se cierra (clase `arrastrando`). */
  cursor: grab;
}

.lienzo canvas.arrastrando { cursor: grabbing; }

/* Arrastrar en el vacio abre una caja de seleccion (como en Studio). */
.lienzo canvas.encajando { cursor: crosshair; }

.lienzo__caja {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

/* El contador de piezas viaja con la caja mientras se arrastra. */
.lienzo__caja::after {
  content: attr(data-n) " piezas";
  position: absolute;
  top: -1.55em;
  left: -1px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 11px/1.5 var(--font-text, system-ui);
  white-space: nowrap;
}

.lienzo--sin-3d canvas { display: none; }

.sin-3d {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.sin-3d h2 { margin: 0; font-size: var(--text-xl); color: var(--text); }
.sin-3d p { margin: 0; max-width: 46ch; }

.lienzo__cinta {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  /* El cubo de vistas vive arriba a la derecha (92 px): la cinta se para antes
     para que la frase no se le meta debajo. */
  right: calc(104px + var(--space-2));
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.chip--herramienta { text-transform: none; }
/* La pista: que espera el lienzo del siguiente clic. Va en tono de ayuda (no de
   aviso) y si no cabe se corta con puntos suspensivos en vez de salirse. */
.chip--pista {
  /* inline-block y no flex: los puntos suspensivos solo funcionan con la frase
     como texto propio, no como hijo anonimo de un flex. */
  display: inline-block;
  height: auto;
  min-height: 30px;
  padding: 6px var(--space-3);
  line-height: 1.3;
  max-width: min(48ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.chip--pista:empty { display: none; }
.chip--encaje[data-tono="ok"] { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }
.chip--encaje[data-tono="aviso"] { color: var(--warning); border-color: var(--warning-soft); background: var(--warning-soft); }
/* La frase del encaje: que pieza entra en que agujero mientras se arrastra.
   Va en el tono de accion de la casa (no en verde ni ambar: no es un resultado
   ni un aviso) para que se lea como una anotacion de la escena. */
.chip--encaje-frase {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-weight: 600;
}

/* La leyenda de anclajes del lienzo: seis formas con su nombre, sobre una placa
   translucida para no tapar la pieza. Vive DENTRO del pie del lienzo, en su
   propio renglon: asi nunca se mete debajo del cuadro del paso, y si el pie
   envuelve en pantalla estrecha la leyenda baja con el en vez de quedar fija a
   una altura que deja de valer. */
.leyenda-lienzo {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  max-width: min(46ch, 100%);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-1);
  font-size: var(--text-xs);
  pointer-events: none;
}
.leyenda-lienzo:empty { display: none; }
.leyenda-lienzo .leyenda__fila {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.leyenda-lienzo .leyenda__nombre { color: var(--text); }

/* El rotulo de colocacion: la pieza que esta en la mano. Va dentro de la cinta
   del lienzo, como un chip mas, para que nunca se monte encima de la frase del
   encaje; en pantalla estrecha envuelve con ella en vez de taparla. */
.rotulo-colocacion {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: var(--shadow-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
/* El rotulo vacio no ocupa sitio: `display` propio anula el `hidden` del navegador. */
.rotulo-colocacion[hidden] { display: none; }

/* Un boton encendido (Mostrar conexiones, Buscar conexion): se queda marcado
   mientras dura, sin cambiar de forma. */
.btn--encendido {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.vistas {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.vistas button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.vistas button:hover { background: var(--surface-2); color: var(--text); }
.vistas button.on { background: var(--primary); color: var(--on-primary); }
.vistas button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Los botones de vista siguen existiendo para el teclado y el lector de
   pantalla, pero a la vista los reemplaza el cubo de la esquina. */
.vistas--solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Con el teclado vuelven a verse, debajo del cubo: enfocar un boton invisible
   es una trampa, y las vistas tambien tienen que poder elegirse sin raton. */
/* Las vistas, aunque esten recogidas, no son botones enanos: al enfocarlas
   tienen que ser un blanco comodo (44 px, el minimo tactil; antes 24). */
.vistas--solo-lectores button {
  min-height: 44px;
  min-width: 44px;
}
.vistas--solo-lectores:focus-within {
  width: auto;
  height: auto;
  padding: 3px;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border: 1px solid var(--border);
  top: calc(var(--space-3) + 100px);
  z-index: 6;
}

/* El cubo de vistas: flota sobre el lienzo, sin tarjeta ni borde alrededor.
   Solo el cubo y su sombra, como el de Studio. */
.cubo {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
}
.cubo .cubo__lienzo {
  display: block;
  width: 92px;
  height: 92px;
  touch-action: none;
  cursor: default;
  filter: drop-shadow(0 6px 10px rgb(16 36 67 / 0.18));
}

.zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px: el minimo que se acierta con el dedo. A 34 px el nino fallaba el
     zoom y el encuadre en la tableta (medido a 390 px, 26 de octubre). */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.zoom button:hover { background: var(--surface-2); color: var(--text); }
.zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.angulo {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}
.angulo[hidden] { display: none; }
.angulo__titulo {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.angulo__fila {
  display: flex;
  align-items: center;
  gap: 4px;
}
.angulo__valor {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.angulo__valor:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.angulo__unidad { color: var(--text-muted); font-weight: 600; }
.angulo__ok {
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.angulo__ok:hover { background: var(--primary-hover); }
.angulo__ok:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.angulo__pista { font-size: var(--text-xs); color: var(--text-muted); }

/* ------------------------------------------------------ comprobaciones --- */

.comprobacion {
  position: absolute;
  top: calc(var(--space-3) + 42px);
  left: var(--space-3);
  width: min(340px, calc(100% - var(--space-6)));
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  z-index: 5;
}
.comprobacion__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.comprobacion__cabecera strong { font-size: var(--text-sm); }
.comprobacion__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.comprobacion__cerrar:hover { background: var(--surface-2); color: var(--text); }
.comprobacion__pestanas {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
}
.comprobacion__pestanas button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.comprobacion__pestanas button[aria-selected="true"] { background: var(--primary-soft); color: var(--on-primary-soft); }
.comprobacion__panel { padding: var(--space-3) var(--space-4); }
.comprobacion__linea { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
/* La linea de conectividad lleva a las piezas sueltas: se ve que se puede pulsar. */
.comprobacion__linea--accion {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.comprobacion__linea--accion:hover { color: var(--accent); }
.comprobacion__linea--accion:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.comprobacion__claves { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.comprobacion__claves li { display: flex; align-items: center; gap: var(--space-2); }
.comprobacion__nota {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.muestra {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--border-strong);
  flex: 0 0 auto;
}
.muestra--zona-ok { background: var(--success); }
.muestra--zona-aviso { background: var(--danger); }
.muestra--cuidado { background: var(--accent); }

/* ------------------------------------------------------------ callout ---- */

.callout-paso {
  position: absolute;
  right: var(--space-3);
  bottom: 96px;
  width: 200px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  z-index: 4;
}
.callout-paso__titulo { font-size: var(--text-xs); color: var(--text-muted); }
.callout-paso__lista { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.callout { display: grid; gap: 4px; font-size: var(--text-xs); text-align: center; width: 104px; }
.callout__imagen { width: 72px; height: 54px; object-fit: contain; }

/* ------------------------------------------------------------ inspector --- */

.inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.inspector__pestanas {
  display: flex;
  gap: 2px;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.inspector__pestanas button {
  flex: 1 1 0;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.inspector__pestanas button:hover { background: var(--surface-2); color: var(--text); }
.inspector__pestanas button[aria-selected="true"] { background: var(--primary-soft); color: var(--on-primary-soft); }
.inspector__pestanas button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* El asa de la hoja solo existe en el telefono (alli el inspector es una hoja
   que sube). En escritorio el inspector es una columna fija y no hay nada que
   subir ni bajar. */
.inspector__asa { display: none; }

.inspector__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-3); }
.inspector__panel { display: flex; flex-direction: column; gap: var(--space-3); }

.inspector__bloque {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
}
.inspector__titulo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inspector__dato { margin: 0; font-size: var(--text-sm); }
.inspector__dato--suave { color: var(--text-muted); font-size: var(--text-xs); }

/* La insignia del estado de la pieza: «Suelta» o «Conectada a 2». */
.insignia {
  margin-left: auto;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.insignia[data-estado="conectada"] { background: var(--success-soft); color: var(--success); }

/* Nivel 1: las tres frases que se leen sin saber nada y sus dos botones. */
.inspector__conexiones { gap: 6px; }
.inspector__siguiente {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.45;
}
.inspector__nivel1 { display: grid; gap: var(--space-2); }
.inspector__texto-acciones { display: flex; justify-content: space-between; padding: 0 var(--space-1); }
.inspector__texto-acciones .enlace {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 2px;
}
.inspector__texto-acciones .enlace:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.enlace--peligro { color: var(--danger); }

/* Nivel 2: el CAD, plegado dentro del mismo panel. */
.avanzado { border-top: 1px solid var(--border); padding-top: var(--space-1); }
.avanzado__resumen {
  cursor: pointer;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
}
.avanzado__resumen::-webkit-details-marker { display: none; }
.avanzado__resumen::before { content: "▸ "; }
.avanzado[open] .avanzado__resumen::before { content: "▾ "; }
.avanzado__resumen:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.avanzado__cuerpo { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
/* Los controles mudados desde «Precisión»: el panel mide 328 px y aquí mandan
   los objetivos táctiles (44 px siempre que quepan, spec §2). */
.avanzado__cuerpo .segmento button { height: 44px; }
.avanzado__cuerpo .campo { font-size: var(--text-xs); }
.avanzado__cuerpo .campo input[type="number"] { min-height: 36px; }

/* La lista exacta de anclajes: cada fila enciende su punto en la escena. */
.anclajes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
/* 44 px de alto: la fila se toca para señalar el anclaje en la escena, y con
   dedo no se acierta en 32. La lista scrollea cuando hay muchos agujeros. */
.anclajes__fila {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.anclajes__fila:hover { background: var(--surface-2); }
.anclajes__fila:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* El icono de la leyenda que acompaña a cada anclaje y a su tipo. La forma y
   el color son los de la marca del 3D (anclas-formas.js); el color lo pone la
   carcasa en `color`, que es lo que pinta el `currentColor` del icono. */
.ico--ancla { width: 13px; height: 13px; stroke-width: 2.2; }
.anclajes__texto { min-width: 0; }

/* Los tipos que tiene la pieza, junto a «Conexiones disponibles». */
.inspector__disponibles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tipos { display: inline-flex; align-items: center; gap: 4px; }

/* Las conexiones del modelo, en texto: una fila por unión, con su «Ver». */
.conexiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.conexiones__fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 2px 2px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
}
.conexiones__texto { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.conexiones__ver { flex: 0 0 auto; min-height: 28px; }

.inspector__botones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* La frase de ayuda del nivel 1: cambia con el estado de la pieza (spec §2). */
.ficha__ayuda {
  margin: 0;
  padding: 0 var(--space-1);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.inspector__ids { word-break: break-all; font-size: 12px; user-select: all; }
.vacio__accion { margin-top: var(--space-3); }

.vacio { text-align: center; padding: var(--space-5) var(--space-3); color: var(--text-muted); }
.vacio__ico { width: 34px; height: 34px; color: var(--border-strong); }
.vacio__titulo { margin: var(--space-2) 0 4px; font-weight: 700; color: var(--text); }
.vacio__texto { margin: 0; font-size: var(--text-xs); }

/* Foto a la izquierda; a la derecha, nombre, SKU, medidas y DEBAJO la insignia
   de estado. En una columna estrecha, la insignia en la misma fila se llevaba el
   ancho y el nombre, el SKU y las medidas se partian de token en token. */
.ficha {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
}
/* La pieza va directa sobre la tarjeta: la imagen es transparente, sin caja propia. */
.ficha__foto { grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: contain; }
.ficha__datos { grid-column: 2; grid-row: 1; min-width: 0; }
/* El nombre se parte por palabras; el SKU y las medidas nunca por la mitad. */
.ficha__nombre { margin: 0; font-weight: 700; font-size: var(--text-sm); overflow-wrap: break-word; }
.ficha__sku { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha__medidas { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha > .insignia { grid-column: 2; grid-row: 2; margin-left: 0; justify-self: start; align-self: start; }
/* Para que sirve la pieza: el texto va debajo de su ficha, separado del resto. */
.ficha__uso {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* La posicion y el giro de la pieza: tres campos por fila, con la letra del
   eje en su color (el mismo de los ejes del gizmo) y el numero en mono. */
.datos-ejes {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
}
.datos-ejes .inspector__titulo { margin: 0; }
.datos-ejes__unidad { font-weight: 400; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.datos-ejes__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.eje-campo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.eje-campo:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-soft, var(--surface-2)); }
.eje-campo__letra {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.eje-campo:focus-within .eje-campo__letra { color: var(--accent); }
.eje-campo__valor {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0;
}
.eje-campo__valor:focus { outline: none; }
/* Las flechitas del input numerico roban ancho en un campo tan chico. */
.eje-campo__valor::-webkit-outer-spin-button,
.eje-campo__valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eje-campo__valor[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.accion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.accion:hover { background: var(--surface-2); }
.accion:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.accion--peligro { color: var(--danger); border-color: var(--danger-soft); }
.accion--peligro:hover { background: var(--danger-soft); }

/* ------------------------------------------------------------- pasos ----- */

.pasos__cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.pasos__cabecera strong { flex: 1 1 auto; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.pasos__cabecera--grupos { margin-top: var(--space-2); }

.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.paso {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.paso:hover { border-color: var(--border-strong); }
.paso.activo { border-color: var(--primary); background: var(--primary-soft); }
.paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.paso.activo .paso__num { background: var(--primary); color: var(--on-primary); }
.paso__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.paso__nombre { font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso__cuenta { font-size: 12px; color: var(--text-muted); }
.paso__acciones { display: flex; gap: 2px; flex: 0 0 auto; }
.paso__acciones button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
}
.paso__acciones button:hover { background: var(--surface-2); color: var(--text); }

.grupo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: var(--bg);
}
.grupo--vacio { color: var(--text-muted); font-size: var(--text-xs); display: block; }
.grupo__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.grupo__nombre { font-size: var(--text-xs); font-weight: 600; }
.grupo__cuenta { font-size: 12px; color: var(--text-muted); }
.grupo__acciones button {
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.grupo__acciones button:hover { background: var(--surface-2); }

.pasos__pie { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

/* -------------------------------------------------------------- cajon ---- */

.cajon {
  position: fixed;
  /* Hasta el borde de la barra de estado, no por debajo: con el cajon abierto su
     pie se sentaba encima de la barra (medido a 1280: pie del cajon 743-800,
     barra 767-800). El pie del cajon es el que lleva el aviso de anclas. */
  inset: var(--barra-h) 0 calc(var(--pie-h) + 1px) 0;
  z-index: 40;
  display: flex;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}

.cajon__caja {
  display: flex;
  flex-direction: column;
  width: min(380px, 92vw);
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  animation: cajon-entra var(--dur-2) var(--ease-enter);
}
@keyframes cajon-entra { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

.cajon__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
}
.cajon__cabecera h2 { margin: 0; font-size: var(--text-lg); }
.cajon__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cajon__cerrar:hover { background: var(--surface-2); color: var(--text); }

.cajon__filtros { display: grid; gap: var(--space-2); padding: 0 var(--space-4); }
.cajon__cuenta { margin: var(--space-3) var(--space-4) var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

.cajon__lista {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-3) var(--space-4);
  overflow-y: auto;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
  align-content: start;
}

.cajon__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.cajon__pista { text-align: right; font-size: 12px; }

.pieza {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pieza:hover { background: var(--surface-2); border-color: var(--border); }
.pieza:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pieza img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.pieza__nombre { font-size: var(--text-xs); font-weight: 600; }
.pieza__sku { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.paleta__vacia, .paleta__error, .paleta__ayuda, .paleta__motivo {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg);
  border: 1px dashed var(--border);
}
.paleta__error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }
/* La seccion que dice con que piezas se puede seguir: rotulo mono en
   mayusculas, el mismo gesto que el titulo de la barra. */
.paleta__seccion {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------- biblioteca por lo que se hace --- */

/* El cajon de piezas ordenado por la tarea, no por el catalogo (spec §4):
   arriba las puertas —Recientes, Favoritas, Sugeridas y Por funcion— y debajo
   sus secciones. La lista plana del catalogo sigue entera al final, plegada en
   «Todo el catalogo», para cuando se busca por numero. Todo lo pinta
   app/biblioteca.js; aqui solo esta la piel. */
.biblio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-3) var(--space-4);
  scrollbar-gutter: stable;
}
.biblio--filtrando .biblio__puertas,
.biblio--filtrando .biblio__secciones,
.biblio--sin-catalogo .biblio__puertas,
.biblio--sin-catalogo .biblio__secciones { display: none; }

/* Las puertas se quedan pegadas arriba: al bajar por Estructura sigue a mano
   el camino de vuelta a Recientes. */
.biblio__puertas {
  /* Sin esto, dentro del cajon que hace scroll la fila se ENCOGE hasta los
     12 px: un hijo de flex se achica antes de dejar desbordar al padre. */
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: var(--space-1) 0 var(--space-2);
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
}
.biblio__puertas::-webkit-scrollbar { display: none; }
.biblio__puertas[hidden] { display: none; }
.biblio__puerta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.biblio__puerta:hover { border-color: var(--border-strong); }
.biblio__puerta[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.biblio__puerta-cuenta { font-family: var(--font-mono); font-size: 12px; opacity: 0.75; }
.biblio__puerta:focus-visible,
.biblio__ver:focus-visible,
.biblio__estrella:focus-visible,
.biblio__todo-cabecera:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.biblio__secciones { flex: 0 0 auto; display: grid; gap: var(--space-4); padding-bottom: var(--space-2); }
.biblio__seccion { display: grid; gap: var(--space-2); }
.biblio__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 20px;
  padding: 0 var(--space-1);
}
.biblio__titulo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.biblio__cuenta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.biblio__ver {
  /* Objetivo tactil de 24 px (WCAG 2.2 AA): medido a 390 px salia en 23. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.biblio__ver:hover { text-decoration: underline; }
.biblio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.biblio__vacio {
  margin: 0;
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* La tarjeta: miniatura, nombre corto, numero y tipos de union, con la
   estrella a la derecha. La fila entera es el boton de anadir. */
.biblio__pieza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.biblio__pieza:hover { border-color: var(--border-strong); }
.biblio__abrir {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.biblio__abrir:hover { background: var(--primary-soft); }
.biblio__abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.biblio__marco {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.biblio__foto { width: 56px; height: 56px; object-fit: contain; display: block; }
.biblio__texto { display: grid; gap: 1px; min-width: 0; }
.biblio__nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.biblio__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.biblio__numero { font-family: var(--font-mono); }
.biblio__cta { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--on-primary-soft); }
.biblio__estrella {
  width: 36px;
  height: 36px;
  margin-right: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.biblio__estrella:hover { background: var(--surface-2); color: var(--text); }
.biblio__estrella[aria-pressed="true"] { color: var(--primary); }

/* «Todo el catalogo»: la lista plana de siempre, plegada. Dentro no hay una
   segunda barra de scroll; la del cajon es la unica. */
.biblio__todo {
  flex: 0 0 auto;
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
  padding: var(--space-2) 0;
}
.biblio__todo-cabecera {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.biblio__todo-cabecera::-webkit-details-marker { display: none; }
.biblio__todo-cabecera::before {
  content: "▸";
  display: inline-block;
  font-size: 13px;
  color: var(--text);
  transition: transform var(--dur-1) var(--ease-standard);
}
.biblio__todo[open] .biblio__todo-cabecera::before { transform: rotate(90deg); }
.biblio__todo-cabecera:hover { background: var(--surface-2); }
.biblio__todo-cuenta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.biblio__todo .cajon__cuenta { margin: var(--space-2) var(--space-1); }
.biblio__todo .cajon__lista { overflow: visible; padding: 0 0 var(--space-2); }

/* En el telefono la hoja es mas estrecha: miniatura y estrella mas pequeñas,
   el mismo ritmo vertical. */
@media (max-width: 520px) {
  .biblio__abrir { grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-2); }
  .biblio__marco { width: 52px; height: 52px; }
  .biblio__foto { width: 46px; height: 46px; }
  .biblio__estrella { width: 40px; height: 40px; margin-right: 4px; }
  .biblio__secciones { gap: var(--space-3); }
}

/* --------------------------------------------------------------- hoja ---- */

.hoja {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}
.hoja__caja {
  width: min(380px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  animation: hoja-entra var(--dur-2) var(--ease-enter);
}
@keyframes hoja-entra { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.hoja__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.hoja__cabecera h2 { margin: 0; font-size: var(--text-lg); }
.hoja__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.hoja__cerrar:hover { background: var(--surface-2); color: var(--text); }
.hoja__cuerpo { padding: 0 var(--space-4) var(--space-6); overflow-y: auto; display: grid; gap: var(--space-3); }

.hoja__bloque {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
}
.hoja__titulo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hoja__pista { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ------------------------------------------- tutorial de anclas (hoja) --- */
/* La leyenda de seis formas, los pasos de marcado y las notas. Todo vive en la
   hoja lateral, que en el telefono ocupa el ancho entero: los renglones largos
   se leen y los objetivos se tocan. */

.leyenda-anclas,
.lista-anclas,
.pasos-anclas,
.notas-anclas { margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.leyenda-anclas { list-style: none; }
.leyenda-anclas__fila {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
}
.leyenda-anclas__fila .ico--ancla { width: 18px; height: 18px; margin-top: 1px; }
.leyenda-anclas__nombre { font-weight: 600; }
/* «Gira» / «No gira» / «Lo decide el agujero»: dato, no adorno, y se lee en
   palabras. Va en su renglon para que no empuje el nombre. */
.leyenda-anclas__giro {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.leyenda-anclas__que { margin: 2px 0 0; color: var(--text-muted); }

.lista-anclas { list-style: none; font-size: 12px; }
.lista-anclas li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; }
.lista-anclas li::before { content: "•"; color: var(--accent, #0460a9); font-weight: 700; }

/* Los pasos van numerados con su circulo, que es lo que se sigue con el dedo. */
.pasos-anclas { list-style: none; counter-reset: paso-ancla; font-size: 12px; }
.pasos-anclas li {
  counter-increment: paso-ancla;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.pasos-anclas li::before {
  content: counter(paso-ancla);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--accent, #0460a9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pasos-anclas__titulo { font-weight: 600; display: block; }
.pasos-anclas__texto { margin: 2px 0 0; color: var(--text-muted); }

.notas-anclas { font-size: 12px; }
.notas-anclas dt { font-weight: 600; }
.notas-anclas dd { margin: 2px 0 0; color: var(--text-muted); }

.segmento {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
}
.segmento button {
  flex: 1 1 0;
  height: 34px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.segmento button:hover { background: var(--surface-2); color: var(--text); }
.segmento button.on { background: var(--primary); color: var(--on-primary); }

/* --------------------------------------------------------------- menus --- */

.menu {
  position: fixed;
  top: calc(var(--barra-h) - 4px);
  right: var(--space-3);
  z-index: 60;
  min-width: 230px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: 2px;
  /* Con una entrada mas el menu llega a ~420 px: en pantallas bajas (telefono
     acostado) se corta el ultimo boton, asi que scrollea en vez de salirse. */
  max-height: calc(100vh - var(--barra-h) - var(--space-3));
  max-height: calc(100dvh - var(--barra-h) - var(--space-3));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu button {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); outline: none; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-1) 0; }

.atajos { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.atajos th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  padding: 6px var(--space-3) 6px 0;
  white-space: nowrap;
  vertical-align: top;
}
.atajos td { padding: 6px 0; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.atajos tr:last-child td { border-bottom: 0; }

.menu-pieza {
  position: fixed;
  z-index: 70;
  min-width: 190px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: 2px;
}
.menu-pieza button {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-pieza button:hover { background: var(--surface-2); }
.menu-pieza .peligro { color: var(--danger); }
.menu-pieza .peligro:hover { background: var(--danger-soft); }

/* ------------------------------------------------------------- dialogos --- */

.dialogo {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
.dialogo__caja {
  width: min(520px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.dialogo__caja h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.dialogo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.dialogo__lista li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dialogo__lista li > button {
  flex: 1 1 auto;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dialogo__lista li > button:hover { background: var(--surface-2); }
.dialogo__lista li > button + button { flex: 0 0 auto; width: 44px; text-align: center; }
.dialogo__cuenta { margin: var(--space-2) 0; font-size: var(--text-xs); color: var(--text-muted); }
.dialogo__pie { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.dialogo__caja--texto { width: min(420px, 100%); }
.dialogo__caja--texto .dialogo__pie { gap: var(--space-2); }
.dialogo__mensaje { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------- inicio -- */

.inicio {
  position: fixed;
  /* Empieza DEBAJO de la barra: el velo tapa el lienzo, nunca el marco, o el
     primer clic en «Volver al inventario» o en «Cerrar sesión» se lo come el
     velo y hay que pulsar dos veces (t_a295d203d324). */
  top: var(--barra-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--text) 34%, transparent);
}
.inicio__caja {
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.inicio__cabecera { display: flex; align-items: center; justify-content: space-between; }
.inicio__cabecera h2 { margin: 0; font-size: var(--text-xl); }
.inicio__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.inicio__cerrar:hover { background: var(--surface-2); color: var(--text); }
.inicio__pista { margin: var(--space-1) 0 var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.inicio__lista {
  list-style: none; margin: 0; padding: 6px; overflow-y: auto; display: grid; gap: 6px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.inicio__pie { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }

.modelo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.modelo:hover { background: var(--surface-2); border-color: var(--border-strong); }
.modelo__nombre { font-weight: 600; font-size: var(--text-sm); display: block; }
.modelo__datos { font-size: var(--text-xs); color: var(--text-muted); }
/* Los ejemplos van aparte de «tus modelos»: se distinguen por el borde. */
.inicio__pista--ejemplos { margin-top: var(--space-5); }
.inicio__lista--ejemplos .modelo { border-style: dashed; }

/* ------------------------------------------------------------- arranque -- */

/* La primera vez con el lienzo vacio: tres caminos, no uno. La caja es la
   misma pieza que la de «Tus modelos» (mismo velo, mismo radio) para que el
   constructor no parezca dos aplicaciones. */
.arranque {
  position: fixed;
  top: var(--barra-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--text) 34%, transparent);
}
.arranque__caja {
  width: min(560px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.arranque__rotulo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.arranque__cabecera h2 { margin: var(--space-1) 0 0; font-size: var(--text-xl); }
.arranque__pista { margin: var(--space-1) 0 var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.arranque__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.arranque__opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.arranque__opcion:hover { background: var(--surface-2); border-color: var(--border-strong); }
.arranque__opcion:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* El camino recomendado se marca con el filo en acento, no con otro tipo de
   boton: los tres son igual de validos. */
.arranque__opcion--destacada {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.arranque__opcion--destacada:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.arranque__nombre {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
}
.arranque__marca {
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-xs);
  font-weight: 700;
}
.arranque__datos { font-size: var(--text-xs); color: var(--text-muted); }
.arranque__pie { display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/* --------------------------------------------------------------- manual -- */

.manual {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* La barra del manual es la de la mesa: 60 px, el rotulo mono en mayusculas y
   los botones pastilla. El manual es otra vista del constructor, no una
   pantalla aparte: quien llega aqui reconoce el mismo marco. */
.manual__barra {
  flex: 0 0 auto;
  height: var(--barra-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}

/* La marca de Villacampa, entera, en la cabecera del manual: el manual cubre la
   barra de la mesa y el logo tiene que verse siempre. */
.manual__marca { display: block; height: 26px; width: auto; flex: none; }

.manual__volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.manual__volver:hover { background: var(--surface-2); color: var(--text); }
.manual__volver:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.manual__titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.2;
  padding-right: var(--space-3);
  border-right: 1px solid var(--border);
}

.manual__modelo {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}
.manual__modelo b {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manual__estado {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual__acciones { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* La tira tecnica: las paginas y el color de lo ya montado, en pastillas sobre el tono
   de panel, como los grupos de la hoja de precision. */
.manual__opciones {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}

.manual__grupo,
.manual__fantasma {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.manual__grupo label,
.manual__fantasma label { cursor: pointer; }

.manual__grupo select,
.manual__fantasma select {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  height: 28px;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.manual__grupo select:focus-visible,
.manual__fantasma select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.manual__fantasma .etiqueta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.manual__fantasma input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* La zona de las hojas se recorre con el teclado: lleva el anillo de foco. */
.manual__paginas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* El lienzo del manual: las hojas flotan sobre el azul de panel con la rejilla
   de la mesa detras. Es la misma mesa del constructor, pero en papel. */
.manual__paginas {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-6);
  justify-content: center;
  align-content: start;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(color-mix(in srgb, var(--lienzo-rejilla) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--lienzo-rejilla) 30%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media (max-width: 820px) {
  .manual__barra { height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-3); row-gap: var(--space-2); }
  .manual__titulo { border-right: 0; padding-right: 0; }
  .manual__modelo { flex: 1 1 100%; order: 3; }
  .manual__acciones { margin-left: auto; }
  .manual__opciones { padding: var(--space-2); }
  /* La hoja mide lo que mide el papel: en un telefono se recorre a lo ancho
     en vez de encogerse y mentir sobre el tamano. */
  .manual__paginas { padding: var(--space-4) var(--space-2); overflow-x: auto; }
}

/* Una HOJA del manual: lo que se imprime en un papel. Lleva clase propia
   porque `.hoja` es el cajon lateral (fijo y oculto al imprimir). */
.hoja-manual {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
}
.etiqueta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* LA HOJA DEL MANUAL. Es papel: los colores van escritos, no tomados del tema
   (el manual se imprime siempre igual). La cara es la
   de la app: la etiqueta mono en mayusculas abre la hoja, el numero del paso es
   una ficha de kit y cada pieza nueva va sobre fondo de panel. */
.pagina {
  --papel-tinta: #102443;
  --papel-acento: #0460a9;
  --papel-panel: #d8e7f5;
  --papel-suelo: #f4f8fb;
  --papel-gris: #566377;
  --papel-linea: #dbe6f0;

  width: 8.5in;
  height: 11in;
  padding: 0.5in 0.55in 0.42in;
  background: #fff;
  color: var(--papel-tinta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: 0.15in;
  font-family: var(--font-text);
}

/* PORTADA Y MODELO TERMINADO: la foto manda y el nombre va debajo, como en el
   cuaderno impreso de un kit. Las dos hojas comparten la caja de la foto para
   que el cuaderno abra y cierre igual: arriba el diseno, al final el montaje
   completo. Las tres cifras (piezas, referencias, pasos) cierran la portada en
   fichas de kit: numero grande, rotulo mono en mayusculas. */
.pagina--portada,
.pagina--final { gap: 0.16in; }
.portada__foto,
.final__foto {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0.16in;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, #fff 62%, var(--papel-suelo) 100%);
  border: 1px solid #c9d6e4;
  border-top: 4px solid var(--papel-acento);
  border-radius: 3px;
}
.portada__imagen,
.pagina__imagen--final {
  width: 100%;
  height: 100%;
  max-height: 5.4in;
  object-fit: contain;
  display: block;
}
.portada__rotulo { display: grid; gap: 4px; }
.portada__etiqueta {
  font-family: var(--font-mono);
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel-acento);
}
.portada__nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30pt;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--papel-tinta);
}
.portada__bajada {
  margin: 0;
  font-size: 10.5pt;
  line-height: 1.35;
  color: var(--papel-gris);
  max-width: 5.2in;
}
.portada__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.12in;
  margin: 0;
}
.portada__dato {
  display: grid;
  gap: 2px;
  padding: 0.11in 0.13in;
  background: var(--papel-panel);
  border: 1px solid #c9d6e4;
  border-radius: 4px;
}
.portada__dato dt {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-tinta);
}
.portada__dato dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22pt;
  font-weight: 600;
  line-height: 1;
  color: var(--papel-acento);
  font-variant-numeric: tabular-nums;
}

/* Cabecera: la etiqueta mono abre la hoja y el paso se cuenta a la derecha. */
.pagina__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 7px;
  background: var(--papel-panel);
  border-left: 4px solid var(--papel-acento);
  border-bottom: 1px solid var(--papel-linea);
}
.pagina__marca {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-acento);
}
.pagina__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-gris);
  white-space: nowrap;
}
.pagina__num b { color: var(--papel-tinta); font-weight: 700; }

/* Titulo: la ficha del paso (numero grande) y su nombre. */
.pagina__titulo { display: flex; align-items: center; gap: 14px; }
.pagina__cifra {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 0.7in;
  height: 0.7in;
  border-radius: 3px;
  background: var(--papel-acento);
  color: #fff;
  font-family: var(--font-display);
  font-size: 24pt;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pagina__cifra--sigla { font-size: 13pt; letter-spacing: 0.02em; }
.pagina__rotulo { display: grid; gap: 4px; min-width: 0; }
.pagina__nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15pt;
  font-weight: 600;
  line-height: 1.15;
  color: var(--papel-tinta);
}
.pagina__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-gris);
}
.pagina__girar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--papel-panel);
  color: var(--papel-tinta);
  font-weight: 700;
}

/* La escalera de pasos: una muesca por paso, la de esta hoja en acento. */
.pagina__progreso { display: flex; gap: 3px; }
.pagina__progreso i { flex: 1 1 0; height: 4px; border-radius: 1px; background: var(--papel-panel); }
.pagina__progreso i.hecho { background: #b9cfe4; }
.pagina__progreso i.aqui { background: var(--papel-acento); }

/* La foto del paso, enmarcada como una pantalla del editor. */
.pagina__lienzo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0.12in;
  background: #fff;
  border: 1px solid #c9d6e4;
  border-top: 3px solid var(--papel-acento);
  border-radius: 2px;
}
/* La foto ocupa el hueco que le deja la hoja (la franja de piezas nuevas crece
   cuando hay muchas): se ajusta sin deformarse y la flecha sigue cuadrando. */
.pagina__imagen {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Las flechas que dibuja el usuario van ENCIMA de la foto, en acento. Antes
   estaban ocultas y no habia forma de ver una flecha dibujada. */
.pagina__flechas {
  position: absolute;
  inset: 0.12in;
  width: calc(100% - 0.24in);
  height: calc(100% - 0.24in);
  overflow: visible;
  pointer-events: none;
}
.pagina__flechas line { stroke: var(--papel-acento); stroke-linecap: round; }
.pagina__flechas marker path { fill: var(--papel-acento); }

/* Las piezas nuevas: cada una sobre su ficha de panel, con el numero grande. */
.pagina__piezas { display: grid; gap: 6px; }
.pagina__piezas-titulo {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-gris);
}
.pagina__piezas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pieza-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--papel-panel);
  min-width: 1.5in;
}
.pieza-chip b {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 15pt;
  font-weight: 600;
  line-height: 1;
  color: var(--papel-acento);
  font-variant-numeric: tabular-nums;
}
.pieza-chip span { font-size: 12px; font-weight: 600; color: var(--papel-tinta); line-height: 1.2; }
.pieza-chip code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--papel-gris);
}

/* La nota del paso: una barra de acento y el texto, sobre el suelo de la app. */
.pagina__nota {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 10px;
  margin: 0;
  padding: 7px 10px 7px 0;
  background: var(--papel-suelo);
  font-size: 12px;
  line-height: 1.4;
  color: #33415c;
}
.pagina__nota::before { content: ''; align-self: stretch; border-radius: 2px; background: var(--papel-acento); }

/* Los grupos que se montan aparte (submodelos). */
.pagina__callouts { display: grid; gap: 8px; }
.callout {
  display: grid;
  grid-template-columns: 1.1in 1fr;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px;
  background: var(--papel-suelo);
  border: 1px solid var(--papel-linea);
  border-radius: 2px;
}
.callout__imagen { width: 100%; height: auto; display: block; background: #fff; }
.callout figcaption { font-size: 12px; color: var(--papel-gris); line-height: 1.35; }
.callout figcaption strong { display: block; font-size: 13px; color: var(--papel-tinta); }

/* Pie: modelo a la izquierda, pagina a la derecha. */
.pagina__pie {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid var(--papel-linea);
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-gris);
}
.pagina__pie b { color: var(--papel-tinta); font-weight: 700; }
.pagina__acciones { display: none; }

/* La vista del paso, solo en pantalla: tres botones redondos en la esquina de
   la foto para girarla antes de imprimir y elegir el angulo desde el que mejor
   se ve el montaje. En papel no salen. */
.pagina__vista {
  position: absolute;
  top: 0.08in;
  right: 0.08in;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagina__vista button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--papel-linea);
  border-radius: 999px;
  background: #ffffff;
  color: var(--papel-tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(16 36 67 / 0.2);
}
.pagina__vista button:hover { background: var(--papel-panel); }
.pagina__vista button:focus-visible { outline: 2px solid var(--papel-acento); outline-offset: 2px; }
.pagina__vista .pagina__vista-auto { font-size: 11px; letter-spacing: 0.02em; }
.pagina--piezas { gap: 0.14in; }

/* Texto que solo oyen los lectores de pantalla (la cabecera de la miniatura). */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* LA LISTA DE PIEZAS EN CUADRICULA: fichas de kit, la imagen grande y el nombre
   debajo (antes era una tabla con miniaturas de 34 px que en papel no se veian).
   Cada ficha lleva su cantidad en la esquina, como el numero grande de una
   tarjeta de kit. */
.bom-cuadricula {
  flex: 1 1 auto;
  display: grid;
  /* 3 columnas con pocas referencias (la pieza sale mas grande) y 4 cuando la
     lista es larga. Lo decide el constructor al montar la hoja. */
  grid-template-columns: repeat(var(--bom-columnas, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.12in;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bom-ficha {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 3px;
  padding: 0.1in 0.1in 0.08in;
  background: #fff;
  border: 1px solid var(--papel-linea);
  border-top: 2px solid var(--papel-acento);
  border-radius: 4px;
  overflow: hidden;
}
.bom-ficha__cant {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 0.34in;
  padding: 2px 6px 1px;
  border-radius: 999px;
  background: var(--papel-acento);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10pt;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bom-ficha__marco {
  display: grid;
  place-items: center;
  min-height: 0.9in;
  padding: 3px;
  background: var(--papel-suelo);
  border-radius: 3px;
}
/* La imagen se come el alto que le deja la ficha (que se reparte la hoja): en
   una lista corta las piezas salen grandes y en una larga siguen viendose. */
.bom-ficha__imagen {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bom-ficha__nombre {
  font-family: var(--font-text);
  font-size: 10pt;
  line-height: 1.2;
  color: var(--papel-tinta);
  overflow-wrap: anywhere;
}
.bom-ficha__sku {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.02em;
  color: var(--papel-gris);
}

.escala { background: #fff; color: #102443; padding: 0.5in; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.escala__plano { position: relative; }
.escala__pieza { position: absolute; }
.escala__ref { border-top: 1px solid #102443; width: 100mm; margin: 8px 0; font-size: 12px; }

/* ----------------------------------------------------------------- pie --- */

.pie {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0 var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
}
.estado { display: flex; align-items: center; gap: var(--space-2); height: var(--pie-h); overflow: hidden; white-space: nowrap; }
.estado .sep { width: 1px; height: 12px; background: var(--border); flex: 0 0 auto; }
.estado #hud-encaje.ok { color: var(--success); }
.estado #hud-encaje.aviso { color: var(--warning); }
.estado #hud-aviso.ok { color: var(--success); font-weight: 600; }
.estado #hud-aviso.aviso { color: var(--warning); font-weight: 600; }
.estado #hud-aviso.error { color: var(--danger); font-weight: 600; }
.hud__medidas { color: var(--text-muted); }
.creditos { display: none; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1180px) {
  /* El riel no se estrecha: «Seleccionar» necesita su ancho a cualquier
     tamano de escritorio. Lo que cede es el inspector. */
  :root { --inspector-w: 290px; }
  .solo-ancho { display: none; }
}

/* LA BARRA SE APRIETA CUANDO EL NOMBRE NO CABE.
   Con las etiquetas puestas, a 1280 el campo «Nombre del modelo» se quedaba en
   17 px: la barra no tiene sitio para marca, nombre, siete acciones y perfil
   (medido por Calidad en el sello 20261102T154417).

   Lo dispara NO PODER RESPETAR EL NOMBRE, no un tramo de anchos fijo: shell.js
   mide el campo y pone `.barra--compacta` cuando baja de `NOMBRE_MINIMO`. Asi,
   si manana entra un boton mas, el corte se mueve solo en vez de romperse.

   Se aprieta SACANDO BOTONES A «Mas opciones», no acortando palabras: una barra
   de iconos sueltos obliga a adivinar y deja sin nombre a quien lee la pantalla.
   El orden lo decide shell.js midiendo, no esta hoja, y va de lo que menos
   cuesta a lo que mas:
     1. Nuevo y Abrir, que ya viven en el menu.
     2. El chip «Guardado»: repite lo que ya dice el pie (`#hud-carga`, al lado
        de las medidas, shell.js lo copia de alli) y es lo unico que se puede
        quitar sin dejar a nadie sin una accion. Medido con esta hoja puesta a
        1181, 1194 y 1280 px: el chip ocupa 78 px y el nombre gana 86 (78 mas el
        hueco de 8). A 1181 el campo pasa de 157 a 243 px, y a 1280 deja de
        hacer falta el paso siguiente, asi que Exportar se queda.
     3. Exportar, solo si aun no llega.
   «Guardar» no se va nunca: es la accion principal. Deshacer y Rehacer ya son
   icono y se quedan.

   El chip se esconde A LA VISTA, no del arbol: `display: none` lo sacaria
   tambien del lector de pantalla y el pie no lleva `aria-live`, asi que quien
   escucha dejaria de oir «Guardando… / Guardado». Fuera del flujo ocupa 0 px y
   se sigue anunciando. */
.barra--compacta #btn-nuevo,
.barra--compacta #btn-abrir,
.barra--mas-apretada #btn-exportar { display: none; }

.barra--compacta .barra__estado {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  :root { --barra-h: 56px; --inspector-w: 0px; }

  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--riel-h, 60px); }
  .lienzo { grid-row: 1; }

  /* El riel se vuelve la barra de abajo: cuatro modos, con su nombre. */
  .riel {
    grid-row: 2;
    flex-direction: row;
    justify-content: space-around;
    border-right: 0;
    border-top: 1px solid var(--border);
    padding: var(--space-1);
    gap: 0;
  }
  /* Con cuatro modos los nombres siguen cabiendo en el telefono (con seis se
     pisaban): el icono se queda y el nombre va debajo, corto. El relleno y el
     hueco van justos para que icono + nombre quepan en los 60 px de la barra. */
  .riel__btn { padding: 3px 2px; gap: 2px; }
  /* El nombre hereda el tamano del boton (--text-xs): nada que leer por debajo
     de 12 px. */
  .riel__btn span { display: inline; }
  .riel__btn .ico { width: 22px; height: 22px; }
  .riel__crece { display: none; }
  /* En la barra de abajo el boton de atajos va como los modos, con su nombre:
     con cinco huecos de 72 px «Seleccionar» sigue cabiendo y «Atajos» sobra de
     ancho. La raya de separacion no tiene sentido en una fila. */
  .riel__btn--pie { margin-top: 0; }
  .riel__btn--pie::after { display: none; }
  /* En el telefono el cubo baja al rincon de abajo: la cinta puede usar todo
     el ancho. */
  .lienzo__cinta { right: var(--space-3); }
  /* En la barra de abajo la marca del modo encendido va arriba, no a la
     izquierda. */
  .riel__btn--activo::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
  }

  /* El inspector pasa a hoja inferior. */
  /* La hoja: cerrada es solo la tira de pestanas; al elegir una, sube y
     muestra su cuerpo. Se resuelve con alto, sin transform, para que no
     dependa de porcentajes raros. */
  .inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--riel-h, 60px);
    height: auto;
    /* 48vh y no 58vh: a 390x800 la hoja dejaba la franja del lienzo en 240 px y
       el aro (138 px) no cabia entero. El techo `100dvh - 316px` la deja por
       debajo de la barra incluso en una pantalla baja (320x568). */
    max-height: min(48vh, calc(100dvh - 316px));
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-3);
    z-index: 35;
  }
  .inspector__cuerpo { display: none; padding-bottom: var(--space-5); }
  .inspector.abierto { height: min(48vh, calc(100dvh - 316px)); }
  .inspector.abierto .inspector__cuerpo { display: block; }
  /* Con el cajon de piezas delante, la hoja del inspector queda debajo de el: a
     390 sus pestanas asomaban tapadas por el pie del cajon (medido: hoja
     678-740, pie del cajon 683-740). Mientras el cajon esta abierto la hoja no
     se alcanza, asi que se oculta y deja el pie del cajon solo. */
  body.cajon-abierto .inspector { display: none; }
  /* El asa de la hoja: un boton de 44 px con la barra, la palabra y el chevron.
     Antes era una barra muda de 36x4 que decia «se puede subir» pero no se
     pulsaba. `aria-expanded` cuenta si la hoja esta subida, y el chevron gira
     con ella (apunta arriba para subir, abajo para bajar). */
  .inspector__asa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 4px var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
  }
  .inspector__asa:hover { color: var(--text); }
  .inspector__asa:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .inspector__asa-barra {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }
  .inspector__asa-flecha {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-2) var(--ease-standard);
  }
  .inspector__asa[aria-expanded="true"] .inspector__asa-flecha { transform: rotate(180deg); }
  .inspector__pestanas { padding-top: var(--space-1); }
  /* Con el panel «Montar sin raton» abierto, la tira de pestanas se aparta: le
     comia 52 px del pie a la franja libre. */
  body.a11y-abierto .inspector__pestanas { display: none; }

  /* El pie no cabe en el telefono, pero el AVISO si tiene que verse: ahi salen
     los «no se puede» (conector ya ocupado, choque con otra pieza, suelo). Se
     queda como pastilla flotante sobre el riel y solo cuando hay algo que decir. */
  .pie {
    display: block;
    position: fixed;
    left: var(--space-2);
    right: var(--space-2);
    /* Por encima del riel Y de la tira de pestanas de la hoja (que mide unos
       52 px y tapa el aviso si se deja pegado al riel). */
    bottom: calc(var(--riel-h, 60px) + 60px);
    z-index: 40;
    padding: 0;
    background: none;
    border-top: 0;
    pointer-events: none;
  }
  .pie .estado { height: auto; overflow: visible; white-space: normal; }
  .pie .estado > * { display: none; }
  .pie .estado #hud-aviso {
    display: inline-block;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    font-size: 12px;
  }
  .pie .estado #hud-aviso:empty { display: none; }

  /* El guiado en el telefono: la tarjeta se fija por encima del riel y de la
     tira de pestanas del inspector, y por encima de ellas (45 > 40 > 35). El
     aviso sube arriba para que la tarjeta no lo tape. */
  .guiado {
    position: fixed;
    left: var(--space-2);
    right: var(--space-2);
    bottom: calc(var(--riel-h, 60px) + 64px);
    width: auto;
    max-height: calc(100vh - var(--barra-h) - var(--riel-h, 60px) - 64px - var(--space-3));
    max-height: calc(100dvh - var(--barra-h) - var(--riel-h, 60px) - 64px - var(--space-3));
    z-index: 45;
  }
  body.modo-guiado .pie {
    bottom: auto;
    top: calc(var(--barra-h) + var(--space-2));
  }

  /* El tutorial, igual: en el telefono sube por encima del riel y de las
     pestanas del inspector, o quedaria detras de la barra de abajo. */
  .tutorial {
    position: fixed;
    left: var(--space-2);
    right: var(--space-2);
    bottom: calc(var(--riel-h, 60px) + 64px);
    width: auto;
    z-index: 45;
  }

  .vistas { top: auto; bottom: 84px; right: var(--space-2); }
  .cubo { top: auto; bottom: 78px; right: var(--space-2); }
  .cubo .cubo__lienzo { width: 76px; height: 76px; }
  .zoom { bottom: 84px; right: var(--space-2); top: auto; flex-direction: row; }
  .cajon { inset: var(--barra-h) 0 var(--riel-h, 60px) 0; }
  .cajon__caja { width: 100%; border-right: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; align-self: flex-end; height: 78%; }
  .hoja__caja { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; height: 88%; align-self: flex-end; }
  .hoja { align-items: flex-end; }
  .comprobacion { left: var(--space-2); right: var(--space-2); width: auto; }
  .callout-paso { display: none; }
  .menu { right: var(--space-2); left: var(--space-2); top: calc(var(--barra-h) + 4px); min-width: 0; }
}

@media (max-width: 400px) {
  #btn-rehacer { display: none; }
}

@media (max-width: 520px) {
  .barra__modelo input { font-size: var(--text-base); }
  .barra__estado { display: none; }
  /* En un telefono no caben en una fila el titulo, el nombre del modelo y los
     botones: el encabezado pasa a dos filas (arriba titulo y botones, debajo
     el nombre a todo lo ancho) y Exportar se queda en icono. La altura de la
     barra la manda --barra-h, asi que el cajon y los menus siguen su sitio. */
  :root { --barra-h: 92px; }
  /* Los 92 px son la cuenta de dos filas (44 + 4 + 44), no un numero que haya
     que defender: si algun dia la barra necesita una fila mas —texto ampliado,
     un idioma con palabras mas largas—, crece y el lienzo baja con ella (el
     .app ya es `flex: 1 1 auto`). Con la altura fija, lo que sobraba salia por
     arriba, fuera de la ventana. Quien se cuelga del alto (el cajon, los menus,
     la pantalla de inicio) lo lee de --barra-h, y ese numero lo escribe
     `anotarAltoDeBarra` con la barra ya medida (shell.js). */
  .barra {
    flex-wrap: wrap;
    align-content: center;
    gap: 6px;
    row-gap: 4px;
    padding: 0 8px;
    height: auto;
    min-height: var(--barra-h);
  }
  /* Dos filas, no tres. El nombre comparte la segunda con el perfil, que lleva
     su columna de 52 px (44 de objetivo tactil mas el hueco: ver acceso.css).
     Con tres filas dentro de los 92 px de --barra-h lo que sobraba se repartia
     y salia por arriba: y = -24 en la medicion de Calidad a 390 px.
     La base es `calc(100% - 58px)`: los 52 del perfil mas los 6 del hueco. Ni
     `auto` ni 0 sirven: con `auto` el input de dentro (420 px) cuenta para
     partir la fila y el perfil cae a una tercera; con 0 el nombre se cuela en
     la primera con 43 px de ancho (medido a 390). Con esta base el nombre no
     cabe junto a lo de arriba, baja a la segunda y ahi se queda con todo lo que
     no es la columna del perfil. */
  .barra__modelo { flex: 1 1 calc(100% - 58px); order: 5; min-width: 0; }
  /* A 390 la primera fila no admite palabras de mas: marca (116) + volver (44)
     + las acciones. Con las tres palabras son 422 px sobre 374 de ancho util y
     la barra vuelve a las tres filas (medido). Exportar y Mas opciones se
     quedan en icono, con su nombre en `aria-label` para quien escucha. */
  #btn-exportar span { display: none; }
  #btn-exportar { padding: 0 10px; }
  #btn-mas span { display: none; }
  #btn-mas { padding: 0 10px; }
  .acciones { grid-template-columns: 1fr; }
  .pagina { width: 100%; min-height: 0; padding: var(--space-4); }
}

/* El logo entero (117 px) no cabe en la barra del telefono ni de la tableta: a
   360 px empuja la primera fila por encima de los 344 disponibles y la barra se
   parte en TRES filas, y a 600 el campo del nombre se queda en «Ba…». Por eso,
   hasta 900 px, el <picture> del HTML pone en su lugar el escudo (30 px, el
   mismo ancho que tenia el icono de antes): la marca sigue viendose y el nombre
   accesible lo lleva el `alt` de la imagen. */

/* ------------------------------------------------- varios pasos por hoja --- */

/* La hoja es el folio: con dos o cuatro pasos por hoja, cada paso mide la
   parte que le toca tambien en pantalla (si no, la vista previa mostraba una
   hoja del doble de alto y lo impreso no se parecia a lo que se veia). */
/* La hoja con varios pasos no lleva relleno propio: el relleno lo trae cada
   paso, y si no, dos pasos de medio folio mas el relleno de la hoja se pasaban
   del folio y el segundo salia en otro papel. */
.hoja-manual[data-por-hoja="2"],
.hoja-manual[data-por-hoja="4"] { height: 11in; min-height: 0; padding: 0; gap: 0; }
.hoja-manual[data-por-hoja="2"] .pagina { height: 5.5in; min-height: 0; padding: 0.3in; }
.hoja-manual[data-por-hoja="4"] { display: flex !important; flex-wrap: wrap; width: 8.5in; }
.hoja-manual[data-por-hoja="4"] .pagina { width: 4.25in; height: 5.5in; min-height: 0; padding: 0.25in; }
/* Con dos o cuatro pasos por folio no cabe la foto entera: se encoge (y en el
   de cuatro se dejan fuera las fichas de piezas, que ya van en la lista). */
.hoja-manual[data-por-hoja="2"] .pagina__imagen { max-height: 2.1in; }
.hoja-manual[data-por-hoja="4"] .pagina__imagen { max-height: 1.5in; }
.hoja-manual[data-por-hoja="2"] .pagina__cifra,
.hoja-manual[data-por-hoja="4"] .pagina__cifra { width: 0.5in; height: 0.5in; font-size: 16pt; }
.hoja-manual[data-por-hoja="2"] .pagina__piezas,
.hoja-manual[data-por-hoja="4"] .pagina__piezas { display: none; }
.hoja-manual[data-por-hoja="2"] .pagina,
.hoja-manual[data-por-hoja="4"] .pagina { gap: 0.08in; }

/* --------------------------------------------------------------- impresion */

/* --------------------------------------------------------- armado guiado --- */

/* La tarjeta del armado: abajo a la izquierda, encima del lienzo. Deja libres
   el inspector y la biblioteca, que es donde el usuario tiene las manos. */
.guiado {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  width: min(330px, calc(100% - var(--space-6)));
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  /* Se desplaza por dentro si no cabe: en un telefono tumbado, o con el lienzo
     bajo, la tarjeta no puede comerse el modelo. */
  overflow: auto;
  max-height: calc(100% - var(--space-4));
  z-index: 6;
}
/* La tarjeta del tutorial de la primera union: la misma esquina que el guiado,
   con el filo en acento para distinguirla de una tarjeta de montaje. */
.tutorial {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  width: min(330px, calc(100% - var(--space-6)));
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  z-index: 6;
}
.tutorial__paso {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* El rotulo en acento basta para que la tarjeta se distinga del montaje. */
  color: var(--accent);
}
.tutorial__texto { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); }
.tutorial__acciones { display: flex; gap: var(--space-2); }
/* La tarjeta del tutorial y la biblioteca se pisan: el tutorial ABRE el cajon
   en su paso 1 (elegir un pin) y la tarjeta, con z-index 6, quedaba debajo del
   velo y de la columna (z-index 40). En escritorio se pasa al otro lado del
   cajon y por encima del velo; en el telefono sube arriba, donde tampoco la
   pisan el riel ni la hoja del inspector. */
@media (min-width: 901px) {
  body.con-tutorial.cajon-abierto .tutorial {
    left: auto;
    right: var(--space-3);
    width: min(330px, calc(100% - min(380px, 92vw) - var(--space-6)));
    z-index: 41;
  }
}

@media (max-width: 900px) {
  /* Va DESPUES de la base a proposito: la regla de telefono anterior quedaba
     antes en el archivo y la base la pisaba (misma especificidad). */
  .tutorial {
    position: fixed;
    left: var(--space-2);
    right: var(--space-2);
    top: calc(var(--barra-h) + var(--space-2));
    bottom: auto;
    width: auto;
    z-index: 46;
  }
  /* La franja de arriba es de la tarjeta: el chip de herramienta y la fila del
     nombre del modelo sobran ahi (el nombre se pone al guardar, no al montar). */
  /* Con el tutorial delante, la tarjeta ya dice que toca: los chips del lienzo
     solo la taparian. */
  body.con-tutorial #chip-herramienta,
  body.con-tutorial #chip-pista { display: none; }
  body.con-tutorial .barra__modelo { display: none; }
  /* Y el cajon baja para no meterse debajo de ella. */
  body.con-tutorial.cajon-abierto .cajon__caja { height: 58%; }
}

.guiado__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}
.guiado__titulos { display: flex; flex-direction: column; min-width: 0; }
.guiado__paso { font-size: var(--text-sm); }
.guiado__cuenta { font-size: var(--text-xs); color: var(--text-muted); }
.guiado__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.guiado__cerrar:hover { background: var(--surface-2); color: var(--text); }
.guiado__cerrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.guiado__progreso { height: 6px; background: var(--surface-2); }
.guiado__barra {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary);
  /* Se anima el transform, no el ancho: el ancho obliga a la pagina a
     recalcular la maqueta en cada frame. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .guiado__barra { transition: none; }
}

.guiado__cuerpo {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.guiado__pieza { display: flex; align-items: center; gap: var(--space-3); }
.guiado__foto {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
}
.guiado__datos { min-width: 0; }
.guiado__nombre {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guiado__sku { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.guiado__pista { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.guiado__acciones { display: flex; gap: var(--space-2); }
.guiado__acciones .btn { flex: 1 1 0; }

.guiado__listo {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.guiado__feliz { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--primary); }

/* En el telefono la tarjeta ocupa el ancho: es lo unico que se mira mientras
   se arrastra, y en una columna estrecha cabe igual. */
@media (max-width: 820px) {
  .guiado {
    left: var(--space-2);
    right: var(--space-2);
    bottom: calc(var(--space-2) + 8px);
    width: auto;
  }
  .guiado__cuerpo { padding: var(--space-2) var(--space-3) var(--space-3); gap: var(--space-2); }
  .guiado__listo { padding: var(--space-2) var(--space-3) var(--space-3); }
  .guiado__foto { width: 44px; height: 44px; }
  .guiado__pista { display: none; }
  .guiado__listo .guiado__pista { display: block; }
  /* En pantalla estrecha la hoja de Pieza/Modelo/Pasos (z 50) tapa el pie del
     lienzo, y con el la leyenda: se sube al principio del lienzo, bajo la cinta
     de los avisos, para que las seis formas se lean tambien en el telefono. */
  .leyenda-lienzo {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 112px;
    max-width: none;
    z-index: 24;
  }
}

@media print {
  @page { size: letter; margin: 0; }
  html, body { overflow: visible; height: auto; background: #fff; }
  .barra, .app, .pie, .cajon, .hoja, .menu, .menu-pieza, .dialogo, .inicio, .arranque, .salto { display: none !important; }
  .manual { position: static; display: block !important; }
  .manual__barra, .manual__opciones, .pagina__vista { display: none !important; }
  .manual__paginas { display: block; padding: 0; gap: 0; background: none; }
  /* La hoja es la que corta el papel: asi «2 por pagina» de verdad pone dos
     pasos en el mismo folio (antes cada paso forzaba su propio salto). */
  .hoja-manual { display: block !important; page-break-after: always; break-after: page; }
  .hoja-manual:last-child { page-break-after: auto; break-after: auto; }
  .pagina {
    width: 8.5in;
    height: 11in;
    min-height: 0;
    page-break-after: auto;
    break-after: auto;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    /* El papel tiene que salir como se ve: sin esto el navegador tira los
       fondos y la ficha del numero (fondo azul, cifra blanca) se imprime en
       blanco sobre blanco. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* La portada, la lista de piezas y el modelo terminado van en hojas enteras:
     se paginan antes de imprimir (16 fichas por hoja), asi que no fluyen ni se
     cortan. */
  .pagina--portada, .pagina--piezas, .pagina--final { height: 11in; overflow: hidden; }
  .pagina__imagen { image-rendering: auto; max-height: 4.9in; object-fit: contain; }
  /* Con dos o cuatro pasos por folio no cabe la foto entera: se encoge (y en
     el de cuatro se dejan fuera las fichas de piezas, que ya van en la lista). */
}

/* ------------------------------------------- conectar para niños (maqueta) --- */
/* La especificación vive en design/conectar-ninos/maqueta-conectar.html y sus
   decisiones en app/conectar-ninos.js. Aquí solo el dibujo: el «1», los «+»,
   el ✕, el hilo y la barra del paso.

   Todo va en una capa DOM encima del lienzo y no en la escena 3D: así una
   marca mide 34 px a cualquier zoom, el dedo tiene 44 px donde tocar y el
   lector de pantalla ve botones de verdad, no sprites. */

.paso-capa {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.paso-capa__hilo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.paso-capa__hilo path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  opacity: 0.8;
}

/* Una marca: 34 px de dibujo. El «+» es más pequeño: el paso 2 dibuja decenas
   a la vez y a 34 px tapaban el modelo (t_1feb8059269d). */
.paso-marca {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* El «+»: el único destino que se puede tocar. Pequeño de verdad desde
   t_1feb8059269d («esos iconos de plus están demasiado grandes»): 14 px de
   dibujo y 24 px de alcance, que es el mínimo de la WCAG 2.2 (2.5.8). */
.paso-marca--destino {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--success);
  pointer-events: auto;
  cursor: pointer;
}
.paso-marca--destino::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
  transition: transform 90ms ease-out, background-color 90ms ease-out;
}
.paso-marca--destino::after {
  content: '+';
  position: relative;
  font: 700 9px/1 var(--font-text);
  color: currentColor;
}
/* El que se mira (o el que tiene el ratón encima) se enciende y crece un poco:
   así se ve cuál es sin borrar los demás. */
.paso-marca--destino:hover::before,
.paso-marca--destino.apunta::before {
  background: var(--success-soft);
  border-width: 2px;
  transform: scale(1.3);
}
.paso-marca--destino:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* El «1»: dónde está el punto que se va a mover. Azul, el mismo del riel. */
.paso-marca--uno {
  width: 30px;
  height: 30px;
  z-index: 2;
  background: var(--primary);
  color: var(--on-accent);
  font: 700 15px/1 var(--font-text);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.28);
}

/* El ✕ del «aquí no encaja»: aparece donde tocó el dedo, tiembla y se va. */
.paso-marca--no {
  z-index: 3;
  color: var(--danger);
  font: 700 22px/1 var(--font-text);
  animation: paso-se-va 700ms ease-out forwards;
}
.paso-marca--no::before {
  content: '✕';
  animation: paso-tiembla 420ms ease-in-out;
}

/* El punto gris: ese hueco ya tiene una pieza. */
.paso-marca--gris {
  z-index: 1;
  animation: paso-se-va 700ms ease-out forwards;
}
.paso-marca--gris::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.8;
}

@keyframes paso-tiembla {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

@keyframes paso-se-va {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* El chip del modo encendido, con su puerta: «Conectar ✕».
   El chip se ve como los demás, pero su zona de toque llega a 44 px con un
   ::after invisible: el criterio 9 pide 44 y el riel no crece por eso. */
.chip--modo {
  position: relative;
  cursor: pointer;
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.chip--modo::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.chip--modo:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.chip--modo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip__x {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* La barra del paso: el número, una instrucción y las dos acciones.
   Va por id, no por clase: `.paso` es también la fila de la lista del panel de
   pasos (main.js:7997), y esta regla —absoluta y al pie del lienzo— sacaba a
   cada fila de la lista y dejaba el panel con 0 px de alto, así que los pasos no
   se veían. Con el id, la barra conserva todo esto y la lista lo suyo. */
#paso-barra {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(560px, calc(100% - 132px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
}

#paso-barra .paso__num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-accent);
  font: 700 14px/1 var(--font-text);
}
#paso-barra .paso__num[data-paso="hecho"] { background: var(--success); }

#paso-barra .paso__texto {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

/* Solo para el lector de pantalla: el paso con su número, que es lo que se
   anuncia cuando cambia. */
#paso-barra .paso__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#paso-barra .paso__acciones {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* 44 px de alto también en escritorio: el criterio 9 de la maqueta no hace
   excepción con el ratón, y una barra que crece 10 px no rompe nada. */
#paso-barra .paso__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* El blanco es 44 × 44 aunque `.paso__acciones button` —el panel de Pasos,
     línea 1147— fije 26 px de ancho: con el id delante, esta regla gana. */
  min-width: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--text-xs)/1 var(--font-text);
  cursor: pointer;
}
#paso-barra .paso__btn:hover { background: var(--border); }
#paso-barra .paso__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#paso-barra .paso__btn--ok { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }

/* En el teléfono la barra ocupa el ancho, las acciones van debajo y todo lo que
   se toca llega a 44 px. El zoom se aparta mientras se conecta: el «+» manda. */
@media (max-width: 520px) {
  .chip--modo { height: 44px; padding: 0 var(--space-4); }
  .chip__x { width: 22px; height: 22px; font-size: 12px; }
  #paso-barra {
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-radius: var(--radius-md, 12px);
  }
  #paso-barra .paso__texto { flex: 1 1 60%; }
  #paso-barra .paso__acciones { flex: 1 1 100%; margin-left: 0; }
  #paso-barra .paso__btn { flex: 1 1 auto; min-height: 44px; }
  body.conectando .zoom { display: none; }
  /* El pie del lienzo: «Teclado» y el cuadro del paso caben en un renglón a
     390 px. Las teclas del cuadro se aprietan un poco (32 px) para que el
     nombre del paso se lea entero; el alto sigue en 44 px. */
  .lienzo__pie {
    left: 8px;
    bottom: 8px;
    gap: 6px;
    max-width: calc(100% - 16px);
  }
  /* La leyenda, en el telefono: a lo ancho y mas abajo que en la tableta,
     porque aqui la cinta de los avisos ocupa dos renglones. */
  .leyenda-lienzo {
    max-width: none;
    top: 176px;
  }
  .paso-atajo__btn {
    min-width: 32px;
    padding: 0 6px;
  }
  /* En el telefono el cuadro deja solo lo de cada toque (flechas, ＋ y ⋯):
     mandar y borrar se van al menu de ⋯, que es donde estan todas, y asi el
     nombre del paso se lee entero en un renglon. */
  #paso-atajo-mandar,
  #paso-atajo-borrar { display: none; }
  /* El menu cabe en lo que queda de lienzo encima del cuadro: 8 opciones de
     36 px no llegan a 300, y lo que sobra scrollea dentro (el .menu ya
     scrollea). Sin esto se salia por arriba en el telefono. */
  .menu--paso {
    min-width: min(280px, calc(100vw - 24px));
    max-height: min(38vh, 270px);
  }
  .menu--paso button { min-height: 36px; }
}

/* ------------------------------------------------------------- tutorial --- */

/* El tutorial interactivo (app/tutorial.js). Tres piezas:
   el velo con un agujero encima del control del paso, la tarjeta que se coloca
   sola donde no tape el agujero, y el aviso de entrada.

   El agujero se abre con clip-path y cuatro variables que pone el motor con la
   caja REAL del control (`getBoundingClientRect`): si el control se mueve, si
   el panel se abre o si la ventana cambia de tamano, el agujero sigue encima.
   El clip-path recorta tambien el puntero, asi que el alumno toca el control de
   verdad y no una copia.

   El velo va por encima del cajon (40) y de la hoja (50) pero por debajo del
   manual (85) y de los dialogos (80): el tutorial no secuestra la aplicacion. */
.tut {
  position: fixed;
  inset: 0;
  z-index: 47;
  pointer-events: none;
}

.tut__velo {
  position: absolute;
  inset: 0;
  --tut-x: 0px;
  --tut-y: 0px;
  --tut-w: 0px;
  --tut-h: 0px;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  pointer-events: auto;
  clip-path: polygon(
    evenodd,
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--tut-x) var(--tut-y),
    calc(var(--tut-x) + var(--tut-w)) var(--tut-y),
    calc(var(--tut-x) + var(--tut-w)) calc(var(--tut-y) + var(--tut-h)),
    var(--tut-x) calc(var(--tut-y) + var(--tut-h)),
    var(--tut-x) var(--tut-y)
  );
}
/* Sin control a la vista (su panel esta cerrado): velo entero, y la tarjeta
   sigue mandando, asi que nadie se queda atascado. */
.tut__velo--entero { clip-path: none; }

.tut__tarjeta {
  position: fixed;
  z-index: 48;
  width: min(380px, calc(100vw - 24px));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  color: var(--text);
  pointer-events: auto;
}
.tut__tarjeta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.tut__rotulo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.tut__titulo { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-lg); line-height: 1.25; }
/* El texto del paso es lo que el alumno tiene que leer: va al tamano base (15 px)
   y no al pequeno (13 px). En un telefono, a 13 px, se lee forzando la vista. */
.tut__texto { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: 1.5; }
.tut__pista {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.tut__enlace {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tut__enlace:hover { color: var(--text); }

.tut__progreso {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.tut__cuenta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.tut__barra {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.tut__barra-lleno {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.tut__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tut__acciones .btn { flex: 0 1 auto; }
/* El cierre va a la esquina de la tarjeta: dentro de la fila de acciones se
   quedaba solo en un segundo renglon, colgando a la derecha. */
.tut__rotulo, .tut__titulo { padding-right: 40px; }
.tut__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tut__cerrar:hover { background: var(--surface-2); color: var(--text); }
.tut__cerrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Mientras el tutorial corre, su boton del riel se marca: se ve de donde salio. */
body.tut-abierto #btn-tutorial { background: var(--surface-2); color: var(--text); }

/* El indice de las diez lecciones. Va por encima del arranque (92) para que se
   pueda abrir desde el aviso de entrada, y por debajo de los dialogos (95). */
.tut-indice {
  position: fixed;
  inset: 0;
  z-index: 93;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--text) 34%, transparent);
}
.tut-indice__caja {
  width: min(520px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.tut-indice__cabecera { display: flex; align-items: flex-start; gap: var(--space-3); }
.tut-indice__cabecera > div { flex: 1 1 auto; }
.tut-indice__titulo { margin: var(--space-1) 0 0; font-size: var(--text-xl); }
.tut-indice__cuenta {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.tut-indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 4px;
}
.tut-indice__fila {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-areas: "num nombre" "num lema";
  align-items: center;
  gap: 0 var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tut-indice__fila:hover { background: var(--surface-2); border-color: var(--border); }
.tut-indice__fila:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tut-indice__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.tut-indice__nombre { grid-area: nombre; font-size: var(--text-sm); font-weight: 600; }
.tut-indice__lema { grid-area: lema; font-size: var(--text-xs); color: var(--text-muted); }
.tut-indice__fila--hecha .tut-indice__num { color: var(--success); }
.tut-indice__fila--hecha .tut-indice__nombre { color: var(--text-muted); }
.tut-indice__pie { display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/* El aviso de entrada. Abajo a la izquierda, dentro del lienzo y por encima del
   pie: no tapa ni el cubo de vistas ni los controles de zoom. */
.tut-aviso {
  position: fixed;
  left: calc(var(--riel-w) + var(--space-4));
  /* Por encima del pie de verdad, no de la constante: el pie crece con la
     leyenda de anclajes y `--pie-h` se queda corto, así que el motor mide su
     alto real al enseñar el aviso y lo deja en `--tut-pie-h`. Sin esa medida
     (o sin motor) se usa la constante de siempre. */
  bottom: calc(var(--tut-pie-h, var(--pie-h)) + var(--space-4));
  max-height: calc(100dvh - var(--tut-pie-h, var(--pie-h)) - var(--space-4) * 2);
  overflow-y: auto;
  z-index: 91;
  width: min(400px, calc(100vw - var(--riel-w) - var(--space-4) * 2));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
/* La × del aviso: el titulo deja sitio para que no se monte encima. */
.tut-aviso .tut__cerrar { top: 6px; right: 6px; width: 36px; height: 36px; font-size: 22px; }
.tut-aviso .tut__rotulo { padding-right: 36px; }
.tut-aviso__titulo { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-lg); line-height: 1.25; }
/* El aviso es lo primero que lee el alumno: su texto va al tamano base, como el
   del paso, y no al pequeno. */
.tut-aviso__texto { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: 1.5; color: var(--text-muted); }
.tut-aviso__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* La casilla medía 16x16 dentro de una fila de 22 px de alto: por debajo del
   minimo tactil de 24 px (WCAG 2.2 AA, 2.5.8). La fila sube a 44 px. */
.tut-aviso__no-volver {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-height: 44px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.tut-aviso__no-volver input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Telefono: la tarjeta se pega abajo (lo decide el motor, que es quien conoce
   el agujero) y los botones crecen a 44 px, que es lo que pide el dedo. */
@media (max-width: 640px) {
  .tut__tarjeta {
    padding: var(--space-3);
    max-height: 46vh;
    overflow-y: auto;
    /* La tarjeta flota 8 px sobre el borde: las cuatro esquinas redondeadas.
       Con las de abajo rectas parecia una hoja pegada al borde que no lo esta. */
    border-radius: var(--radius-lg);
    /* A 366 px de ancho la fila del progreso costaba un renglon entero (contador
       + barra + 12 px de aire) y empujaba el alto a 263 px, que tapaba el riel
       de abajo. El contador pasa a la derecha del rotulo, en la misma linea, y
       la barra se retira: es aria-hidden y «Paso 3 de 5» ya dice donde esta.
       La tercera columna es el hueco del boton de cerrar (44 px), que va en la
       esquina y no puede quedar debajo del contador. Nada del contenido se va. */
    display: grid;
    grid-template-columns: 1fr auto 40px;
    column-gap: var(--space-2);
    align-items: center;
  }
  .tut__tarjeta > .tut__rotulo { grid-column: 1; padding-right: 0; }
  .tut__tarjeta > .tut__progreso { grid-column: 2; margin: 0; }
  .tut__tarjeta > .tut__progreso .tut__barra { display: none; }
  .tut__tarjeta > .tut__titulo,
  .tut__tarjeta > .tut__texto,
  .tut__tarjeta > .tut__pista,
  .tut__tarjeta > .tut__enlace,
  .tut__tarjeta > .tut__acciones { grid-column: 1 / -1; }
  .tut__acciones .btn { flex: 1 1 auto; min-height: 44px; }
  /* «Saltar leccion» es la salida, no la accion: va en su renglon, como enlace
     callado, para que «Siguiente» sea el unico boton lleno de la tarjeta. */
  #tut-saltar {
    order: 2;
    flex: 0 0 100%;
    justify-content: flex-start;
    min-height: 44px;
    padding-left: 0;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .tut-aviso {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    padding: var(--space-3);
    /* En el teléfono el aviso se pega abajo a propósito (es una hoja), así que
       no se aparta del pie: se le da su propio tope de alto. */
    max-height: 78dvh;
  }
  .tut-aviso__acciones .btn { flex: 1 1 auto; min-height: 44px; }
  .tut-indice__caja { padding: var(--space-4); max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .tut__barra-lleno { transition: none; }
}

@media (prefers-contrast: more) {
  .tut__velo { background: color-mix(in srgb, #000 70%, transparent); }
  .tut__tarjeta, .tut-aviso { border-color: var(--text); border-width: 2px; }
}

/* -------------------------------------------------------------- simular --- */
/* El modo Simular (app/simular.js): un panel pequeño sobre el lienzo y una capa
   transparente que se queda con el raton para que el editor no lo oiga. El
   resto de la app se apaga mientras tanto: el modelo no se puede tocar. */
.sim-capa {
  position: absolute;
  inset: 0;
  z-index: 9;
  cursor: grab;
  touch-action: none;
}
.sim-capa--agarrando { cursor: grabbing; }

.sim {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  width: 300px;
  max-height: calc(100% - 2 * var(--space-3));
  overflow: auto;
  padding: var(--space-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
}
.sim[hidden] { display: none; }
.sim__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.sim__titulo { margin: 0; font-size: var(--text-base); font-weight: 700; }
.sim__fps { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.sim__estado { margin: var(--space-1) 0 var(--space-3); color: var(--text-muted); }
.sim__fila { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.sim__btn { flex: 1 1 auto; padding: 0 var(--space-3); }
.sim__opciones label, .sim__conducir label { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.sim__motores { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.sim__motor {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "nombre valor rpm" "mueve mueve mueve" "barra barra barra";
  align-items: center;
  column-gap: var(--space-2);
}
.sim__motor-nombre { grid-area: nombre; font-weight: 600; }
.sim__motor input[type="range"] { grid-area: barra; width: 100%; accent-color: var(--primary); }
.sim__motor-valor { grid-area: valor; justify-self: end; font-family: var(--font-mono); font-size: var(--text-xs); }
.sim__motor-rpm { grid-area: rpm; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 8em; text-align: right; }
.sim__motor-mueve { grid-area: mueve; color: var(--text-muted); font-size: var(--text-xs); }
.sim__conducir { margin-bottom: var(--space-2); }
.sim__ayuda { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.sim kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

#btn-simular[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
#btn-simular[aria-pressed="true"] .ico { color: currentColor; }

/* Lo demas no se toca mientras se simula. */
.simulando .barra__acciones > :not(#btn-simular),
.simulando .barra__modelo,
.simulando .app > :not(.lienzo) {
  pointer-events: none;
  opacity: 0.45;
}
.simulando .lienzo > :not(canvas):not(.sim):not(.sim-capa) { visibility: hidden; }
/* La invitacion del tutorial espera a que se vuelva a editar. Se aparta con
   CSS, sin tocar su [hidden] (es del tutorial), asi que su velo del telefono
   (movil.css: body:has(#tut-aviso:not([hidden]))::before) seguia encendido y
   oscurecia el lienzo: tambien se apaga. Al simular no hay ningun menu abierto
   (la barra y la hoja estan apagadas), asi que ningun otro velo hace falta. */
.simulando .tut-aviso { visibility: hidden; }
body.simulando::before { content: none !important; }
/* Conducir es con el teclado: en una pantalla tactil sin teclado (sin raton
   que pase por encima) la ayuda de las flechas y el modo tanque no sirven; se
   conduce con las barras de cada motor. */
@media (hover: none) and (pointer: coarse) {
  .sim__conducir { display: none; }
}

@media (max-width: 640px) {
  .sim { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 55%; }
  /* En el telefono la hoja de abajo y el riel se dibujan encima del lienzo: se
     esconden mientras se simula, para que no tapen el panel. */
  .simulando .app > :not(.lienzo) { visibility: hidden; }
}