/* ============================================================================
   anclas.css — Hoja PROPIA del editor de anclas (/constructor/anclas.html).

   POR QUE TIENE HOJA PROPIA
     Antes esta pagina cargaba `constructor.css`, la hoja del constructor. Dejo
     de servirle el dia que el constructor se rediseno: alli desaparecieron
     `.trabajo`, `.paleta`, `.pasos`, `.lienzo`... y los tokens viejos (`--panel`,
     `--borde`, `--acento`...). La pagina se quedo sin maqueta y sus 206 piezas
     se apilaron en una lista de 14.000 px, con el lienzo 3D al final.

     Ahora la pagina se viste sola con los tokens REALES del contrato
     (design/tokens.css). Nada de esta hoja depende del constructor, y al reves
     tampoco: el constructor puede cambiar sin romper esto.

   LA MAQUETA
     Una sola pantalla, sin scroll de pagina (el scroll vive dentro de los
     paneles, como en un editor CAD):

       barra de herramientas
       piezas (268) | lienzo 3D (1fr) | anclas de la pieza (336)
       aviso
       creditos

     En pantalla estrecha (<=760px) las tres columnas se apilan con el lienzo
     primero, para que se pueda seguir marcando.

   TOKENS
     Solo los que existen en design/tokens.css. Los tres colores de las anclas
     son DATO, no tema: son los mismos que pinta app/anclas.js (COLORES) y los
     lleva cada boton en su `--punto`, junto al HTML que ya los usaba. Aqui solo
     se les da forma; el color no se inventa ni se sustituye.
   ========================================================================== */

:root {
  /* Medidas de la maqueta (densidad de editor, no de pagina de lectura). */
  --control: 30px;
  --riel: 268px;
  --panel-anclas: 360px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  -webkit-font-smoothing: antialiased;
}

button,
input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Etiqueta mono en mayusculas: el gesto del contrato para abrir una seccion. */
.marca,
.barra__rotulo,
.paleta__cuenta,
.pasos__cabecera > strong {
  font-family: var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ========================================================== barra ======= */

.barra {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}

.marca__punto {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

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

.barra__grupo + .barra__grupo {
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.crece { flex: 1 1 auto; }

.barra__rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- volver ------ */

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.volver:hover { background: var(--surface-2); color: var(--text); }

/* ------------------------------------------------------ tipo de ancla --- */

.modo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
}

/* El punto es la leyenda: color y forma por tipo. Los tres colores son DATO
   (los mismos de COLORES en app/anclas.js, declarados una sola vez en el
   <body> de anclas.html); aqui no se inventa ninguno. */
.modo::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
}
.modo[data-modo="agujero_redondo"]::before { background: var(--punto-redondo, var(--text-muted)); }
.modo[data-modo="agujero_cuadrado"]::before {
  background: var(--punto-eje, var(--text-muted));
  border-radius: 2px;
}
.modo[data-modo="vastago_pin"]::before {
  background: var(--punto-vastago, var(--text-muted));
  width: 7px;
  height: 13px;
}

.modo:hover { background: var(--surface-2); border-color: var(--border-strong); }
.modo.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--on-primary-soft);
  font-weight: 600;
}

.angulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.angulo input {
  width: 58px;
  height: var(--control);
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.angulo input:hover { border-color: var(--primary); }
.angulo input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
/* Las flechitas del navegador no son del sistema: estorban en una barra densa. */
.angulo input::-webkit-inner-spin-button,
.angulo input::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* La casilla de «Sin CAD»: una conexión que el STEP no modela y se marca a mano. */
.marca-cad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.marca-cad input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

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

.barra__grupo > button:not(.modo) {
  height: var(--control);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard),
    transform var(--dur-1) var(--ease-standard);
}
.barra__grupo > button:not(.modo):hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.barra__grupo > button:not(.modo):active { transform: translateY(1px); }

#btn-guardar {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
#btn-guardar:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.barra__grupo > .peligro {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
  color: var(--danger);
}
.barra__grupo > .peligro:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--danger-soft));
  border-color: var(--danger);
}

#btn-ver-auto.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--on-primary-soft);
  font-weight: 600;
}

/* ====================================================== estructura ====== */

.trabajo {
  display: grid;
  grid-template-columns: var(--riel) minmax(0, 1fr) var(--panel-anclas);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* ------------------------------------------------------------ piezas --- */

.paleta {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.paleta__filtros {
  display: grid;
  gap: 6px;
  padding: var(--space-2) var(--space-2) 6px;
  border-bottom: 1px solid var(--border);
}

#buscar {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}
#buscar::placeholder { color: var(--text-muted); opacity: 1; }
#buscar:hover { border-color: var(--primary); }
#buscar:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

.paleta__cuenta {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.paleta__lista {
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.paleta__lista > li { margin: 0; }

.pieza {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard),
    transform var(--dur-1) var(--ease-standard);
}
.pieza:hover { background: var(--surface-2); border-color: var(--border); transform: translateY(-1px); }
.pieza:active { transform: translateY(1px); }
.pieza:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }

/* La miniatura es transparente: la pieza va directa sobre la fila, sin caja. */
.pieza img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
}
.pieza > span {
  display: block;
  min-width: 0;
}
/* El JS separa nombre y sku con un <br> que aqui sobra: los dos son bloques. */
.pieza > span > br { display: none; }
.pieza__nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.pieza__sku {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Verde = esta pieza ya tiene anclas guardadas. */
.pieza--guardada {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  box-shadow: inset 3px 0 0 var(--success);
}
.pieza--guardada:hover {
  background: color-mix(in srgb, var(--success) 14%, var(--success-soft));
}
.pieza--guardada .pieza__sku { color: var(--success); font-weight: 500; }

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

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

#vista {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

/* La ayuda flota sobre el 3D: no puede robarle clics a la pieza. */
.ayuda-anclas {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  width: fit-content;
  /* 68 caracteres por linea: mas ancho se lee mal (lo mide la revision de diseno). */
  max-width: min(640px, 68ch);
  margin: 0 auto;
  margin: 0;
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-1);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}
.ayuda-anclas b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------- panel anclas -- */

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

.pieza-actual {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.pieza-actual h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pieza-actual p {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* La guia se abre y se cierra: cuando esta abierta scrollea ella, para no
   empujar fuera de la pantalla la lista de anclas (que es lo que se usa). */
.guia {
  flex: 0 1 auto;
  max-height: 46%;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.guia > summary {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.guia > summary::-webkit-details-marker { display: none; }
.guia > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--text-muted);
  transition: transform var(--dur-2) var(--ease-standard);
}
.guia[open] > summary::before { transform: rotate(90deg); }
.guia > summary:hover { background: var(--surface-2); }

.guia__pista {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.guia__tipo {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
}
.guia__color {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 3px;
}
.guia__tipo strong { font-size: 12px; font-weight: 600; color: var(--text); }
.guia__tipo p {
  margin: 2px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}
.guia__tipo b { color: var(--text); font-weight: 600; }
.guia__como { font-size: 12px; }

.guia__nota {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.5;
}
.guia__nota b { color: var(--text); font-weight: 600; }

.pasos__cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2) 6px var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pasos__cabecera > strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
#cuenta-anclas { font-variant-numeric: tabular-nums; }

#btn-limpiar {
  height: 26px;
  margin-left: auto;
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#btn-limpiar:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--danger-soft));
  border-color: var(--danger);
}

.anclas__lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  display: grid;
  gap: 5px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.ancla {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: 5px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.ancla:hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--bg));
}

/* El punto lleva el color del tipo, el mismo que el del 3D. */
.ancla__punto {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
}

.ancla__datos {
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
}
.ancla__tipo {
  display: block;
  color: var(--text);
  font-weight: 500;
}
.ancla__pos {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ancla__origen {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Las que vienen del extractor: borde discontinuo, como el contorno hueco del 3D. */
.ancla--auto { border-style: dashed; }
.ancla--auto .ancla__origen {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.ancla__borrar {
  height: 26px;
  min-width: 26px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.ancla__borrar:hover { background: var(--danger-soft); color: var(--danger); }
.ancla__borrar:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.grupo--vacio {
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ================================================ aviso y creditos ====== */

.estado {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
}
/* Sin aviso no hay franja: en escritorio dejaba 28 px vacios sobre los creditos. */
.estado:has(#hud-aviso:empty) { display: none; }

#hud-aviso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hud-aviso:not(:empty)::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
#hud-aviso.ok { color: var(--success); }
#hud-aviso.aviso { color: var(--warning); }
#hud-aviso.error { color: var(--danger); }

.creditos {
  margin: 0;
  padding: 4px var(--space-3) 6px;
  /* Una línea de 136 caracteres se pierde al volver al principio. La banda
     sigue de lado a lado —es la que pinta el borde y el fondo—, pero el texto
     se corta a 68 caracteres centrado, con el relleno. La primera línea es el
     relleno de siempre para quien no entienda max(). */
  padding: 4px max(var(--space-3), calc((100% - 68ch) / 2)) 6px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.creditos strong { color: var(--text); font-weight: 600; }

/* ==================================================== pantallas ========= */

/* A 1440 la barra necesita ~1.445 px con «Sin CAD»: se aprieta el aire entre
   grupos para que Guardar/Exportar/Deshacer no caigan a una segunda fila. */
@media (min-width: 1101px) {
  .barra {
    gap: var(--space-2);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .barra__grupo + .barra__grupo { padding-left: var(--space-2); }
}

@media (max-width: 1100px) {
  :root { --riel: 236px; --panel-anclas: 320px; }
}

@media (max-width: 900px) {
  :root { --riel: 210px; --panel-anclas: 272px; }
  .barra { gap: 6px var(--space-2); }
  .barra__grupo + .barra__grupo { padding-left: var(--space-2); }
  .marca { font-size: 12px; }
}

/* Estrecho: se apila con el lienzo PRIMERO, que es donde se trabaja. El scroll
   vive en esta zona, no en la pagina. */
@media (max-width: 760px) {
  .barra {
    min-height: 0;
    padding: 6px var(--space-2);
  }
  /* El grupo de Tipo creció con «Sin CAD»: en teléfono parte en dos renglones
     en vez de empujar la barra fuera de la pantalla. */
  .barra__grupo { flex-wrap: wrap; }
  /* La casilla se toca como los botones de al lado, no como un texto de 19 px. */
  .marca-cad { min-height: 28px; }
  .marca-cad input { width: 24px; height: 24px; }
  .barra__grupo > button:not(.modo),
  .modo,
  .volver { height: 28px; }
  .barra__grupo > button:not(.modo),
  .modo {
    padding: 0 8px;
    font-size: 12px;
  }
  #estado { display: none; }

  .trabajo {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .lienzo {
    order: 1;
    flex: 0 0 auto;
    /* 33vh y no 44: con la barra de 5 filas y el panel del ancla, 44 dejaba
       la primera pieza cortada; 38 aún la dejaba en 8 px. */
    height: 33vh;
    min-height: 220px;
    border-bottom: 1px solid var(--border);
  }
  .ayuda-anclas {
    bottom: var(--space-2);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
  }
  /* En tactil no hay rueda ni Shift: la ayuda se queda con lo que si se puede. */
  .ayuda-anclas__raton { display: none; }
  .ayuda-anclas__teclado { display: none; }

  /* El aviso vacio no ocupa renglon en una pantalla pequena. */
  .estado:has(#hud-aviso:empty) { display: none; }

  .pasos {
    order: 2;
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid var(--border);
    overflow: visible;
  }
  .guia { max-height: none; }
  .anclas__lista { flex: 0 0 auto; max-height: 46vh; }

  .paleta {
    order: 3;
    flex: 0 0 auto;
    display: block;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .paleta__lista { max-height: 55vh; }
  /* La posicion completa, con el fondo, en dos renglones en vez de «… fondo 4…». */
  .ancla__pos { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* -------------------------------------------------------- movimiento ---- */

/* Los dos paneles entran escalonados al abrir la pagina: el ojo entiende de un
   golpe que a la izquierda se elige la pieza y a la derecha se editan sus
   anclas. El bloque de movimiento reducido de abajo los apaga. */
@keyframes entra-panel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.paleta { animation: entra-panel 200ms var(--ease-standard) both; }
.pasos { animation: entra-panel 200ms var(--ease-standard) 70ms both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}