/* ============================================================
   MAEStudio · capas.css — BANCO DE CAPAS (2026-07-27)
   Ver src/js/capas.js. Nada de esto existe para un visitante:
   el banco sólo se activa con ?capas en la URL.
   ============================================================ */

/* ------------------------------------------------------------
   APAGAR ES OCULTAR, NO QUITAR.
   Todo por OPACIDAD: nada de display ni visibility. Varias piezas
   se miden unas a otras (el clip del cubo se coloca a partir del
   hueco del hero); si una capa sale del flujo, las demás pierden
   la referencia y se descolocan.
   El !important es deliberado: clip1.js y main.js escriben opacidad
   EN LÍNEA cada fotograma, y sin él el interruptor duraría un frame.
   ------------------------------------------------------------ */

/* --- FONDO: el lienzo y sus bucles --- */
.sin-fondo #railArco,
.sin-fondo .bg-noche { opacity: 0 !important; }

/* --- PRIMER PLANO: lo que no es texto, tarjeta ni botón ---
   En el hero se apagan los HIJOS del hueco menos la jaula: la jaula
   vive dentro de .idle-cycle, y apagando el padre se iría con él. */
.sin-plano .s3-cubo,
.sin-plano .clip1-layer,
.sin-plano .fg3d,
.sin-plano .fg3d-bloom,
.sin-plano .ranura,
/* Antes esto era `.idle-cycle > *`. La caja del objeto se partió en dos
   inquilinos (.hero-cubo y .clip1-slot, 2026-07-28), así que los hijos que hay
   que apagar bajaron un nivel. `.clip1-layer` ya cae por su propia línea. */
.sin-plano .hero-cubo > *:not(.cage-overlay) { opacity: 0 !important; }

/* --- JAULA: es identidad, va aparte (regla 2 de la gramática) --- */
.sin-jaula .fg3d-cage,
.sin-jaula .cage-overlay { opacity: 0 !important; }

/* --- CONTENIDO: textos, tarjetas y botones ---
   Las notas de datos viven dentro del lienzo fijo, pero son TEXTO. */
.sin-texto .pl-contenido,
.sin-texto .dnotes { opacity: 0 !important; }

/* ------------------------------------------------------------
   EL PANEL
   ------------------------------------------------------------ */
.capas {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  width: 232px; padding: 10px 12px 8px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid rgba(238, 243, 255, 0.16);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  font-family: var(--font-data, "Space Mono", monospace);
  font-size: 11px; line-height: 1.3; color: #EEF3FF;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  user-select: none;
}
.capas.oculto { display: none; }

.capas__cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(238, 243, 255, 0.12);
}
.capas__cab b { letter-spacing: 0.22em; font-size: 10px; opacity: 0.85; }

.capas__fila {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-radius: 6px; cursor: pointer;
}
.capas__fila:hover { background: rgba(238, 243, 255, 0.06); }
.capas__fila.off .capas__n { opacity: 0.38; text-decoration: line-through; }
.capas__fila input { accent-color: #E05A4E; margin: 0; cursor: pointer; }

.capas__n { flex: 1; display: flex; flex-direction: column; }
.capas__n i { font-style: normal; font-size: 9px; opacity: 0.5; letter-spacing: 0.04em; }

.capas button {
  font: inherit; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #EEF3FF; background: rgba(238, 243, 255, 0.09);
  border: 1px solid rgba(238, 243, 255, 0.18); border-radius: 5px;
  padding: 3px 7px; cursor: pointer;
}
.capas button:hover { background: rgba(224, 90, 78, 0.34); border-color: #E05A4E; }

.capas__pie {
  margin-top: 7px; padding-top: 6px; font-size: 9px; opacity: 0.45;
  border-top: 1px solid rgba(238, 243, 255, 0.1);
}