/* escena.css (Builder B, v3): sólo los nodos que crea el motor dentro de .escenario: rótulos proyectados, la capa
   del Detalle (anillo, leader, ficha, encabezados de lado, etiquetas de especie) y la ficha del corte de la celda.
   Ningún selector de layout de página. Se enlaza después de sitio.css. Las opacidades de los elementos del Detalle las
   escribe el motor en línea en función de T (scrubbeables): acá no llevan transición. */

.rotulos, .detalle-ui { position: absolute; inset: 0; }

/* rótulos de equipos y categorías, proyectados desde la cámara */
.rotulo3d {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: .8125rem; line-height: 1.2; font-weight: 500; font-stretch: 87%; color: var(--tinta-2);
  padding: 2px 6px 2px 10px; background: var(--film);
  border-left: 1.5px solid var(--tinta);
  opacity: 0; transition: opacity .2s;
  will-change: transform;
}
.rotulo3d.visible { opacity: 1; }
.rotulo3d.izq { border-left: 0; border-right: 1.5px solid var(--tinta); padding: 2px 10px 2px 6px; }
/* el uso activo de la lista, sobre su viñeta: mismo código que la marca de la lista (hipo con tinta) */
.rotulo3d.uso { color: var(--tinta); font-weight: 650; background: var(--hipo); border-left-width: 3px; z-index: 1; }
.mov-reducido .rotulo3d { transition: none; }

/* capa del Detalle: anillo, leader y punto de ancla (SVG) */
.detalle-ui > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.detalle-ui .anillo { fill: none; stroke: var(--tinta); stroke-width: 2; }
.detalle-ui .leader { fill: none; stroke: var(--tinta); stroke-width: 1.2; }
.detalle-ui .punto { fill: var(--tinta); }

/* fichas: leyenda del Detalle, encabezados de lado y corte de la celda (opacidad en línea, por T) */
.detalle-ficha {
  position: absolute; left: 0; top: 0; font-size: .8125rem; line-height: 1.35; color: var(--tinta-2);
  background: var(--film); padding: 4px 8px 6px; max-width: 17rem; opacity: 0; transition: none;
  will-change: transform;
}
.detalle-ficha b { display: block; font-weight: 600; color: var(--tinta); font-stretch: 87%; }
.detalle-ficha ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.detalle-ficha li { display: inline-flex; align-items: baseline; gap: 5px; }
.detalle-ficha li i { align-self: center; }
.detalle-ficha .f { font-size: 1em; }
.detalle-ficha.lado { padding: 2px 6px; }
.detalle-ficha i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--tinta); display: inline-block; }
.detalle-ficha i.halo { width: 14px; height: 14px; background: rgb(138 143 191 / .35); border-color: var(--construccion); }
.detalle-ficha svg { flex: none; align-self: center; }
.ficha-celda { max-width: 20rem; }
/* en retrato, la ficha de la celda es compacta: sin título y sólo lo que se ve en el encuadre (R2-N08) */
.ficha-celda.compacta { max-width: calc(100% - 20px); font-size: .75rem; padding: 3px 6px 4px; }
.ficha-celda.compacta b, .ficha-celda.compacta li { display: none; }
.ficha-celda.compacta.fase-a li[data-f~="a"], .ficha-celda.compacta.fase-c li[data-f~="c"] { display: inline-flex; }
.ficha-celda.compacta ul { margin: 0; gap: 2px 10px; }

/* nombre de cada especie junto a su molécula, dentro del círculo del Detalle (R1-D04); acompaña a la especie al entrar */
.etq-especie {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-size: .875rem; line-height: 1.2; color: var(--tinta);
  padding: 1px 5px; background: rgb(236 240 238 / .88); border-left: 1.5px solid var(--tinta);
  opacity: 0; transition: none;
  will-change: transform;
}
.etq-especie .f { font-size: 1em; font-weight: 500; }