/* ==========================================================================
   CHASQUI — escenario.css
   Dueño: módulo «escenario» (§11). El stage plot, la lista de canales, los
   monitores y los enlaces para el sonidista (vistas/escenario.js).
   --------------------------------------------------------------------------
   1  Tokens propios (solo alias de los de base.css y app.css)
   2  Stage plot: marco, lienzo SVG, elementos, estados
   3  Controles: elemento elegido y paleta
   4  Tablas de canales y monitores
   5  Estado del guardado, notas, enlaces y envío al sonidista
   6  Impresión

   Reutiliza lo compartido: .seccion-app, .tarjeta, .lista, .nota, .campo,
   .boton*, .boton-icono y .visualmente-oculto. Ningún color nuevo: el
   escenario se dibuja con la misma tinta y el mismo papel que la hoja del día.
   ========================================================================== */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --escenario-piso:var(--papel-2);          /* el escenario, visto desde arriba */
  --escenario-trazo:var(--tx);
  --escenario-figura:var(--sup-2);
  --escenario-plataforma:var(--sup-3);
  --escenario-elegido:var(--sodio);
  --escenario-lienzo-min:520px;             /* bajo esto el texto del plano ya no se lee */
}

/* ── 2 · STAGE PLOT ─────────────────────────────────────────────────────── */
.stage-plot{display:grid;gap:1.1rem;min-width:0}
@media (min-width:1080px){
  .stage-plot--editable{grid-template-columns:minmax(0,1fr) 15.5rem;align-items:start}
}
.stage-plot__principal{display:flex;flex-direction:column;gap:.6rem;min-width:0}

/* En el teléfono el plano no se achica hasta volverse ilegible: se desliza
   de lado dentro de su marco (la página nunca se desplaza en horizontal). */
.stage-plot__marco{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border:1px solid var(--brd);
  border-radius:var(--radio-sm);
  background:
    repeating-linear-gradient(115deg,var(--fibra) 0 2px,transparent 2px 9px),
    var(--hondo);
}
.stage-plot__lienzo{
  display:block;
  width:100%;
  min-width:var(--escenario-lienzo-min);
  height:auto;
  -webkit-user-select:none;
  user-select:none;
}

.stage-plot__escenario{fill:var(--escenario-piso);stroke:var(--escenario-trazo);stroke-width:3}
.stage-plot__orientacion{
  font-family:var(--f-mono);
  font-size:20px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-anchor:middle;
  fill:var(--tx-3);
  pointer-events:none;
}

.stage-plot__forma{
  fill:var(--escenario-figura);
  stroke:var(--escenario-trazo);
  stroke-width:3;
  transition:stroke var(--t-rapido) var(--ease);
}
.stage-plot__elemento--tarima .stage-plot__forma{
  fill:var(--escenario-plataforma);
  stroke-dasharray:10 6;
  stroke-width:2;
}
.stage-plot__sigla{
  font-family:var(--f-mono);
  font-size:17px;
  font-weight:700;
  text-anchor:middle;
  fill:var(--tx);
  pointer-events:none;
}
/* El letrero lleva un halo del color del piso: se lee aunque cruce una línea. */
.stage-plot__etiqueta{
  font-family:var(--f-display);
  font-size:24px;
  font-weight:600;
  text-anchor:middle;
  fill:var(--tx);
  paint-order:stroke;
  stroke:var(--escenario-piso);
  stroke-width:6px;
  stroke-linejoin:round;
  pointer-events:none;
}
.stage-plot__etiqueta--arriba{font-size:20px;fill:var(--tx-2)}

/* Editable: cada elemento se toma con el dedo o el mouse, y con Tab. */
.stage-plot__zona{fill:transparent;stroke:none}
.stage-plot--editable .stage-plot__elemento{cursor:grab;touch-action:none}
.stage-plot--editable .stage-plot__elemento.is-arrastrando{cursor:grabbing}
.stage-plot__elemento:focus{outline:none}
.stage-plot__elemento:focus-visible .stage-plot__zona{
  stroke:var(--escenario-elegido);
  stroke-width:3;
  stroke-dasharray:6 5;
}
.stage-plot__elemento.is-seleccionado .stage-plot__forma{stroke:var(--escenario-elegido);stroke-width:5}
.stage-plot__elemento.is-seleccionado .stage-plot__sigla{fill:var(--sodio-texto)}
.stage-plot__elemento.is-arrastrando .stage-plot__forma{opacity:.82}

.stage-plot__ayuda{font-size:.84rem;line-height:1.5;color:var(--tx-3)}

/* ── 3 · CONTROLES ──────────────────────────────────────────────────────── */
.stage-plot__controles{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.stage-plot__subtitulo{
  margin-bottom:.1rem;
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.stage-plot__pista{
  padding:.75rem .9rem;
  border:1px dashed var(--brd-2);
  border-radius:var(--radio-sm);
  font-size:.88rem;
  line-height:1.5;
  color:var(--tx-2);
}
.stage-plot__elegido{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:.9rem;
  border:1px solid var(--sodio-borde);
  border-radius:var(--radio-sm);
  background:linear-gradient(160deg,var(--sodio-tinte),var(--sup-2) 70%);
}

.paleta{display:flex;flex-direction:column;gap:.5rem}
.paleta__botones{display:flex;flex-wrap:wrap;gap:.4rem}
.paleta__boton{min-height:var(--tactil)}
@media (min-width:1080px){
  .paleta__botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .paleta__boton{justify-content:flex-start;padding-inline:.7rem}
}

/* ── 4 · TABLAS ─────────────────────────────────────────────────────────── */
/*  Canales y monitores. Con muchos campos por fila, en el teléfono la tabla
    se desliza de lado dentro de su caja, igual que el plano.               */
.escenario-tabla{
  /* relative: las etiquetas .visualmente-oculto (absolutas) de cada celda
     quedan dentro del desplazamiento; si no, se escapan y la página entera
     se corre de lado en el teléfono. */
  position:relative;
  overflow-x:auto;
  border:1px solid var(--brd);
  border-radius:var(--radio);
  background:var(--sup-2);
}
.escenario-tabla table{width:100%;min-width:560px;border-collapse:collapse}
.escenario-tabla th{
  padding:.6rem .6rem .5rem;
  border-bottom:1px solid var(--brd-2);
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
  color:var(--tx-3);
  white-space:nowrap;
}
.escenario-tabla td{
  padding:.3rem .4rem;
  border-top:1px solid var(--brd);
  vertical-align:middle;
  overflow-wrap:anywhere;
}
.escenario-tabla tbody tr:first-child td{border-top:0}
.escenario-tabla td:not(:has(input)){padding:.65rem .6rem}
.escenario-tabla__vacia{color:var(--tx-3);text-align:center}
.escenario-tabla__numero{font-family:var(--f-mono);font-weight:700;white-space:nowrap}
.escenario-tabla__celda--numero{width:5.2rem}
.escenario-tabla__quitar{width:3.2rem;text-align:right}

.escenario-tabla__control{
  width:100%;
  min-height:var(--tactil);
  padding:.45rem .55rem;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  font:inherit;
  color:var(--tx);
  transition:border-color var(--t-rapido) var(--ease),background-color var(--t-rapido) var(--ease);
}
.escenario-tabla__control::placeholder{color:var(--tx-3);opacity:.7}
.escenario-tabla__control:hover{border-color:var(--brd-2)}
.escenario-tabla__control:focus{
  outline:none;
  border-color:var(--sodio-texto);
  background:var(--sup-1);
  box-shadow:0 0 0 3px var(--sodio-tinte);
}
.escenario-tabla__control--numero{font-family:var(--f-mono);font-weight:700}
.escenario-tabla__control.is-invalido{
  border-color:var(--alto);
  background:var(--alto-tinte);
  box-shadow:0 0 0 3px var(--alto-tinte);
}

/* ── 5 · ESTADO, NOTAS, ENLACES Y ENVÍO ─────────────────────────────────── */
.escenario-estado{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.84rem;
  color:var(--tx-3);
}
.escenario-estado:empty{display:none}
.escenario-estado::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brd-3);
}
.escenario-estado.is-guardado::before{background:var(--ok)}
.escenario-estado.is-pendiente::before,
.escenario-estado.is-guardando::before{background:var(--alerta)}
.escenario-estado.is-guardando::before{animation:latir 2.4s var(--ease) infinite}
.escenario-estado.is-error{color:var(--alto)}
.escenario-estado.is-error::before{background:var(--alto)}

.escenario-conteo{
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--tx-3);
}

.escenario-notas{max-width:70ch;color:var(--tx-2);white-space:pre-line}

.escenario-enlaces{display:flex;flex-direction:column;gap:.6rem}
.escenario-enlaces .lista__codigo{min-width:5.2rem}

.envio-sonidista{display:flex;flex-direction:column;gap:1rem}
.envio-sonidista__url{font-family:var(--f-mono);font-size:.86rem}
.envio-sonidista__acciones{display:flex;flex-direction:column;gap:.5rem}

/* ── 6 · IMPRESIÓN ──────────────────────────────────────────────────────── */
/*  Impreso sale lo que el sonidista necesita: el plano y las tablas, sin
    controles. Los campos de las tablas se ven como texto.                  */
@media print{
  .stage-plot--editable{display:block}
  .stage-plot__marco{overflow:visible;border:0;background:none}
  .stage-plot__lienzo{min-width:0}
  .escenario-tabla{overflow:visible;border:0}
  .escenario-tabla table{min-width:0}
  .escenario-tabla__quitar{display:none}
  .escenario-tabla__control{min-height:0;padding:0;border:0}
  .escenario-tabla tr{break-inside:avoid}
}