/* yaqxxa v4 — tablero de cajas.
   Referencia asumida: ComfyUI — cajas sueltas sobre un fondo punteado, con
   los paneles auxiliares detrás de iconos en el borde. Oscuro porque esto se
   toca en salas oscuras; monoespaciado porque todo lo que se ve es código. */

:root {
  --fondo:  #08090c;
  --punto:  rgba(177, 184, 211, .12);
  --panel:  rgba(17, 18, 24, .78);
  --borde:  rgba(207, 214, 239, .15);
  --texto:  #e2e3e9;
  --tenue:  #858695;
  --calido: #ead9ad;
  --lila:   #c1acf0;   /* los encabezados y el nombre */
  --frio:   #83d8c7;
  --alerta: #e3a080;
  --vidrio: rgba(17, 18, 24, .72);
  --reflejo: rgba(245, 247, 255, .16);
  --reflejo-suave: rgba(245, 247, 255, .06);
  --sombra-vidrio: 0 18px 46px rgba(0, 0, 0, .42);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Zoom de texto, independiente del zoom del tablero. Alejarse en el tablero
     achica todo —cajas y letras— y a cierta distancia el código no se lee. Esto
     agranda SOLO las letras: las cajas quedan del tamaño que uno las dejó y el
     cuerpo scrollea si hace falta. Todos los tamaños de fuente de esta hoja se
     multiplican por acá; si alguno se escribe en px pelado, deja de responder.
     La barra y el riel se lo devuelven a 1 más abajo. */
  --zt: 1;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: calc(13px * var(--zt))/1.5 var(--mono);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.tenue { color: var(--tenue); }
code { color: var(--calido); font-family: var(--mono); }
a { color: var(--calido); text-underline-offset: 3px; }
a:hover { color: var(--frio); }

/* ── barra ──────────────────────────────────────────────────────────────── */

.barra {
  flex: 0 0 auto;
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  min-height: 52px;
  padding: 0 16px;
  background: rgba(10, 11, 15, .72);
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.025), 0 8px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  z-index: 30;
}
.identidad {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-width: 210px;
  padding: 0 18px 0 12px;
  border-right: 1px solid #303039;
  overflow: hidden;
}
.marca-corte {
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  background: var(--calido);
  box-shadow: 5px 0 0 #2e5b54;
}
.marca {
  position: relative;
  color: #f0f0e9;
  font-size: calc(17px * var(--zt)); line-height: 1;
  letter-spacing: .2em;
  font-weight: 800;
  text-shadow: 0 0 16px rgba(127,212,193,.18);
}
.marca::after {
  content: attr(data-eco);
  position: absolute; inset: 0;
  color: var(--frio);
  opacity: .16;
  clip-path: inset(55% 0 20% 0);
  transform: translate(2px, 1px);
  pointer-events: none;
}
.marca-indice {
  align-self: flex-start;
  margin-top: 11px;
  color: #555563;
  font-size: calc(8px * var(--zt)); line-height: 1;
  letter-spacing: .08em;
}
.banks-header {
  flex: 0 0 auto; height: 52px;
  display: flex; align-items: stretch;
  border-right: 1px solid #303039;
}
.bank-header {
  position: relative; flex: 0 0 64px;
  display: grid; place-content: center;
  padding: 0; text-align: center;
  background: transparent; color: #686977;
  border: 0; border-left: 1px solid rgba(207,214,239,.09);
  font: 500 calc(13px * var(--zt))/1 var(--mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .12s, background-color .12s;
}
.bank-header:hover { color: var(--texto); background: rgba(255,255,255,.035); }
.bank-header:focus-visible { outline: 1px solid var(--calido); outline-offset: -2px; }
.bank-header.activo {
  color: var(--texto);
  background: rgba(193,172,240,.065);
}
.bank-header.activo::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2px; background: var(--lila);
}
.hueco { flex: 1; }
.resumen {
  align-self: center;
  max-width: 220px;
  padding-left: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(10px * var(--zt)); color: #858592;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .barra { padding: 0 10px; }
  .identidad { min-width: 142px; padding-right: 8px; }
  .marca { font-size: calc(15px * var(--zt)); }
  .bank-header { flex-basis: 52px; }
  .marca-indice, .resumen { display: none; }
}

/* ── riel de iconos, esquina derecha ────────────────────────────────────── */

.riel {
  position: fixed; top: 52px; right: 12px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px;
}
.icono {
  width: 52px; padding: 7px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(18, 19, 25, .68); color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 5px;
  box-shadow: inset 0 1px 0 var(--reflejo-suave), 0 8px 24px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  font: inherit; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s, transform .14s;
}
.icono .glifo { font-size: calc(17px * var(--zt)); line-height: 1; }
.icono .rotulo { font-size: calc(9px * var(--zt)); letter-spacing: .08em; }
.icono:hover { color: var(--texto); border-color: rgba(235,239,255,.27); background: rgba(31,32,40,.78); transform: translateY(-1px); }
.icono.activo { color: var(--calido); border-color: rgba(234,217,173,.48); background: rgba(34,32,30,.76); }

/* El zoom de texto vive en el riel y no en una caja: agranda todo, así que no
   es de nadie en particular. No escala con --zt —si el texto se agranda, este
   par no tiene por qué crecer con él— y por eso sus tamaños van en px. */
/* La barra, el riel y sus cajones se quedan fuera del zoom del tablero. Los
   menús laterales son interfaz fija: abrir CAJAS, ARCHIVO o DOCS no debe traer
   consigo el tamaño tipográfico de una caja ampliada. */
.barra, .riel, .cajon { --zt: 1; }

.zoom-texto { display: flex; gap: 3px; margin-top: 2px; }
.zoom-texto button {
  flex: 1; padding: 3px 0;
  background: rgba(22,23,29,.72); color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--reflejo-suave);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 10px var(--mono); cursor: pointer;
}
.zoom-texto button:hover { color: var(--calido); border-color: var(--calido); }
.zoom-texto button:disabled { opacity: .35; cursor: not-allowed; }

/* ── tablero ────────────────────────────────────────────────────────────── */

.tablero {
  flex: 1; position: relative; overflow: hidden;
  /* panear y arrastrar no debe seleccionar texto */
  user-select: none; -webkit-user-select: none;
}
/* lo que sí es texto para seleccionar y editar */
.tablero #editor, .tablero input, .tablero textarea {
  user-select: text; -webkit-user-select: text;
}

.lienzo-t {
  position: absolute; left: 0; top: 0;
  width: 6000px; height: 6000px;
  transform-origin: 0 0;
  background-image: radial-gradient(circle, var(--punto) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
}

.cables { position: absolute; inset: 0; pointer-events: none; }
.cables path {
  fill: none; stroke: var(--frio); stroke-width: 2; opacity: .65;
  pointer-events: visibleStroke; cursor: pointer;
}
.cables path:hover { opacity: 1; stroke-width: 3; }
.cables path.tentativo { stroke-dasharray: 6 5; opacity: .9; pointer-events: none; }

.lienzo-t > .caja, .caja.expandido {
  position: absolute;
  border: 1px solid var(--borde); border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 34%, rgba(131,216,199,.018)),
    var(--vidrio);
  box-shadow: var(--sombra-vidrio), inset 0 1px 0 var(--reflejo), inset 0 -1px 0 rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.28) contrast(1.03);
  backdrop-filter: blur(18px) saturate(1.28) contrast(1.03);
  min-width: 240px;
}
.lienzo-t > .caja::before, .caja.expandido::before {
  content: ''; position: absolute; z-index: 6; pointer-events: none;
  left: 12px; right: 46%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
}
.lienzo-t > .caja[open] {
  display: flex; flex-direction: column;
}
/* Chrome moderno envuelve el contenido del details en ::details-content;
   sin esto, el wrapper corta la cadena flex y el cuerpo no estira */
.lienzo-t > .caja[open]::details-content {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.lienzo-t > .caja:not([open]) { height: auto !important; }
/* Una caja sacada del tablero no se ve, y sus cables ya fueron cortados: no
   queda nada escondido participando. Va acá y no con el catálogo porque
   `.lienzo-t > .caja[open]` le gana en especificidad a `.caja.fuera`. */
.lienzo-t > .caja.fuera, .caja.fuera { display: none; }
.lienzo-t > .caja[open] > .cuerpo {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column;
}
/* La posición de fábrica de cada caja. Tienen que estar TODAS: la que no
   figura acá cae en la esquina del lienzo, encima de las demás, porque una
   caja absoluta sin `left` usa su posición estática. Le pasaba a ESCENAS. */
#caja-codigo      { left: 36px;   top: 30px;  width: min(560px, 46vw); height: 380px; }
#caja-monitor     { left: 640px;  top: 30px;  width: 520px; height: 430px; }
#caja-cues        { left: 1200px; top: 30px;  width: 760px; height: 430px; }
#caja-parametros  { left: 800px;  top: 500px; width: 420px; height: 330px; }
#caja-escenas     { left: 1660px; top: 500px; width: 400px; height: 330px; }

/* asas de redimensión */
.asa { position: absolute; z-index: 3; }
.asa-e  { right: -3px; top: 24px; bottom: 10px; width: 8px; cursor: ew-resize; }
.asa-s  { left: 10px; right: 10px; bottom: -3px; height: 8px; cursor: ns-resize; }
.asa-se { right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.asa-se::after {
  content: ''; position: absolute; right: 5px; bottom: 5px;
  width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
}
.caja:hover .asa-se::after { border-color: var(--calido); }

/* puertos de conexión */
.puerto {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  border-radius: 50%; z-index: 4;
  background: var(--fondo); border: 2px solid var(--frio);
  cursor: crosshair; touch-action: none;
}
.puerto.entrada { left: -8px; }
.puerto.salida  { right: -8px; }
.puerto:hover { background: var(--frio); }

.caja > summary {
  list-style: none;
  position: relative;   /* los puertos se anclan acá */
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid transparent;
  border-radius: 7px 7px 0 0;
  font-size: calc(10px * var(--zt)); letter-spacing: .16em; text-transform: uppercase;
  cursor: grab; user-select: none; touch-action: none;
}
.caja > summary:active { cursor: grabbing; }
.caja > summary::-webkit-details-marker { display: none; }
.caja > summary .tit { color: var(--lila); font-weight: 600; }
.caja > summary::after { content: '▸'; margin-left: auto; color: var(--tenue); }
.caja[open] > summary { border-bottom-color: var(--borde); }
.caja[open] > summary::after { content: '▾'; }

.caja .cuerpo { padding: 12px; }

/* ── controles ──────────────────────────────────────────────────────────── */

.btn {
  background: rgba(255,255,255,.045); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 3px; padding: 5px 12px; font: inherit; font-size: calc(12px * var(--zt)); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--reflejo-suave), 0 4px 12px rgba(0,0,0,.14);
  transition: color .12s, border-color .12s, background .12s, transform .12s;
}
.btn:hover:not(:disabled) { border-color: rgba(234,217,173,.5); color: var(--calido); background: rgba(255,255,255,.075); transform: translateY(-1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.chico { padding: 2px 7px; font-size: calc(11px * var(--zt)); }
/* el botón armado: el segundo clic corta cables */
.btn.peligro { border-color: var(--alerta); color: var(--alerta); }
.btn.peligro:hover:not(:disabled) { border-color: var(--alerta); color: var(--alerta); background: rgba(52,26,18,.78); }

/* ── el catálogo del cajón CAJAS ──────────────────────────────────────────── */

.catalogo-cuerpo { padding-top: 4px !important; }
#panel-cajas { width: min(420px, 100vw); }
.catalogo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 8px;
}
.caja-catalogo {
  position: relative;
  aspect-ratio: 1;
  min-width: 0; min-height: 88px;
  display: grid; grid-template-rows: 1fr auto auto;
  place-items: center; gap: 4px;
  padding: 12px 6px 9px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 42%),
    rgba(13,14,19,.64);
  color: var(--texto);
  border: 1px solid var(--borde); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--reflejo-suave), 0 7px 18px rgba(0,0,0,.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.caja-catalogo:hover { border-color: rgba(234,217,173,.48); background-color: rgba(31,30,32,.75); }
.caja-catalogo:focus-visible { outline: 1px solid var(--calido); outline-offset: 2px; }
.caja-catalogo.fuera { color: var(--tenue); border-style: dashed; opacity: .62; }
.caja-catalogo.peligro { color: var(--alerta); border-color: var(--alerta); background: rgba(42,20,15,.8); }
.catalogo-glifo { align-self: end; color: var(--lila); font-size: calc(23px * var(--zt)); line-height: 1; }
.caja-catalogo.fuera .catalogo-glifo { color: var(--tenue); }
.caja-catalogo.peligro .catalogo-glifo { color: var(--alerta); }
.catalogo-nombre {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(9px * var(--zt)); font-weight: 600; letter-spacing: .08em;
}
.catalogo-estado { color: var(--frio); font-size: calc(9px * var(--zt)); line-height: 1; white-space: nowrap; }
.catalogo-estado::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px;
}
.caja-catalogo.fuera .catalogo-estado, .caja-catalogo.peligro .catalogo-estado { color: currentColor; }

.chip {
  background: rgba(39,37,25,.48); color: var(--calido); border: 1px solid var(--borde);
  border-radius: 3px; padding: 3px 8px; font: inherit; font-size: calc(12px * var(--zt)); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--reflejo-suave);
}
.chip:hover { border-color: var(--calido); }
.chip.chico { padding: 1px 6px; font-size: calc(11px * var(--zt)); }

input[type=text], input[type=password], .invocacion {
  background: rgba(4,5,8,.72); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 3px; padding: 5px 8px; font: inherit; font-size: calc(12px * var(--zt)); width: 100%;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025);
}
input:focus { outline: 1px solid rgba(234,217,173,.7); outline-offset: -1px; }

.acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.progreso { font-size: calc(11px * var(--zt)); color: var(--tenue); }

/* ── invocar ────────────────────────────────────────────────────────────── */

.invocacion { flex: 1; font-size: calc(14px * var(--zt)); color: var(--calido); }
.invocacion.chico { font-size: calc(12px * var(--zt)); }
.leyenda { margin: 8px 0 0; font-size: calc(11px * var(--zt)); }
.salida { margin-top: 10px; }
.salida .error { color: var(--alerta); }
.vista-grande { background: rgba(4,5,8,.84); border: 1px solid var(--borde); border-radius: 3px; padding: 8px; }
.vista-grande img, .vista-grande video { max-width: 100%; max-height: 320px; display: block; margin: 0 auto; border-radius: 2px; }
.vista-grande audio { width: 100%; }
.meta { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: calc(11px * var(--zt)); flex-wrap: wrap; }
.titulillo { margin-top: 12px; font-size: calc(10px * var(--zt)); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.ficha { margin: 4px 0 0; display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; font-size: calc(12px * var(--zt)); }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; }
.falta { color: var(--alerta); font-size: calc(11px * var(--zt)); }
.indice { margin-top: 12px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: calc(11px * var(--zt)); }

/* ── mundo ──────────────────────────────────────────────────────────────── */

.escena {
  flex: 1; min-height: 140px; background: rgba(4,5,8,.9);
  border: 1px solid var(--borde); border-radius: 3px;
  overflow: hidden; position: relative; margin-bottom: 10px;
}
.escena a-scene, .escena canvas { width: 100% !important; height: 100% !important; display: block; }
.escena:empty::after {
  content: 'el mundo no está montado'; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--tenue); font-size: calc(11px * var(--zt));
}
.nota-carga { font-size: calc(11px * var(--zt)); margin: 0 0 10px; }

.parametros {
  display: grid;
  /* UNA COLUMNA, SIEMPRE. Antes esto era `auto-fit, minmax(190px, 1fr)`: al
     ensanchar la caja aparecían columnas al costado en vez de crecer las filas,
     y siete perillas repartidas en dos columnas angostas no se ven mejor, se
     ven peor. Ahora ensanchar alarga el deslizador —que es lo que uno agarra— y
     agrandar en alto reparte el alto entre las filas. */
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(calc(24px * var(--zt)), 1fr);
  align-content: stretch;
  gap: 2px 14px; margin: 10px 0 0;
  flex: 1; min-height: 0;
}
.parametro {
  display: grid;
  /* el nombre y el valor piden lo que necesitan —crecen con el zoom de texto—
     y todo lo que sobra es del deslizador */
  grid-template-columns: minmax(66px, max-content) 1fr minmax(52px, max-content);
  align-items: center; gap: 10px;
  font-size: calc(11px * var(--zt));
}
.parametro span:first-child { color: var(--tenue); }
.parametro input { width: 100%; min-width: 56px; }
/* el deslizador sigue al zoom de texto: si la letra crece y él no, queda un
   hilo imposible de agarrar al lado de un número grande */
.parametro input[type=range] { height: calc(16px * var(--zt)); accent-color: var(--frio); }
.parametro input[type=range] {
  -webkit-appearance: none; appearance: none; background: transparent;
}
.parametro input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border: 1px solid var(--borde); border-radius: 4px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.parametro input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
  background: var(--frio); border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
.parametro input[type=range]::-moz-range-track {
  height: 4px; border: 1px solid var(--borde); border-radius: 4px; background: rgba(255,255,255,.07);
}
.parametro input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--frio);
  border: 1px solid rgba(255,255,255,.5); box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.parametro .valor { text-align: right; color: var(--frio); font-variant-numeric: tabular-nums; }

/* ── cajones (paneles del riel) ─────────────────────────────────────────── */

.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(420px, 94vw);
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 24%),
    rgba(10,11,15,.78);
  border-left: 1px solid var(--borde);
  box-shadow: -18px 0 52px rgba(0,0,0,.44), inset 1px 0 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(28px) saturate(1.35) contrast(1.03);
  backdrop-filter: blur(28px) saturate(1.35) contrast(1.03);
  display: none;
  flex-direction: column;
}
.cajon.abierto { display: flex; }
.cajon-cabecera {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: calc(10px * var(--zt)); letter-spacing: .16em; text-transform: uppercase;
}
.cajon-cabecera .tit { color: var(--lila); font-weight: 600; }
.cajon > .cuerpo { flex: 1; overflow-y: auto; padding: 14px; }

/* ── archivo ────────────────────────────────────────────────────────────── */

.llaves { margin-bottom: 14px; font-size: calc(12px * var(--zt)); }
.llaves.sin { display: grid; gap: 6px; }
.llaves.sin p { margin: 0 0 4px; font-size: calc(12px * var(--zt)); }
.llaves.con { display: flex; align-items: center; gap: 8px; color: var(--tenue); }
.llaves .punto { color: var(--frio); }

.soltar {
  background: rgba(255,255,255,.018);
  border: 1px dashed var(--borde); border-radius: 4px;
  padding: 20px 12px; text-align: center; transition: border-color .12s, background .12s;
}
.soltar.encima { border-color: var(--calido); background: rgba(51,47,28,.42); }
.soltar p { margin: 0; }
.enlace-falso { color: var(--calido); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.piezas { display: grid; gap: 8px; margin-top: 10px; }
.pieza {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--borde); border-left: 2px solid var(--frio);
  border-radius: 3px; padding: 6px 8px;
  background: rgba(255,255,255,.022); box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.pieza .vista { width: 56px; height: 40px; display: grid; place-items: center; background: rgba(4,5,8,.9); overflow: hidden; border-radius: 2px; }
.pieza .vista img, .pieza .vista video { width: 100%; height: 100%; object-fit: cover; }
.pieza .glifo { color: var(--frio); font-size: calc(20px * var(--zt)); }
.pieza .info { font-size: calc(12px * var(--zt)); min-width: 0; }
.pieza .info b { color: var(--calido); }

.campos { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0; }
.campos label { display: grid; gap: 3px; font-size: calc(11px * var(--zt)); color: var(--tenue); }

.resultado {
  margin-top: 12px; padding: 10px;
  background: rgba(255,255,255,.02); border: 1px solid var(--borde); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: calc(12px * var(--zt));
}
.resultado.error { border-color: var(--alerta); color: var(--alerta); white-space: pre-wrap; }
.resultado .ok { color: var(--frio); margin: 0 0 8px; }
.invocaciones { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* ── documentación ──────────────────────────────────────────────────────── */

.doc { font-size: calc(12.5px * var(--zt)); line-height: 1.6; }
.doc h3 {
  margin: 20px 0 6px; font-size: calc(11px * var(--zt)); letter-spacing: .14em;
  text-transform: uppercase; color: var(--calido); font-weight: 600;
}
.doc h3:first-child { margin-top: 0; }
.doc p { margin: 0 0 8px; }
.doc pre {
  margin: 8px 0 10px; padding: 9px 11px; overflow-x: auto;
  background: rgba(4,5,8,.82); border: 1px solid var(--borde); border-radius: 3px;
  font-size: calc(11px * var(--zt)); line-height: 1.5; color: var(--frio);
}
.doc .regla {
  border-left: 2px solid var(--calido); padding: 4px 0 4px 11px;
  color: var(--texto); margin: 10px 0 8px;
}
.doc dl { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: calc(12px * var(--zt)); }
.doc dd { margin: 0; }
.doc .endpoints dt { color: var(--frio); }
#capacidades { grid-template-columns: 1fr auto; }
#capacidades dd { text-align: right; font-variant-numeric: tabular-nums; }
.si { color: var(--frio); } .no { color: var(--alerta); } .dato { color: var(--texto); }
.doc .pie { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--borde); font-size: calc(11px * var(--zt)); }

/* ── pantallas chicas: el tablero vuelve a ser una lista ────────────────── */

@media (max-width: 899px) {
  body { overflow: auto; }
  .tablero { overflow: visible; }
  .lienzo-t { position: static; width: auto; height: auto; transform: none !important; background: none; }
  .lienzo-t > .caja { position: static !important; width: auto !important; height: auto !important; margin: 12px; }
  .asa, .puerto, .cables { display: none; }
  .caja > summary { cursor: pointer; }
  .cajon { width: 100vw; }
  .riel { top: auto; bottom: 12px; right: 12px; flex-direction: row; }
}

/* ── el escenario: lo invocado ocupa el fondo del tablero ─────────────────── */

.escenario { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.escenario img, .escenario video { width: 100%; height: 100%; object-fit: cover; opacity: .8; }

/* ── el editor ────────────────────────────────────────────────────────────── */

.editor-marco {
  position: relative; flex: 1; min-height: 80px;
  background: #050506;
  border: 1px solid var(--borde); border-radius: 3px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025);
  overflow: hidden;
}
#editor {
  display: block; width: 100%; height: 100%; resize: none;
  background: transparent; color: var(--texto);
  border: 0; outline: 0;
  padding: 10px 12px;
  font: calc(13px * var(--zt))/calc(20px * var(--zt)) var(--mono);   /* el 20 también vive en main.js: lineaAlto() */
  white-space: pre; overflow: auto; tab-size: 2;
  position: relative; z-index: 0;
}
#destellos { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.destello {
  position: absolute; left: 0; right: 0; height: calc(20px * var(--zt));
  background: rgba(127, 212, 193, .30);
  animation: apagar .6s ease-out forwards;
}
.destello.mal { background: rgba(217, 154, 122, .32); }
@keyframes apagar { to { opacity: 0; } }

.estado-editor { margin-top: 8px; font-size: calc(11px * var(--zt)); display: grid; gap: 2px; color: var(--tenue); }
.estado-editor .mal { color: var(--alerta); }

/* ── sinte y visual ───────────────────────────────────────────────────────── */

#caja-audio       { left: 36px;   top: 500px; width: 360px; height: 390px; }
#caja-video       { left: 430px;  top: 500px; width: 330px; height: 240px; }
#caja-ambisonics  { left: 430px;  top: 920px; width: 400px; height: 340px; }
#caja-captura     { left: 1260px; top: 500px; width: 360px; height: 280px; }

.mini { font-size: calc(11px * var(--zt)); margin: 10px 0 0; line-height: 1.6; }
/* el lienzo llena lo que le toque sin depender del tamaño intrínseco del
   canvas: se mide la caja y el canvas se estira dentro de ella */
.video-cuerpo { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.lienzo-marco { flex: 1; min-height: 60px; position: relative; overflow: hidden; }
#lienzo-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.video-acciones { flex: 0 0 auto; padding: 6px 8px; border-top: 1px solid var(--borde); }

/* ── motor y mezclador de audio ─────────────────────────────────────────── */

.audio-cuerpo { padding: 0 !important; overflow: hidden !important; }
.audio-superior {
  flex: 0 0 auto; min-height: 46px; padding: 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(86px, 1fr) minmax(52px, auto) 34px 30px;
  align-items: center; gap: 6px;
  border-bottom: 1px solid var(--borde);
  background: rgba(4,5,8,.28);
}
.audio-icono, .ambi-icono {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 3px;
  background: rgba(255,255,255,.045); color: var(--tenue);
  box-shadow: inset 0 1px 0 var(--reflejo-suave);
  font: 500 calc(12px * var(--zt))/1 var(--mono); cursor: pointer;
}
.audio-icono:hover:not(:disabled), .ambi-icono:hover:not(:disabled) {
  color: var(--calido); border-color: rgba(234,217,173,.52);
}
.audio-icono:disabled, .ambi-icono:disabled { opacity: .32; cursor: not-allowed; }
.audio-out { width: 34px; font-size: calc(8px * var(--zt)); }
#audio-onoff.activo { border-color: var(--frio); color: var(--frio); }
.audio-rec { color: var(--alerta); font-size: calc(15px * var(--zt)); }
.audio-rec.activo { color: #ffb097; border-color: var(--alerta); background: rgba(90,32,24,.35); }
.audio-medidor { min-width: 0; display: grid; gap: 3px; }
.audio-medidor > div {
  min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 4px;
}
.audio-medidor span { color: var(--tenue); font-size: calc(8px * var(--zt)); line-height: 1; }
.audio-medidor i {
  display: block; min-width: 0; height: 6px;
  border: 1px solid var(--borde); border-radius: 2px;
  background:
    linear-gradient(to right, var(--frio) 0 72%, var(--calido) 72% 90%, var(--alerta) 90%)
    0 0 / var(--nivel, 0%) 100% no-repeat,
    rgba(255,255,255,.035);
}
.audio-estado {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tenue); text-align: right; font-size: calc(9px * var(--zt));
}
.audio-mezcla {
  flex: 1 1 auto; min-height: 138px; padding: 6px 9px;
  display: grid; grid-template-rows: repeat(4, minmax(28px, 1fr)); gap: 2px;
}
.audio-canal {
  min-width: 0; display: grid;
  grid-template-columns: 54px minmax(58px, 1fr) 43px 27px;
  align-items: center; gap: 7px;
  color: var(--tenue); font-size: calc(9px * var(--zt));
}
.audio-canal.master { border-top: 1px solid rgba(207,214,239,.1); margin-top: 2px; padding-top: 2px; }
.audio-canal output {
  color: var(--texto); text-align: right; font-size: calc(9px * var(--zt));
  font-variant-numeric: tabular-nums;
}
.audio-mute {
  width: 27px; height: 22px; padding: 0;
  border: 1px solid var(--borde); border-radius: 3px;
  background: transparent; color: var(--tenue);
  font: 600 calc(9px * var(--zt))/1 var(--mono); cursor: pointer;
}
.audio-mute:hover { color: var(--calido); border-color: var(--calido); }
.audio-mute.activo { color: var(--alerta); border-color: var(--alerta); background: rgba(87,36,26,.28); }
.audio-canal input[type=range], .ambi-orientacion input[type=range] {
  width: 100%; min-width: 48px; height: calc(16px * var(--zt));
  -webkit-appearance: none; appearance: none; background: transparent;
}
.audio-canal input[type=range]::-webkit-slider-runnable-track,
.ambi-orientacion input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border: 1px solid var(--borde); border-radius: 3px;
  background: rgba(255,255,255,.07);
}
.audio-canal input[type=range]::-webkit-slider-thumb,
.ambi-orientacion input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -5px; border-radius: 50%;
  background: var(--frio); border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 7px rgba(0,0,0,.4);
}
.audio-canal input[type=range]::-moz-range-track,
.ambi-orientacion input[type=range]::-moz-range-track {
  height: 4px; border: 1px solid var(--borde); border-radius: 3px; background: rgba(255,255,255,.07);
}
.audio-canal input[type=range]::-moz-range-thumb,
.ambi-orientacion input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--frio);
  border: 1px solid rgba(255,255,255,.5);
}

/* ── decodificador ambisónico ───────────────────────────────────────────── */

.ambi-cuerpo { padding: 0 !important; overflow: hidden !important; }
.ambi-formato {
  flex: 0 0 25px; padding: 6px 9px 4px;
  border-bottom: 1px solid rgba(207,214,239,.09);
  color: var(--frio); font-size: calc(8px * var(--zt)); letter-spacing: 0;
}
.ambi-fuente {
  flex: 0 0 auto; padding: 7px 8px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px;
  border-bottom: 1px solid rgba(207,214,239,.09);
}
.ambi-fuente input[type=text] { min-width: 0; font-size: calc(10px * var(--zt)); }
.ambi-transporte {
  flex: 0 0 auto; min-height: 38px; padding: 5px 8px;
  display: grid; grid-template-columns: 28px 28px auto minmax(46px, 1fr) auto;
  align-items: center; gap: 5px;
  border-bottom: 1px solid rgba(207,214,239,.09);
}
.ambi-icono { width: 28px; height: 27px; font-size: calc(10px * var(--zt)); }
.ambi-loop {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--tenue); font-size: calc(8px * var(--zt)); white-space: nowrap;
}
.ambi-loop input { accent-color: var(--frio); }
#ambi-estado, #ambi-ruta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tenue); font-size: calc(8px * var(--zt));
}
#ambi-estado.error { color: var(--alerta); }
#ambi-ruta { text-align: right; }
#ambi-ruta.conectada { color: var(--frio); }
.ambi-meta {
  flex: 0 0 25px; padding: 5px 9px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(207,214,239,.09);
  color: var(--tenue); font-size: calc(8px * var(--zt)); font-variant-numeric: tabular-nums;
}
.ambi-meta span:first-child { color: var(--texto); }
.ambi-orientacion {
  flex: 1 1 auto; min-height: 92px; padding: 6px 9px 8px;
  display: grid; grid-template-rows: repeat(3, minmax(27px, 1fr)); gap: 2px;
}
.ambi-orientacion label {
  min-width: 0; display: grid; grid-template-columns: 48px minmax(58px, 1fr) 42px;
  align-items: center; gap: 7px; color: var(--tenue); font-size: calc(9px * var(--zt));
}
.ambi-orientacion output { color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }

@container (max-width: 300px) {
  .audio-superior { grid-template-columns: 30px minmax(64px, 1fr) 30px 30px; }
  .audio-estado { display: none; }
  .audio-out { width: 30px; font-size: calc(7px * var(--zt)); }
  .audio-canal { grid-template-columns: 45px minmax(48px, 1fr) 39px 25px; gap: 5px; }
  .ambi-fuente { grid-template-columns: minmax(0, 1fr) auto; }
  #ambi-archivo { grid-column: 2; }
  .ambi-transporte { grid-template-columns: 28px 28px auto 1fr; }
  #ambi-ruta { display: none; }
}

/* ── captura de pestaña / ventana / pantalla ───────────────────────────── */

.captura-cuerpo { padding: 0 !important; overflow: hidden !important; }
.captura-vista {
  position: relative; flex: 1; min-height: 100px; overflow: hidden;
  display: grid; place-items: center; background: #050506;
}
#captura-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: contain; opacity: 0;
}
.capturando #captura-video { opacity: 1; }
.captura-vacia {
  color: #4b4b55; font-size: calc(11px * var(--zt)); letter-spacing: .12em;
}
.captura-meta {
  position: absolute; left: 7px; right: 7px; bottom: 7px;
  display: flex; justify-content: space-between; gap: 8px;
  color: var(--texto); font-size: calc(9px * var(--zt));
  opacity: 0; pointer-events: none;
}
.captura-meta span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  background: rgba(5,5,6,.82);
}
.capturando .captura-meta { opacity: 1; }
.captura-controles {
  flex: 0 0 auto; min-height: 36px; padding: 6px 8px;
  display: grid; grid-template-columns: max-content 30px minmax(54px, 1fr) max-content;
  align-items: center; gap: 6px; border-top: 1px solid var(--borde);
}
.captura-elegir { display: inline-flex; align-items: center; gap: 6px; }
.captura-detener { width: 30px; height: 27px; padding: 0; }
#captura-estado, #captura-ruta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tenue); font-size: calc(9px * var(--zt));
}
#captura-estado.error { color: var(--alerta); }
#captura-ruta { text-align: right; }
#captura-ruta.conectada { color: var(--frio); }

@container (max-width: 300px) {
  .captura-controles { grid-template-columns: max-content 30px 1fr; }
  #captura-ruta { display: none; }
}

/* ── cue list ────────────────────────────────────────────────────────────── */

.cue-cuerpo {
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(7,8,11,.36);
}
.cue-mando {
  flex: 0 0 auto;
  /* la columna del botón sigue al zoom, como el botón */
  display: grid; grid-template-columns: calc(112px * var(--zt)) minmax(0, 1fr); gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--borde);
}
.cue-go {
  /* La caja crece con el zoom de texto igual que su rótulo. Con el tamaño fijo
     en px y el cuerpo escalando, a partir de cierto zoom `_.~` no entraba: la
     virgulilla se salía por el costado. Creciendo juntos, la proporción se
     mantiene y entra siempre. */
  width: calc(112px * var(--zt)); height: calc(122px * var(--zt));
  display: grid; place-items: center;
  border: 1px solid rgba(193,172,240,.48); border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), transparent 42%),
    rgba(193,172,240,.2);
  color: #f3f0fa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.28);
  /* `_.~` no es una palabra: son tres glifos a alturas muy distintas —el guión
     bajo cae hasta el trazo inferior y la virgulilla vive arriba—, así que con
     line-height 1 la tinta se sale de la caja. Con aire vertical y un cuerpo un
     poco menor entran los tres, y STOP también. */
  font: 500 calc(30px * var(--zt))/1.35 var(--mono);
  letter-spacing: .04em;
  padding: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.cue-go:hover:not(:disabled) {
  background-color: rgba(193,172,240,.3); border-color: var(--lila); transform: translateY(-1px);
}
.cue-go:active:not(:disabled) { transform: translateY(0); background-color: rgba(131,216,199,.2); }
.cue-go:focus-visible { outline: 1px solid var(--calido); outline-offset: 2px; }
.cue-go:disabled { opacity: .34; cursor: not-allowed; }
/* el mismo botón para la cadena: en vivo no se busca un segundo botón */
.cue-go.parar { color: var(--alerta); border-color: var(--alerta); background-color: rgba(217,154,122,.12); }
.cue-go.parar:hover:not(:disabled) { background-color: rgba(217,154,122,.2); border-color: var(--alerta); }
.cue-consola {
  min-width: 0;
  display: grid; grid-template-rows: 34px minmax(72px, 1fr) 20px; gap: 6px;
}
.cue-standby {
  min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 0 10px;
  border: 1px solid var(--borde); border-radius: 3px;
  background: rgba(255,255,255,.045);
  font-size: calc(10px * var(--zt)); color: var(--tenue);
}
.cue-standby output {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto); font-size: calc(13px * var(--zt));
}
.cue-texto {
  display: block; width: 100%; min-height: 0; resize: none;
  padding: 9px 11px;
  border: 1px solid var(--borde); border-radius: 3px; outline: 0;
  background: #050608; color: var(--texto);
  box-shadow: inset 0 2px 14px rgba(0,0,0,.46);
  font: calc(13px * var(--zt))/1.5 var(--mono);
}
.cue-texto:focus { border-color: rgba(131,216,199,.58); }
.cue-texto:disabled { color: var(--tenue); opacity: .58; }
.cue-transporte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--tenue); font-size: calc(10px * var(--zt));
  font-variant-numeric: tabular-nums;
}
.cue-silencio {
  background: #16161c; color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 3px;
  padding: 2px 8px; font: inherit; font-size: calc(10px * var(--zt)); cursor: pointer;
}
.cue-silencio:hover { color: var(--alerta); border-color: var(--alerta); }
.cue-transporte #cue-estado { margin-left: auto; }
.cue-transporte.activo #cue-estado, .cue-transporte.activo #cue-reloj { color: var(--frio); }
.cue-transporte.error #cue-estado { color: var(--alerta); }

.cue-tabla {
  flex: 1; min-height: 0; overflow: auto;
  background: rgba(5,6,8,.48);
}
.cue-cabecera, .cue-fila {
  min-width: 786px;
  display: grid;
  grid-template-columns: 22px 62px minmax(190px, 1fr) 82px 78px 78px 78px 96px;
  align-items: center;
}
.cue-cabecera {
  position: sticky; top: 0; z-index: 2;
  min-height: 30px;
  background: rgba(24,25,31,.96);
  border-bottom: 1px solid var(--borde);
  color: var(--tenue); font-size: calc(9px * var(--zt));
}
.cue-cabecera > span { padding: 0 8px; white-space: nowrap; }
.cue-fila {
  min-height: 36px;
  border-bottom: 1px solid rgba(207,214,239,.07);
  color: var(--texto);
  cursor: default;
}
/* qué pasa al terminar: HALT, FOLLOW o CONTINUE */
.cue-sigue {
  width: calc(100% - 10px); margin: 0 5px;
  background: #0d0d11; color: var(--frio);
  border: 1px solid var(--borde); border-radius: 3px;
  padding: 3px 4px; font: inherit; font-size: calc(10px * var(--zt));
  cursor: pointer;
}
.cue-sigue:hover:not(:disabled) { border-color: var(--calido); }
.cue-sigue:disabled { opacity: .4; cursor: not-allowed; }
/* En CONTINUE el siguiente arranca sin esperar la cola de este, así que su
   duración y su post-wait no rigen. Se apagan: mentiría dejarlos como si sí. */
.cue-fila.sin-cola .cue-cola { opacity: .28; }
.cue-fila.sin-cola .cue-sigue { color: var(--calido); }

.cue-fila:nth-child(even) { background: rgba(255,255,255,.014); }
.cue-fila:hover { background: rgba(255,255,255,.035); }
.cue-fila:focus-visible { outline: 1px solid var(--calido); outline-offset: -1px; }
.cue-fila.seleccionado {
  background: rgba(193,172,240,.085);
  box-shadow: inset 2px 0 0 var(--lila);
}
.cue-fila.ejecutando {
  background: rgba(131,216,199,.085);
  box-shadow: inset 2px 0 0 var(--frio);
}
.cue-fila.completo { color: var(--tenue); }
.cue-fila.error { box-shadow: inset 2px 0 0 var(--alerta); }
.cue-estado-fila {
  justify-self: center;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--tenue); background: transparent;
}
.cue-fila.seleccionado .cue-estado-fila { border-color: var(--lila); background: var(--lila); }
.cue-fila.ejecutando .cue-estado-fila { border-color: var(--frio); background: var(--frio); }
.cue-fila.completo .cue-estado-fila { border-color: var(--frio); }
.cue-fila.error .cue-estado-fila { border-color: var(--alerta); background: var(--alerta); }
.cue-fila input {
  width: 100%; min-width: 0; height: 35px;
  padding: 0 8px;
  border: 0; border-left: 1px solid rgba(207,214,239,.08); border-radius: 0; outline: 0;
  background: transparent; color: inherit;
  font: calc(11px * var(--zt))/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.cue-fila input:focus { background: rgba(131,216,199,.06); box-shadow: inset 0 -1px 0 var(--frio); }
.cue-fila input[type="number"] { text-align: right; appearance: textfield; }
.cue-fila input[type="number"]::-webkit-inner-spin-button { display: none; }
.cue-target {
  height: 35px; min-width: 0;
  display: flex; align-items: center;
  padding: 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 1px solid rgba(207,214,239,.08);
  color: var(--frio); font-size: calc(9px * var(--zt));
}
.cue-agregar {
  width: 100%; height: 30px;
  border: 0; border-bottom: 1px solid rgba(207,214,239,.07); outline: 0;
  background: transparent; color: var(--tenue);
  font: calc(15px * var(--zt))/1 var(--mono); cursor: pointer;
}
.cue-agregar:hover { color: var(--calido); background: rgba(255,255,255,.03); }
.cue-agregar:focus-visible { box-shadow: inset 0 0 0 1px var(--calido); }
.cue-agregar:disabled { opacity: .3; cursor: not-allowed; }

@container (max-width: 520px) {
  /* la columna y el botón también crecen con --zt: si el rótulo escala y la
     caja no, `_.~` se sale por el costado */
  .cue-mando { grid-template-columns: calc(84px * var(--zt)) minmax(0, 1fr); gap: 8px; padding: 8px; }
  .cue-go { width: calc(84px * var(--zt)); height: calc(110px * var(--zt)); font-size: calc(24px * var(--zt)); }
  .cue-consola { grid-template-rows: 30px minmax(62px, 1fr) 18px; gap: 4px; }
  .cue-standby { gap: 7px; padding: 0 7px; }
}


/* ── responsive por caja (container queries) ────────────────────────────────
   Las cajas se redimensionan, así que lo de adentro responde al ancho de
   la CAJA, no al de la ventana. Cada cuerpo es un contenedor. */

.caja > .cuerpo { container-type: inline-size; }
.cajon > .cuerpo { container-type: inline-size; }

/* muy angosto: la fila se compacta y los campos de la ficha van a una columna */
@container (max-width: 300px) {
  .parametro { grid-template-columns: minmax(48px, max-content) 1fr minmax(40px, max-content); gap: 6px; font-size: calc(10px * var(--zt)); }
  .campos { grid-template-columns: 1fr; }
  .leyenda { display: none; }
}

/* mini: cada parámetro también se apila — nombre arriba, control abajo */
@container (max-width: 220px) {
  .parametro { grid-template-columns: 1fr; gap: 2px; }
  .parametro .valor { text-align: left; }
}

/* ── expandido: una caja ocupa la pantalla, sin salir de la aplicación ────── */

.expandir {
  background: none; border: 0; padding: 0 2px;
  color: var(--tenue); font: inherit; font-size: calc(12px * var(--zt));
  cursor: pointer; line-height: 1;
}
.expandir:hover { color: var(--calido); }

.caja.expandido {
  position: fixed !important;
  left: 12px !important; top: 52px !important;
  width: auto !important; right: 12px;
  height: auto !important; bottom: 12px;
  z-index: 60;
  box-shadow: 0 0 0 100vmax rgba(5, 5, 7, .82);
}
/* expandido: la caja estira de verdad, y su contenido con él */
.caja.expandido { display: flex; flex-direction: column; }
.caja.expandido::details-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.caja.expandido > .cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.caja.expandido .escena { flex: 1; min-height: 0; }
.caja.expandido .nota-carga { flex: 0 0 auto; }

/* el tablero no se mueve mientras hay una caja expandida */
body.hay-expandido .tablero { pointer-events: none; }
body.hay-expandido .caja.expandido { pointer-events: auto; }
body.hay-expandido .riel { z-index: 61; }

/* la escena avisa cuándo tiene el teclado */
.escena.activo { outline: 1px solid var(--frio); outline-offset: -1px; }

/* ── foco: en qué caja estoy ────────────────────────────────────────────── */

.caja.con-foco {
  border-color: rgba(131,216,199,.68);
  box-shadow: 0 18px 50px rgba(0,0,0,.46), 0 0 0 1px rgba(131,216,199,.1), inset 0 1px 0 rgba(255,255,255,.18);
}
.caja.con-foco > summary { background: rgba(131,216,199,.045); }
.caja.con-foco > summary .tit { color: var(--frio); }

/* ── slots de la caja CÓDIGO ──────────────────────────────────────────────────
   Referencia: KodeLife. Cada slot es un texto independiente; la casilla decide
   si participa cuando se evalúa todo. */

.slots {
  display: flex; align-items: stretch; gap: 1px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.slot {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.035); border: 1px solid var(--borde); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  padding: 2px 4px 2px 6px; font: inherit; font-size: calc(11px * var(--zt)); color: var(--tenue);
  cursor: pointer;
}
.slot:hover { color: var(--texto); }
.slot.actual { border-color: rgba(234,217,173,.55); color: var(--calido); background: rgba(54,49,29,.38); }
.slot .casilla-slot {
  width: 12px; height: 12px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 2px;
  font-size: calc(9px * var(--zt)); line-height: 1; color: var(--frio); background: rgba(4,5,8,.82);
}
.slot.apagado { opacity: .5; }
.slot.apagado .casilla-slot { color: transparent; }
.slot .cerrar-slot { color: var(--tenue); padding: 0 2px; }
.slot .cerrar-slot:hover { color: var(--alerta); }
.slot-mas {
  background: none; border: 1px dashed var(--borde); border-radius: 3px;
  color: var(--tenue); font: inherit; font-size: calc(12px * var(--zt)); cursor: pointer;
  padding: 2px 9px;
}
.slot-mas:hover { border-color: var(--calido); color: var(--calido); }

/* ── puertos por parámetro ────────────────────────────────────────────────────
   Cada perilla con su jack, como en un modular: un cable puede ir de un
   parámetro a otro y no solo de una caja a otra. */

.parametro.con-puertos { position: relative; padding: 0 11px; }
.parametro.con-puertos > .puerto { width: 9px; height: 9px; border-width: 1.5px; }
.parametro.con-puertos > .puerto.entrada { left: -3px; }
.parametro.con-puertos > .puerto.salida  { right: -3px; }

.cables path.de-parametro { stroke: var(--calido); stroke-width: 1.5; }

/* salidas vivas del audio */
.salidas-vivas {
  flex: 0 0 auto; margin-top: 0; padding: 5px 9px 7px;
  display: grid; grid-template-rows: repeat(3, 22px); gap: 2px;
  border-top: 1px solid var(--borde); background: rgba(4,5,8,.2);
}
.salidas-vivas .audio-salida {
  position: relative; min-width: 0; padding: 0 11px 0 0;
  display: grid; grid-template-columns: 52px minmax(42px, 1fr) 38px;
  align-items: center; gap: 7px;
  color: var(--tenue); font-size: calc(8px * var(--zt));
}
.salidas-vivas .audio-salida .valor {
  color: var(--texto); text-align: right; font-variant-numeric: tabular-nums;
}
.salidas-vivas .audio-salida > .puerto {
  width: 9px; height: 9px; right: -3px; border-width: 1.5px;
}
.barra-nivel {
  height: 5px; border: 1px solid var(--borde); border-radius: 2px;
  background:
    linear-gradient(to right, var(--calido), var(--frio)) 0 0 / var(--nivel, 0%) 100% no-repeat,
    rgba(255,255,255,.035);
}

/* El vidrio mejora la jerarquía, pero nunca es requisito para leer ni operar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra { background: #0d0e13; }
  .icono, .zoom-texto button { background: #15161d; }
  .lienzo-t > .caja, .caja.expandido { background: #121319; }
  .cajon { background: #0d0e13; }
  .caja-catalogo { background: #101117; }
}

@media (prefers-reduced-transparency: reduce) {
  .barra, .icono, .zoom-texto button, .lienzo-t > .caja, .caja.expandido, .cajon, .caja-catalogo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .barra, .cajon { background: #0d0e13; }
  .lienzo-t > .caja, .caja.expandido { background: #121319; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ── ESCENAS / CUES ────────────────────────────────────────────────────────
   Una escena y un cue son la misma captura medida distinto: la escena abarca
   todos los ámbitos, el cue solo los marcados. La celda lo dice sola —borde
   lleno contra borde punteado— en vez de pedir dos listas separadas. */

.escena-cuerpo { gap: 8px; }
.escena-mando { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.escena-mando input {
  flex: 1; min-width: 90px;
  font-size: calc(11px * var(--zt));
}
#escena-modo.edit { color: var(--calido); border-color: var(--calido); }
.escena-estado {
  margin-left: auto; color: var(--tenue);
  font-size: calc(10px * var(--zt)); white-space: nowrap;
}

.escena-marcas { display: flex; gap: 3px; flex-wrap: wrap; }
.escena-marca {
  background: #0d0d11; color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 3px;
  padding: 2px 7px; font: inherit; font-size: calc(9px * var(--zt));
  letter-spacing: .06em; cursor: pointer;
}
.escena-marca:hover { color: var(--texto); border-color: #3a3a46; }
.escena-marca.puesta { color: var(--frio); border-color: var(--frio); background: #0e1614; }
.escena-marca.todo { margin-left: auto; color: var(--lila); }

.escena-grilla {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px; align-content: start;
}
.escena-celda {
  position: relative; min-height: calc(46px * var(--zt));
  display: grid; grid-template-rows: auto 1fr auto; gap: 2px;
  padding: 4px 6px 5px; text-align: left;
  background: #101014; color: var(--tenue);
  border: 1px dashed var(--borde); border-radius: 3px;
  font: inherit; cursor: pointer;
}
.escena-celda:hover { border-color: var(--calido); background: #17171b; }
.escena-celda:focus-visible { outline: 1px solid var(--calido); outline-offset: 1px; }
.escena-celda.llena { border-style: solid; color: var(--texto); background: #14141a; }
/* la escena completa se marca en lila, que en esta paleta es lo que nombra */
.escena-celda.escena { border-color: #4a3f63; }
.escena-celda.escena .escena-rotulo { color: var(--lila); }
.escena-celda.elegida { border-color: var(--calido); background: #1a1a12; }

.escena-num { font-size: calc(9px * var(--zt)); color: var(--tenue); }
.escena-rotulo {
  font-size: calc(10px * var(--zt)); color: var(--frio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escena-rotulo.vacia { color: #33333d; }
.escena-tira { display: flex; gap: 2px; }
.escena-tira i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #26262e; display: block;
}
.escena-tira i.puesta { background: var(--frio); }
.escena-celda.escena .escena-tira i.puesta { background: var(--lila); }


/* ── el banco, leído dentro de ARCHIVO ─────────────────────────────────────── */

.banco-resumen { margin: 0 0 14px; }
.banco-palabras { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* cálido = depositado desde este navegador y todavía fuera del índice */
.banco-palabras .chip.en-espera { border-color: var(--calido); color: var(--calido); }
.banco-palabras .chip.en-espera::after { content: ' ·'; opacity: .7; }

.llaves-nota {
  display: block; margin-top: 6px;
  font-size: calc(10px * var(--zt)); color: var(--frio);
}
.llaves-nota.mal { color: var(--alerta); }


/* ── el cajón, nivelado ──────────────────────────────────────────────────────
   ARCHIVO mezclaba 10, 11, 12, 13 y 14 px: cinco tamaños que no marcaban
   ninguna jerarquía, solo desprolijidad. Adentro de un cajón hay DOS cosas:
   lo que se lee y se escribe, todo al mismo cuerpo, y los titulillos, que son
   otra clase de cosa —no otro tamaño de la misma— y por eso van en versalitas
   con espaciado en vez de en un cuerpo distinto.

   Van en px pelados a propósito: los cajones ya están fuera del zoom de texto
   (`.barra, .riel, .cajon { --zt: 1 }`), que es una decisión tomada aparte. */

.cajon .cuerpo,
.cajon .cuerpo p,
.cajon .cuerpo label,
.cajon .cuerpo .mini,
.cajon .cuerpo .llaves,
.cajon .cuerpo .llaves p,
.cajon .cuerpo .leyenda,
.cajon .cuerpo .meta,
.cajon .cuerpo .indice,
.cajon .cuerpo .ficha,
.cajon .cuerpo .progreso,
.cajon .cuerpo .falta,
.cajon .cuerpo .resultado,
.cajon .cuerpo .soltar,
.cajon .cuerpo .soltar p,
.cajon .cuerpo .pieza .info,
.cajon .cuerpo input,
.cajon .cuerpo textarea,
.cajon .cuerpo select,
.cajon .cuerpo .btn,
.cajon .cuerpo .chip,
.cajon .cuerpo .chip.chico,
.cajon .cuerpo .invocacion { font-size: 12px; }

/* lo único que se sale, y no por tamaño: es un rótulo de sección */
.cajon .cuerpo .titulillo { font-size: 10px; }

/* la etiqueta del campo y su campo, al mismo cuerpo: antes iban 11 y 12 y se
   veían como dos cosas distintas cuando son la misma */
.cajon .campos label { color: var(--tenue); }
.cajon .campos label input { color: var(--texto); }