/* ============================================================
   MAEStudio · auxiliares.css — ANDAMIOS (2026-07-27)
   Reglas para alinear y para ver dónde empieza y acaba cada tramo.
   Ver src/js/auxiliares.js. Sólo existen con el banco activo.
   ============================================================ */

/* Por encima de todo menos del propio panel (z 9999). */
.aux-rejilla,
.aux-regla { position: fixed; z-index: 9990; pointer-events: none; }

/* ------------------------------------------------------------
   REJILLA — centro y tercios
   El CENTRO va marcado distinto del tercio a propósito: no son la
   misma referencia y confundirlos es alinear contra lo que no era.
   ------------------------------------------------------------ */
.aux-rejilla { inset: 0; display: none; }
.con-rejilla .aux-rejilla { display: block; }

.aux-rejilla__v,
.aux-rejilla__h { position: absolute; background: rgba(84, 207, 224, 0.34); }
.aux-rejilla__v { top: 0; bottom: 0; width: 1px; }
.aux-rejilla__h { left: 0; right: 0; height: 1px; }

/* el centro, en coral de marca y con algo más de cuerpo */
.aux-rejilla__v.es-centro,
.aux-rejilla__h.es-centro { background: rgba(224, 90, 78, 0.62); }
.aux-rejilla__v.es-centro { width: 1px; box-shadow: 0 0 6px rgba(224, 90, 78, 0.35); }
.aux-rejilla__h.es-centro { height: 1px; box-shadow: 0 0 6px rgba(224, 90, 78, 0.35); }

/* ------------------------------------------------------------
   REGLA DEL RAÍL — la tira entera, de pie, a escala
   ------------------------------------------------------------ */
.aux-regla {
  left: 14px; top: 96px; bottom: 96px; width: 96px;
  display: none;
  font-family: var(--font-data, "Space Mono", monospace);
}
.con-regla .aux-regla { display: block; }

.aux-regla__tira {
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  border: 1px solid rgba(238, 243, 255, 0.22);
  border-radius: 3px; overflow: hidden;
  background: rgba(10, 14, 26, 0.55);
}
.aux-regla__t { position: absolute; left: 0; right: 0; display: block; }
/* parada = donde te quedas · esclusa = donde viajas */
.aux-regla__t.es-seccion  { background: rgba(238, 243, 255, 0.10); }
.aux-regla__t.es-esclusa  { background: rgba(157, 123, 255, 0.55); }
.aux-regla__t.es-vertical { background: rgba(224, 90, 78, 0.60); }

/* DOS agujas: la maciza es lo que se VE, la fina dónde está el scroll
   de verdad. Lo que las separa es el ALCANCE trabajando. */
.aux-regla__aguja {
  position: absolute; left: -3px; width: 18px; height: 2px;
  margin-top: -1px; background: #EEF3FF;
  box-shadow: 0 0 7px rgba(238, 243, 255, 0.85);
}
.aux-regla__aguja--crudo {
  height: 1px; background: rgba(238, 243, 255, 0.45);
  box-shadow: none; left: -1px; width: 14px;
}

.aux-regla__lee {
  position: absolute; left: 20px; top: 0; translate: 0 -50%;
  font-size: 9px; line-height: 1.5; letter-spacing: 0.06em;
  color: rgba(238, 243, 255, 0.82); text-shadow: 0 1px 4px #000;
  white-space: nowrap;
}
.aux-regla__lee b {
  display: block; font-size: 8px; letter-spacing: 0.18em;
  color: #9D7BFF; margin-bottom: 1px;
}
.aux-regla__lee span { display: block; opacity: 0.55; }

/* separación entre el bloque de capas y el de auxiliares */
.capas__grupo { margin-top: 8px; padding-top: 2px; border-top: 1px solid rgba(238, 243, 255, 0.12); }

/* ============================================================
   GUÍAS Y ANCLAS (2026-07-31, pedido de Mau para poder señalar él)
   Un clic clava una cruz; alt+clic borra la más cercana. Y en vivo, dónde
   cree cada capa que está su ancla: la jaula en cian, el cubo en rosa.
   ============================================================ */
.aux-guias { display: none; }
.con-guias .aux-guias {
  display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
.aux-guias__cv { position: fixed; left: 0; top: 0; }
.aux-guias__lee {
  position: fixed; right: 12px; bottom: 12px; display: none;
  font: 500 10px/1.5 'Space Mono', monospace; letter-spacing: .04em;
  background: rgba(8,10,16,.86); border: 1px solid rgba(120,140,170,.28);
  border-radius: 4px; padding: 7px 10px; color: #9fb0c6; min-width: 232px;
}
.aux-guias__lee b { display: block; color: #ffd60a; letter-spacing: .12em; margin-bottom: 4px; }
.aux-guias__lee span { display: block; }
.aux-guias__lee .es-jaula { color: #50f0ff; }
.aux-guias__lee .es-cubo  { color: #ff5a78; }
.aux-guias__lee .es-dif   { color: #fff; margin-top: 3px; }