/* Campo Vivo · consola de rituales (propuesta-linea-consola.html): la mesa del equipo para crear rituales y protocolos propios.
   Sobre la base de linea.css y con el mismo lenguaje: negro puro, línea en arena, Bricolage para todo y la voz de la tradición (.voz) solo
   para los nombres de los rituales. El morado marca únicamente lo que está vivo: el cabezal de la línea de tiempo, la etapa que suena, el
   botón mientras suena y el foco del teclado; lo elegido va con un borde de arena más fuerte. La luz dorada sale solo de los tokens de
   linea.css (--oro-*) y nunca marca un estado. Es una herramienta, no una pantalla de la app: aquí sí se ven números (Hz, bpm, mm:ss). */

:root {
  --gutter-lt: 100px;       /* la columna de rótulos de la línea de tiempo (Voz, Tonos...) */
  --alto-carril: 40px;      /* un carril de la línea de tiempo */
  --alto-transporte: 0px;   /* en celular, lo que mide el transporte fijo abajo (consola.js lo mide) */
}

body.consola {
  min-height: 100dvh;
  font-variant-numeric: tabular-nums;   /* las cifras (Hz, bpm, mm:ss) ocupan siempre el mismo ancho */
}
.consola .solo-movil { display: none !important; }
@media (min-width: 768px) {
  .menu__item[data-cuenta-menu] { display: none; }
}

/* ── La puerta: lo único que se ve mientras no se comprueba que la cuenta es del equipo ─────────────────────────────────────── */
.puerta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--oro-ambiente) 50% 0 / 100% 420px no-repeat, var(--negro); overflow-y: auto; }
.puerta__caja { display: grid; justify-items: start; gap: 16px; width: min(480px, 100%); padding: 32px; border-radius: 20px; background: var(--degradado-tarjeta); box-shadow: var(--oro-filo-fuerte), 0 0 0 1px var(--linea-tenue); }
.puerta__marca { margin-bottom: 8px; }
.puerta__texto { max-width: 42ch; color: var(--blanco); }
.puerta__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.puerta__acciones .boton--grande { min-height: 52px; font-size: var(--t-2); }
.puerta__nota { color: var(--blanco); }

/* ── La barra de arriba ──────────────────────────────────────────────────────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 12px 24px 12px;
  background: linear-gradient(180deg, var(--negro) 0%, var(--negro) 82%, rgba(0, 0, 0, 0.85) 100%);
  box-shadow: inset 0 -1px 0 var(--linea-tenue);
}
.barra__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.barra__etiqueta { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); padding-left: 16px; border-left: 1px solid var(--linea-tenue); }
.barra__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.cuenta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; border-left: 1px solid var(--linea-tenue); }
.cuenta__correo { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.barra__ritual { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-width: 0; }
/* Deshacer y rehacer, a la derecha de la fila del nombre del ritual (la primera fila de la barra ya va llena). */
.barra__historial { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; align-self: center; }
.barra__historial[hidden] { display: none; }
.barra__nombre {
  min-width: 0;
  max-width: 100%;
  font-size: var(--t-ritual);
  line-height: var(--l-ritual);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dato, .estado {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  color: var(--niebla);
  font-size: var(--t-5);
  line-height: 1;
  white-space: nowrap;
}
.estado[data-estado="guardado"] { color: var(--blanco); border-color: rgba(238, 230, 216, 0.4); }
.estado--errores { color: var(--blanco); border-color: var(--blanco); }

/* El botón cuadrado de un solo ícono (cerrar, más, subir, bajar...). */
.boton--icono { width: 44px; padding: 0; }
.boton--chico { min-height: 36px; padding: 0 12px; font-size: var(--t-4); }
.boton--chico.boton--icono { width: 36px; padding: 0; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton[disabled]:hover, .boton[aria-disabled="true"]:hover { background: var(--pizarra); }
.boton--principal[disabled]:hover, .boton--principal[aria-disabled="true"]:hover { background: var(--blanco); }
.boton[disabled]:active { transform: none; }

/* El menú de "Más acciones". */
.menu-caja { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radio-boton);
  background: var(--grafito);
  box-shadow: var(--oro-filo-fuerte), 0 0 0 1px var(--linea-tenue), 0 18px 48px rgba(0, 0, 0, 0.6);
}
.menu__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--blanco);
  font-size: var(--t-3);
  text-align: left;
  white-space: nowrap;
}
.menu__item:hover { background: var(--grafito-claro); }
.menu__item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Avisos de una línea con sus botones (recuperamos el borrador, cambiaste el ritual mientras sonaba). */
.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-boton);
  background: var(--grafito);
  box-shadow: var(--oro-filo);
}
.aviso__texto { color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); }
.aviso__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.consola-app > .aviso { margin: 12px 24px 0; }
.aviso .boton { min-height: 36px; font-size: var(--t-4); }

/* ── El espacio de trabajo ───────────────────────────────────────────────────────────────────────────────────────── */
.espacio { display: grid; gap: 16px; width: 100%; max-width: 1760px; margin-inline: auto; padding: 16px 24px 64px; }
.vacio { display: grid; gap: 16px; justify-items: start; max-width: 720px; margin: 8vh auto 0; padding: 32px; }
.vacio .texto-2 { max-width: 58ch; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.trabajo { display: grid; gap: 16px; min-width: 0; }
.trabajo[hidden], .vacio[hidden] { display: none; }
.vistas { display: none; }   /* el selector de celular: Mesa, Etapas, Ficha, Revisión */
.cuerpo { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; min-width: 0; }
.mesa, .etapas, .inspector { min-width: 0; overflow: visible; padding: 20px; }
.panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.panel__titulo { font-size: var(--t-2); line-height: var(--l-2); font-weight: 500; }

/* ── Piezas comunes: opciones de a una (chips), campos, grupos ───────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pizarra-claro);
  border-radius: var(--radio-pildora);
  background: transparent;
  box-shadow: var(--oro-filo);
  color: var(--niebla);
  font-size: var(--t-4);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--mov-toque) var(--curva);
}
.chip:hover { background: rgba(238, 230, 216, 0.06); border-color: var(--gris); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline-offset: 2px; }
/* Lo elegido: borde de arena lleno y un puntito (no depende del color). El morado queda para lo que suena. */
.chip[aria-pressed="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.1); color: var(--blanco); }
.chip[aria-pressed="true"]::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blanco); }
.chip[disabled], .chip[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.chips--segmento { margin-bottom: 14px; }
.chip--hz { min-width: 58px; padding: 0 10px; }
/* Una frecuencia propia (fuera de las 19 de siempre): el mismo botón con borde punteado; el morado sigue siendo solo de lo que suena. */
.chip--libre { border-style: dashed; }
.hz-propias { display: grid; gap: 6px; margin-top: 4px; }
.hz-nueva-caja { margin-top: 6px; }
.hz-nueva { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.hz-nueva .entrada { flex: 1 1 140px; min-width: 0; max-width: 220px; }
.hz-figura { flex: none; width: 64px; height: 64px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); }
.hz-lectura-caja { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.hz-lectura { min-height: calc(var(--l-5) * 2); }
.hz-lectura[data-pendiente="true"] { opacity: 0.55; }
.chip--chico { min-height: 30px; padding: 0 10px; font-size: var(--t-5); }

.control { display: grid; gap: 8px; align-content: start; min-width: 0; }
.control__titulo { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
/* El día del programa que se prueba: un día antes, el número, "de 21" y un día después; debajo, los extremos. */
.control__dia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.control__dia .entrada--numero { width: 76px; text-align: center; }
.control__de { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo__etiqueta { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.campo__etiqueta--suelta { display: block; margin-top: 10px; }
.campo__ayuda, .grupo__ayuda { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); text-wrap: pretty; }
.campo__ayuda[data-aviso="true"] { color: var(--blanco); }
.entrada, .area, .seleccion {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--pizarra-claro);
  border-radius: var(--radio-boton);
  background: var(--negro);
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  font: inherit;
  font-size: var(--t-4);
  line-height: 1.4;
  transition: border-color var(--rapido);
}
.area { min-height: 76px; resize: vertical; }
.entrada::placeholder, .area::placeholder { color: var(--gris); }
.entrada:hover, .area:hover, .seleccion:hover { border-color: var(--gris); }
.entrada:focus-visible, .area:focus-visible, .seleccion:focus-visible { border-color: var(--blanco); outline-offset: 2px; }
.entrada[aria-invalid="true"] { border-color: var(--blanco); }
.entrada--numero { width: 92px; }
.seleccion { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--niebla) 50%), linear-gradient(135deg, var(--niebla) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.seleccion option { background: var(--grafito); color: var(--blanco); }

.grupo { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo + .grupo, .campo + .grupo, .grupo + .campo { margin-top: 20px; }
.grupo__titulo { padding: 0; color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); font-weight: 500; }
.fila-campos { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.fila-campos .campo { flex: 0 0 auto; }
.casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); cursor: pointer; }
.casilla input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blanco); cursor: pointer; }
.casilla input:focus-visible { outline-offset: 2px; }
.casilla span { min-width: 0; }
.casilla small { display: block; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }

.rango { -webkit-appearance: none; appearance: none; flex: 1 1 140px; min-width: 120px; height: 36px; background: transparent; cursor: pointer; }
.rango::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blanco) var(--lleno, 50%), rgba(238, 230, 216, 0.25) var(--lleno, 50%)); }
.rango::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(238, 230, 216, 0.25); }
.rango::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--blanco); }
.rango::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--blanco); }
.rango::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--blanco); }
.rango:focus-visible { outline-offset: 0; }
.rango:disabled { opacity: 0.4; cursor: not-allowed; }
.con-rango { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.conteo {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radio-pildora);
  background: var(--blanco);
  color: var(--negro);
  font-size: var(--t-5);
  line-height: 1;
}

/* ═════════ La mesa: controles del plan, línea de tiempo y transporte ═════════ */
.mesa { display: grid; gap: 16px; }
.mesa__cuerpo { display: grid; gap: 16px; min-width: 0; }
.mesa__controles { display: flex; flex-wrap: wrap; gap: 14px 40px; }

/* ── La línea de tiempo ──────────────────────────────────────────────────────────────────────────────────────────────
   Una fila por carril (etapas, eje, voz, tonos, onda, latido, respiración y golpes), todas con la misma escala: lo que en la fila de
   arriba está a la izquierda de la de abajo está antes en el ritual. Cada marca se coloca con --x (dónde empieza, de 0 a 1) y --w (cuánto
   dura, de 0 a 1) que pone consola.js. El cabezal (--p) es lo único morado: solo está mientras suena. */
.lt {
  position: relative;
  display: grid;
  border: 1px solid var(--linea-tenue);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  user-select: none;
}
.lt[data-obsoleto="true"] .lt__fila { opacity: 0.35; }
.lt__fila { position: relative; display: grid; grid-template-columns: var(--gutter-lt) minmax(0, 1fr); border-top: 1px solid rgba(238, 230, 216, 0.07); }
.lt__fila:first-child { border-top: 0; }
.lt__rotulo { display: flex; align-items: center; padding: 0 8px 0 14px; color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }
.lt__corto { display: none; }
.lt__pista { position: relative; height: var(--alto-carril); min-width: 0; }
.lt__fila--etapas .lt__pista { height: 44px; }
.lt__fila--eje .lt__pista { height: 28px; }
.lt__fila--tonos .lt__pista { height: calc(var(--alto-carril) * 1.7); }
.lt__vacio { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }

/* La capa de arriba: la rejilla de tiempo, el punto de inicio y el cabezal, sobre todos los carriles y sin recibir toques. */
.lt__capa { position: absolute; inset: 0 0 0 var(--gutter-lt); pointer-events: none; }
.lt__linea { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: 1px; background: rgba(238, 230, 216, 0.07); }
.lt__marca { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: 0; border-left: 1px dashed rgba(238, 230, 216, 0.55); }
.lt__cabezal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--p, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  background: var(--morado);
  box-shadow: 0 0 12px rgba(155, 124, 244, 0.55);
  transition: left 1s linear;
}
.lt__cabezal[data-pausado="true"] { background: var(--blanco); box-shadow: none; }
.lt__cabezal[hidden] { display: none; }

/* El eje: la hora de cada marca. Tocarlo es "Escuchar desde aquí". */
.lt-eje { position: absolute; inset: 0; display: block; cursor: pointer; }
.lt-eje:focus-visible { outline-offset: -3px; }
.lt-tick { position: absolute; top: 6px; left: calc(var(--x) * 100%); transform: translateX(-50%); color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); white-space: nowrap; pointer-events: none; }
.lt-tick--primera { transform: translateX(4px); }
.lt-tick--ultima { transform: translateX(calc(-100% - 4px)); }

/* Los bloques de etapa: botones que abren la etapa en el inspector. */
.lt-etapa {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * 100% - 2px);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(238, 230, 216, 0.2);
  border-radius: 8px;
  background: rgba(238, 230, 216, 0.05);
  color: var(--niebla);
  font-size: var(--t-5);
  line-height: 1;
  text-align: left;
  overflow: hidden;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.lt-etapa:hover { background: rgba(238, 230, 216, 0.1); }
.lt-etapa:focus-visible { outline-offset: -2px; }
.lt-etapa[aria-current="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.12); color: var(--blanco); }
.lt-etapa[data-vivo="true"] { box-shadow: inset 0 0 0 1.5px var(--morado); border-color: var(--morado); }
.lt-etapa__n { flex: none; color: var(--gris); }
.lt-etapa__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-etapa--angosta { justify-content: center; padding: 0; }
.lt-etapa--angosta .lt-etapa__nombre { display: none; }
.lt-etapa--angosta .lt-etapa__n { color: inherit; }

/* Voz: una barra por frase. Las que todavía no tienen su voz grabada llevan contorno punteado. */
.lt-voz { position: absolute; top: 26%; bottom: 26%; left: calc(var(--x) * 100%); width: max(3px, calc(var(--w) * 100%)); border-radius: 3px; background: rgba(238, 230, 216, 0.62); }
.lt-voz--anuncio { top: 36%; bottom: 36%; background: rgba(168, 161, 150, 0.6); }
.lt-voz--resp { top: 42%; bottom: 42%; width: max(2px, calc(var(--w) * 100%)); background: rgba(168, 161, 150, 0.45); }
.lt-voz--propia { background: transparent; border-radius: 3px; }
/* El día del programa y la frase del día: la barra lleva un contorno (sin color nuevo: el morado es solo de lo que suena). */
.lt-voz--dia { outline: 1px solid rgba(238, 230, 216, 0.9); outline-offset: 2px; }
.lt-voz--dia-frase { top: 36%; bottom: 36%; }
.lt__programa { padding: 8px 14px 0; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.lt-voz--propia::after { content: ''; position: absolute; inset: 0; border: 1.5px dashed var(--blanco); border-radius: 3px; }

/* Tonos: un escalón por cambio, a la altura de su frecuencia; la primera (la que lleva la voz) en trazo lleno y las que la acompañan en fino. */
.lt-tono { position: absolute; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); top: calc(var(--y) * 100%); height: 2px; background: var(--blanco); }
.lt-tono--extra { height: 1px; background: rgba(238, 230, 216, 0.38); }
.lt-tono__hz { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100% - 17px); padding-left: 5px; color: var(--blanco); font-size: var(--t-6); line-height: var(--l-6); white-space: nowrap; }
.lt-cuenco { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100% + 1px); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--blanco); }

/* Movimiento (solo si hay): una pastilla por cascada o rotación con su rótulo, una marca por entrada (punto) o por cambio (aro). El borde punteado
   quiere decir "no cupo todo con esta duración"; la forma de la marca distingue cascada de rotación (no el color: el morado es solo del cabezal). */
.lt-mov { position: absolute; top: 3px; left: calc(var(--x) * 100%); width: max(8px, calc(var(--w) * 100%)); height: calc(var(--l-6) + 1px); border-bottom: 1px solid rgba(238, 230, 216, 0.5); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); overflow: hidden; white-space: nowrap; }
.lt-mov[data-completo="false"] { border-bottom-style: dashed; border-bottom-color: var(--blanco); color: var(--blanco); }
.lt-mov__texto { display: block; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; }
.lt-paso { position: absolute; top: calc(var(--l-6) + 9px); left: calc(var(--x) * 100%); width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--blanco); }
.lt-paso--rotacion { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blanco); }

/* Onda: un bloque por tramo, con el nombre de su banda. */
.lt-onda { position: absolute; top: 8px; bottom: 8px; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); display: flex; align-items: center; min-width: 0; padding: 0 8px; border-top: 2px solid rgba(238, 230, 216, 0.6); border-radius: 0 0 6px 6px; background: rgba(238, 230, 216, 0.08); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); overflow: hidden; white-space: nowrap; }

/* Ambiente: dos hilos (la naturaleza arriba, el ruido abajo). Cada bloque entra y sale con la máscara de sus fundidos (--e y --s, de 0 a 1 del bloque): donde uno
   reemplaza a otro, los dos se cruzan. Monocromo arena como los demás carriles. */
.lt__fila--ambiente .lt__pista { height: calc(var(--alto-carril) * 1.6); }
.lt-amb { position: absolute; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); height: 38%; display: flex; align-items: center; min-width: 0; padding: 0 8px; overflow: hidden; border-top: 2px solid rgba(238, 230, 216, 0.6); border-radius: 0 0 6px 6px; background: rgba(238, 230, 216, 0.08); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--e, 0) * 100%), #000 calc(100% - var(--s, 0) * 100%), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--e, 0) * 100%), #000 calc(100% - var(--s, 0) * 100%), transparent 100%); }
.lt-amb__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-amb--nat { top: 8%; }
.lt-amb--rui { top: 54%; border-top-style: dashed; }

/* Pulso de volumen: un bloque por tramo, como la onda pero con el borde de arriba punteado. Estático: nada se mueve al ritmo del pulso. */
.lt-pulso { position: absolute; top: 8px; bottom: 8px; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); display: flex; align-items: center; min-width: 0; padding: 0 8px; border-top: 2px dotted rgba(238, 230, 216, 0.6); border-radius: 0 0 6px 6px; background: rgba(238, 230, 216, 0.08); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); overflow: hidden; white-space: nowrap; }

/* Latido: una polilínea de bpm; se corta donde el latido se va. */
.lt-latido { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); overflow: visible; }
.lt-latido polyline { fill: none; stroke: var(--blanco); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lt-latido .lt-latido__pareja { stroke-dasharray: 4 3; stroke: var(--niebla); }
.lt-latido__texto { position: absolute; left: calc(var(--x) * 100%); top: 2px; padding-left: 5px; color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); white-space: nowrap; }

/* Respiración: un bloque por tramo con su patrón. */
.lt-resp { position: absolute; top: 9px; bottom: 9px; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); display: flex; align-items: center; min-width: 0; padding: 0 6px; border: 1px solid rgba(238, 230, 216, 0.4); border-radius: 999px; background: rgba(238, 230, 216, 0.08); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); overflow: hidden; white-space: nowrap; }

/* Golpes: la campana (círculo), el diapasón (raya), el gong (rombo), los cuencos (aro) y los sonidos grabados (barra corta). */
.lt-golpe { position: absolute; left: calc(var(--x) * 100%); top: 50%; transform: translate(-50%, -50%); }
.lt-golpe--campana { width: 11px; height: 11px; border-radius: 50%; background: var(--blanco); }
.lt-golpe--final { background: transparent; box-shadow: inset 0 0 0 2px var(--blanco); }
.lt-golpe--diapason { width: 2px; height: 55%; background: var(--niebla); }
.lt-golpe--gong { width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg); background: var(--blanco); }
.lt-golpe--gong-fuera { background: transparent; box-shadow: inset 0 0 0 2px var(--blanco); }
.lt-golpe--cuencos { width: 13px; height: 13px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--niebla), 0 0 0 3px var(--negro), 0 0 0 4px rgba(238, 230, 216, 0.5); }
.lt-golpe--sonido { width: max(8px, calc(var(--w, 0) * 100%)); height: 38%; transform: translate(0, -50%); border-radius: 3px; background: var(--niebla); }
.lt__aviso { padding: 10px 14px; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); border-bottom: 1px solid rgba(238, 230, 216, 0.07); }

/* La misma línea de tiempo, en texto (para lectores de pantalla y para quien prefiera leerla). */
.lt-texto { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.lt-texto summary { min-height: 36px; display: flex; align-items: center; color: var(--gris); cursor: pointer; }
.lt-texto summary:hover { color: var(--blanco); }
.lt-texto__cuerpo { display: grid; gap: 12px; padding: 8px 0 4px; }
.lt-texto__etapa { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); }
.lt-texto__etapa h3 { font-size: var(--t-3); line-height: var(--l-3); font-weight: 500; color: var(--blanco); }
.lt-texto__etapa ul { display: grid; gap: 2px; }
.lt-texto__etapa li { color: var(--niebla); }

/* ── El transporte ───────────────────────────────────────────────────────────────────────────────────────────────── */
.transporte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 24px;
  padding: 14px 16px;
  border: 1px solid var(--linea-tenue);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
}
.transporte__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.transporte__lectura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; min-width: 0; }
.transporte__tiempo { font-size: var(--t-1); line-height: var(--l-1); color: var(--blanco); white-space: nowrap; }
.transporte__etapa, .transporte__hz { min-width: 0; color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); }
.transporte__rotulo { margin-right: 6px; color: var(--gris); font-size: var(--t-5); }
.transporte__subtitulo { grid-column: 1 / -1; min-height: 0; color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); text-wrap: pretty; }
.transporte__subtitulo:empty { display: none; }
.transporte__motivo { grid-column: 1 / -1; color: var(--blanco); }
.transporte__motivo:empty { display: none; }

/* ═════════ Las etapas ═════════ */
.etapas__nota:empty { display: none; }
.nota-version { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px dashed rgba(238, 230, 216, 0.3); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.nota-version .boton { justify-self: start; }
.etapas__lista { display: grid; gap: 10px; }
.etapa-tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--linea-tenue);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  transition: border-color var(--rapido);
}
.etapa-tarjeta[aria-current="true"] { border-color: var(--blanco); }
.etapa-tarjeta[data-vivo="true"] { border-color: var(--morado); box-shadow: 0 0 0 1.5px var(--morado); }
.etapa-tarjeta__abrir {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "num nombre" ". cuando" ". hz" ". cambios";
  gap: 4px 10px;
  min-height: 44px;
  padding: 8px;
  border-radius: 10px;
  text-align: left;
  transition: background-color var(--rapido);
}
.etapa-tarjeta__abrir:hover { background: rgba(238, 230, 216, 0.05); }
.etapa-tarjeta__abrir:focus-visible { outline-offset: -2px; }
.etapa-tarjeta__num { grid-area: num; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--pizarra-claro); border-radius: 50%; color: var(--niebla); font-size: var(--t-5); line-height: 1; }
.etapa-tarjeta__nombre { grid-area: nombre; align-self: center; min-width: 0; color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); font-weight: 500; overflow-wrap: anywhere; }
.etapa-tarjeta__cuando { grid-area: cuando; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.etapa-tarjeta__nota { grid-area: hz; color: var(--niebla); font-size: var(--t-5); line-height: var(--l-5); }
.etapa-tarjeta__hz { grid-area: hz; display: flex; flex-wrap: wrap; gap: 6px; }
.etapa-tarjeta__cambios { grid-area: cambios; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hz-ficha { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-pildora); color: var(--niebla); font-size: var(--t-5); line-height: 1; }
.hz-ficha--voz { border-color: var(--blanco); color: var(--blanco); }
.hz-ficha--libre { border-style: dashed; }
.cambio { display: inline-flex; align-items: center; gap: 4px; color: var(--niebla); font-size: var(--t-5); line-height: var(--l-5); }
.cambio .icono { color: var(--niebla); }
.etapa-tarjeta__acciones { display: grid; grid-template-columns: repeat(2, 36px); gap: 2px; padding-top: 4px; }
.boton--plano { background: transparent; box-shadow: none; }
.boton--plano:hover { background: var(--pizarra); }
@media (hover: hover) {
  .boton--plano:hover { box-shadow: none; }
}
.icono--arriba svg { transform: rotate(180deg); }

/* ═════════ El inspector ═════════ */
.pestanas { display: flex; flex-wrap: wrap; gap: 0 22px; margin-bottom: 18px; border-bottom: 1px solid var(--linea-tenue); }
.pestana { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--gris); font-size: var(--t-3); line-height: 1; white-space: nowrap; transition: color var(--rapido), border-color var(--rapido); }
.pestana:hover { color: var(--blanco); }
.pestana[aria-selected="true"] { color: var(--blanco); border-bottom-color: var(--blanco); }
.pestana:focus-visible { outline-offset: -2px; }
.pane { display: none; min-width: 0; }
.pane__titulo { margin-bottom: 14px; font-size: var(--t-2); line-height: var(--l-2); font-weight: 500; }
.pane__intro { margin-bottom: 18px; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); text-wrap: pretty; }
.pane__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pane__cabeza .pane__titulo { margin-bottom: 0; }
.pane__cerrar { display: none; }
.pane__historial { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pane > * + * { margin-top: 20px; }
.pane > .pane__cabeza + *, .pane > .pane__titulo + * { margin-top: 0; }
.grupo > .campo + .campo, .grupo > .campo + .con-rango { margin-top: 6px; }
.pane__vacio { padding: 18px; border: 1px dashed rgba(238, 230, 216, 0.3); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }

.opciones { display: grid; gap: 8px; }
.opciones--fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opcion { display: grid; gap: 2px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); background: transparent; box-shadow: var(--oro-filo); text-align: left; transition: border-color var(--rapido), background-color var(--rapido); }
.opcion:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.opcion:focus-visible { outline-offset: 2px; }
.opcion[aria-pressed="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.08); }
.opcion[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.opcion[aria-disabled="true"]:hover { border-color: var(--pizarra-claro); background: transparent; }
.opcion__titulo { color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); }
.opcion__texto { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); text-wrap: pretty; }
.opcion__texto--cita { color: var(--niebla); font-style: normal; }

.rejilla-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.icono-opcion { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 68px; padding: 8px 4px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-6); line-height: var(--l-6); text-align: center; transition: border-color var(--rapido), background-color var(--rapido); }
.icono-opcion:hover { border-color: var(--gris); }
.icono-opcion:focus-visible { outline-offset: 2px; }
.icono-opcion[aria-pressed="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.08); color: var(--blanco); }
.rejilla-figuras { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.figura-opcion { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-5); line-height: 1; transition: border-color var(--rapido), background-color var(--rapido); }
.figura-opcion:hover { border-color: var(--gris); }
.figura-opcion:focus-visible { outline-offset: 2px; }
.figura-opcion[aria-pressed="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.08); color: var(--blanco); }
.figura-opcion canvas { width: 72px; height: 72px; }

.orden-hz { display: flex; flex-wrap: wrap; gap: 8px; }
.orden-hz li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 4px 2px 12px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-pildora); color: var(--niebla); font-size: var(--t-4); line-height: 1; }
.orden-hz li:first-child { border-color: var(--blanco); color: var(--blanco); }
.orden-hz small { color: var(--gris); font-size: var(--t-5); }
.orden-hz .orden-hz__libre { border-style: dashed; }
.mov-ajuste { display: grid; gap: 8px; justify-items: start; }
.escalones { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.escalon { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 44px; padding: 4px 4px 4px 12px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.escalon[data-no-cabe="true"] { border-style: dashed; }
.escalon__n { flex: none; width: 18px; color: var(--gris); font-size: var(--t-5); }
.escalon__hz { color: var(--blanco); }
.escalon__hora { flex: 1 1 auto; min-width: 0; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.escalon .pieza__acciones { margin-left: auto; }
.anuncio-texto { padding: 10px 12px; border-left: 2px solid rgba(238, 230, 216, 0.4); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); text-wrap: pretty; }

.piezas { display: grid; gap: 8px; }
.pieza { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); background: rgba(0, 0, 0, 0.3); }
.pieza[data-resaltada="true"] { border-color: var(--blanco); }
.pieza__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pieza__tipo { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.pieza__acciones { display: flex; gap: 2px; }
.pieza__cuerpo { display: grid; gap: 10px; min-width: 0; }
.pieza__frase { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-boton); color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); text-align: left; }
.pieza__frase:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.pieza__frase:focus-visible { outline-offset: 2px; }
.pieza__frase span:first-child { flex: 1 1 200px; min-width: 0; }
.etiqueta { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-pildora); color: var(--niebla); font-size: var(--t-5); line-height: 1; white-space: nowrap; }
.etiqueta--pendiente { border-style: dashed; border-color: rgba(238, 230, 216, 0.5); }
.piezas__agregar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.revision { display: grid; gap: 22px; }
.revision__grupo { display: grid; gap: 8px; }
.revision__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--t-3); line-height: var(--l-3); font-weight: 500; }
.revision__sub { color: var(--gris); font-size: var(--t-5); font-weight: 400; }
.revision__lista { display: grid; gap: 6px; }
.revision__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); text-align: left; transition: border-color var(--rapido), background-color var(--rapido); }
.revision__item:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.revision__item:focus-visible { outline-offset: 2px; }
.revision__item--error { border-color: rgba(238, 230, 216, 0.55); color: var(--blanco); }
.revision__donde { grid-column: 2; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.nivel { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--radio-pildora); font-size: var(--t-5); line-height: 1; white-space: nowrap; }
.nivel--nota { border-style: dashed; }

/* ═════════ Las hojas (diálogos) ═════════ */
dialog.hoja {
  position: fixed;
  inset: 0;
  margin: auto;
  display: none;
  flex-direction: column;
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--oro-ambiente) 50% 0 / 100% 240px no-repeat, var(--grafito);
  box-shadow: var(--oro-filo-fuerte), 0 0 0 1px var(--linea-tenue), 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--blanco);
  overflow: hidden;
}
dialog.hoja[open] { display: flex; animation: subir var(--mov-medio) var(--curva) both; }
dialog.hoja::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog.hoja--aviso { width: min(460px, calc(100vw - 32px)); }
dialog.hoja--ancha { width: min(720px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 48px)); }
dialog.hoja--lateral { inset: 0 0 0 auto; margin: 0; width: min(500px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 20px 0 0 20px; }
dialog.hoja--lateral[open] { animation: consola-lado var(--mov-medio) var(--curva-cajon) both; }
@keyframes consola-lado { from { opacity: 0; transform: translateX(40px); } }
.hoja__cabeza { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.hoja__cabeza h2 { min-width: 0; }
.hoja__cuerpo { display: grid; flex: 1 1 auto; align-content: start; gap: 16px; min-height: 0; padding: 6px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.hoja--aviso .hoja__cuerpo { padding-top: 22px; }
.hoja__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* La muestra en audio: una hoja con una parte por estado. El morado solo en lo que suena (la barra mientras se graba); el resto, de arena. */
.muestra-audio__parte { display: grid; gap: 14px; min-width: 0; }
.muestra-audio__lista { display: grid; gap: 6px; margin: 0; padding-left: 18px; list-style: disc; }
.muestra-audio__lista:empty { display: none; }
.muestra-audio__linea, .muestra-audio__motivo, .muestra-audio__etapa, .muestra-audio__archivo { color: var(--blanco); }
.muestra-audio__motivo:empty { display: none; }
.muestra-audio__archivo { overflow-wrap: anywhere; }
.muestra-audio__tiempo { color: var(--blanco); font-size: var(--t-1); line-height: var(--l-1); white-space: nowrap; }
.muestra-audio__avance { position: relative; height: 8px; border-radius: var(--radio-pildora); background: rgba(238, 230, 216, 0.12); overflow: hidden; }
.muestra-audio__relleno { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--niebla); transition: width 0.3s linear; }
.muestra-audio__avance[data-vivo="true"] .muestra-audio__relleno { background: var(--morado); }
.muestra-audio__oir { width: 100%; color-scheme: dark; }
/* En una tableta (de 768 a 899 px) el transporte no tiene lugar para un cuarto botón sin apretar su lectura (el tiempo, la etapa y los tonos): la muestra
   se abre desde "Más acciones". */
@media (max-width: 899px) {
  .transporte__botones [data-ma-abrir] { display: none; }
}

.biblioteca__nuevo, .biblioteca__archivos { display: flex; flex-wrap: wrap; gap: 8px; }
.en-prueba { display: grid; gap: 8px; margin-block: 12px; }
.en-prueba[hidden] { display: none; }
.en-prueba__titulo { margin: 0; }
.en-prueba__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.biblioteca__resumen { padding: 12px 14px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.biblioteca__resumen ul { display: grid; gap: 4px; margin-top: 6px; color: var(--gris); }
.biblioteca__nota { margin-top: -4px; }
.biblioteca__lista { display: grid; gap: 10px; }
.biblioteca-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--linea-tenue); border-radius: 14px; background: rgba(0, 0, 0, 0.3); }
.biblioteca-item[aria-current="true"] { border-color: var(--blanco); }
.biblioteca-item__abrir { display: grid; gap: 2px; min-height: 44px; padding: 8px 10px; border-radius: 10px; text-align: left; }
.biblioteca-item__abrir:hover { background: rgba(238, 230, 216, 0.05); }
.biblioteca-item__abrir:focus-visible { outline-offset: -2px; }
.biblioteca-item__nombre { font-size: var(--t-ritual); line-height: var(--l-ritual); overflow-wrap: anywhere; }
.biblioteca-item__datos, .biblioteca-item__estado { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.biblioteca-item__estado { color: var(--niebla); }
.biblioteca__vacio { padding: 16px; border: 1px dashed rgba(238, 230, 216, 0.3); border-radius: var(--radio-boton); color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }

/* El historial: una tarjeta por versión, de la más nueva a la más vieja. Lo elegido (la última guardada) va con borde de arena, nunca morado. */
.historial__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.historial__sin-guardar { display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); background: var(--grafito); box-shadow: var(--oro-filo); }
.historial__sin-guardar-texto { color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); }
.historial__bloqueado { padding: 12px 14px; border: 1px dashed rgba(238, 230, 216, 0.3); border-radius: var(--radio-boton); color: var(--blanco); }
.historial__estado:empty { display: none; }
.version { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--linea-tenue); border-radius: 14px; background: rgba(0, 0, 0, 0.3); }
.version[aria-current="true"] { border-color: var(--blanco); }
.version__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.version__titulo { color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); font-weight: 600; }
.version__fecha { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.version__resumen, .version__estado { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); overflow-wrap: anywhere; }
.version__estado { color: var(--niebla); }
.version__detalle { border-top: 1px solid var(--linea-tenue); }
.version__detalle summary { display: flex; align-items: center; min-height: 36px; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); cursor: pointer; }
.version__detalle summary:focus-visible { outline-offset: 2px; }
.version__lineas { display: grid; gap: 4px; margin: 2px 0 10px; padding-left: 18px; list-style: disc; color: var(--niebla); font-size: var(--t-5); line-height: var(--l-5); overflow-wrap: anywhere; }
.version__detalle p { margin: 2px 0 10px; }
.version .boton { justify-self: start; margin-top: 4px; }

.plantillas { display: grid; gap: 10px; }
.plantilla { display: grid; gap: 4px; width: 100%; padding: 14px 16px; border: 1px solid var(--linea-tenue); border-radius: 14px; background: rgba(0, 0, 0, 0.3); text-align: left; transition: border-color var(--rapido), background-color var(--rapido); }
.plantilla:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.plantilla:focus-visible { outline-offset: 2px; }
.plantilla[aria-current="true"] { border-color: var(--blanco); background: rgba(238, 230, 216, 0.08); }
.plantilla__prueba { justify-self: start; height: auto; min-height: 22px; padding-block: 3px; border-radius: 12px; line-height: 1.25; text-align: left; white-space: normal; }
.plantilla__fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.plantilla__nombre { font-size: var(--t-ritual); line-height: var(--l-ritual); }
.plantilla__datos { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.plantilla__min { color: var(--gris); font-size: var(--t-5); }

.frases__lista { display: grid; gap: 18px; }
.frases__grupo { display: grid; gap: 6px; }
.frases__titulo { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); font-weight: 500; }
.frases__titulo.nombre-ritual { color: var(--blanco); font-size: var(--t-ritual); line-height: var(--l-ritual); font-weight: 600; }
.frase-opcion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); text-align: left; transition: border-color var(--rapido), background-color var(--rapido); }
.frase-opcion:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.frase-opcion:focus-visible { outline-offset: 2px; }
.frase-opcion__texto { flex: 1 1 240px; min-width: 0; text-wrap: pretty; }
.frases__propia { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linea-tenue); }
.frases__acciones { display: flex; justify-content: flex-end; }

/* El aviso breve de abajo, con su botón (por ejemplo, "Deshacer"). */
.nota { display: flex; align-items: center; justify-content: center; gap: 12px; bottom: calc(var(--alto-transporte) + 24px); }
.nota .boton { min-height: 32px; padding: 0 12px; font-size: var(--t-5); }

/* ═════════ El catálogo: la lista de Campo Vivo y el desglose de cada uno ═════════
   Una hoja ancha: a la izquierda, los protocolos y los rituales; a la derecha, el desglose del elegido (la ficha, el sonido de fondo y las etapas
   una por una). Cada columna se desplaza por su cuenta; "Hacer una copia" se queda pegada abajo del desglose y, en escritorio, la cabecera de
   las etapas (con las duraciones) también. En celular se ve una cosa a la vez, la lista o el desglose (data-vista de la hoja), más abajo. */
dialog.hoja--catalogo { width: min(1120px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px)); }
.catalogo__titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.catalogo__volver { display: none; }
.catalogo { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--linea-tenue); }
.catalogo__lista, .catalogo__detalle { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.catalogo__lista { display: grid; align-content: start; gap: 22px; padding: 16px 16px 28px 20px; border-right: 1px solid var(--linea-tenue); }
.catalogo__intro { color: var(--niebla); text-wrap: pretty; }
.catalogo__grupo { display: grid; gap: 10px; }
.catalogo__grupo-titulo { padding: 0 4px; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); font-weight: 500; }
.catalogo__detalle { display: flex; flex-direction: column; }
@media (max-width: 899px) {
  .catalogo { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}

.catalogo-detalle__cuerpo { display: grid; align-content: start; gap: 30px; flex: 1 0 auto; padding: 22px 28px 32px; }
.catalogo-detalle__cabeza { display: grid; gap: 10px; }
.catalogo-detalle__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.catalogo-detalle__nombre { font-size: var(--t-h4); line-height: var(--l-h4); overflow-wrap: anywhere; }
.catalogo-detalle__nombre:focus-visible { outline-offset: 4px; }
.catalogo-seccion { display: grid; gap: 14px; min-width: 0; }
.catalogo-seccion__titulo { color: var(--blanco); font-size: var(--t-2); line-height: var(--l-2); font-weight: 500; }

/* Datos de una ficha: el nombre del dato y su valor, en dos columnas (en celular, uno bajo el otro). */
.catalogo-datos { display: grid; gap: 12px; margin: 0; }
.catalogo-datos > div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 20px; }
.catalogo-datos dt { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.catalogo-datos dd { margin: 0; color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); text-wrap: pretty; }
.catalogo-datos--fondo { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.catalogo-datos--fondo > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 14px; border: 1px solid var(--linea-tenue); border-radius: var(--radio-boton); background: rgba(0, 0, 0, 0.3); }
.catalogo-datos--fondo dt { font-size: var(--t-5); line-height: var(--l-5); }

/* Las etapas: una tarjeta por etapa, con cuándo empieza, sus frecuencias, qué pasa y qué dice la voz. */
.catalogo-etapas__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.catalogo-etapas__total { margin-top: 2px; color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.catalogo-etapas__nota { padding: 12px 14px; border: 1px dashed rgba(238, 230, 216, 0.3); border-radius: var(--radio-boton); color: var(--niebla); text-wrap: pretty; }
.catalogo-etapas { display: grid; gap: 14px; }
.catalogo-etapa { display: grid; gap: 16px; min-width: 0; padding: 16px 18px; border: 1px solid var(--linea-tenue); border-radius: 14px; background: rgba(0, 0, 0, 0.3); }
.catalogo-etapa__cabeza { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.catalogo-etapa__num { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--pizarra-claro); border-radius: 50%; color: var(--niebla); font-size: var(--t-4); line-height: 1; }
.catalogo-etapa__nombre { min-width: 0; margin: 0; color: var(--blanco); font-size: var(--t-2); line-height: var(--l-2); font-weight: 500; overflow-wrap: anywhere; }
.catalogo-etapa__tiempo { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); text-align: right; }
.catalogo-etapa__grupo { display: grid; gap: 8px; min-width: 0; }
.catalogo-etapa__rotulo { margin: 0; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); font-weight: 400; }
.catalogo-etapa__hz { display: flex; flex-wrap: wrap; gap: 6px; }
.catalogo-etapa__sin { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.catalogo-etapa__aparte { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.catalogo-pasa { display: grid; gap: 6px; }
.catalogo-pasa > li { position: relative; padding-left: 16px; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); text-wrap: pretty; }
.catalogo-pasa > li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--gris); }
/* La cascada: cada frecuencia que entra a llevar la voz, con la hora a la que entra. */
.catalogo-escalon { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.catalogo-escalon .hz-ficha { gap: 8px; }
.catalogo-escalon__hora { color: var(--gris); font-size: var(--t-6); line-height: 1; }
/* Lo que dice la voz: la hora a la izquierda y la frase; lo que todavía no está grabado, sin hora y con su etiqueta. */
.catalogo-voz { display: grid; gap: 8px; }
.catalogo-voz__frase { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
.catalogo-voz__hora { color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.catalogo-voz__texto { min-width: 0; color: var(--blanco); font-size: var(--t-4); line-height: var(--l-4); text-wrap: pretty; }
.catalogo-voz__nota { color: var(--gris); font-size: var(--t-5); }
.catalogo-voz__texto .etiqueta { vertical-align: 1px; }

/* La acción del desglose, siempre a la vista abajo. */
.catalogo-acciones { position: sticky; bottom: 0; z-index: 1; display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; padding: 12px 28px; background: var(--grafito); box-shadow: var(--oro-filo), 0 -1px 0 var(--linea-tenue); }
.catalogo-acciones__nota { flex: 1 1 220px; min-width: 0; text-wrap: pretty; }
@media (min-width: 768px) {
  /* Las duraciones se quedan arriba mientras se recorren las etapas. */
  .catalogo-etapas__cabeza { position: sticky; top: 0; z-index: 1; margin: 0 -28px; padding: 10px 28px 12px; background: var(--grafito); box-shadow: 0 1px 0 var(--linea-tenue); }
}
/* Cómo se explica cada etapa: con qué guía y qué respuesta de "¿Cómo te sientes?" están sacadas las horas. Va bajo la cabecera, no dentro de ella. */
.catalogo-etapas__horas { color: var(--gris); text-wrap: pretty; }

/* Lo que tapan, dentro del desglose, la barra de "Hacer una copia" (abajo) y la cabecera fija de las etapas (arriba, solo en escritorio): con Tab,
   el navegador deja el botón que recibe el foco fuera de esas franjas. Sus alturas dependen de cuánto se parte el texto en cada ancho (medidas
   con las duraciones de los 14: la cabecera, de 82 a 184 px; la barra, de 68 a 108 px), así que los valores van un poco por encima. */
.catalogo__detalle { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .catalogo__detalle { scroll-padding-top: 196px; scroll-padding-bottom: 116px; }
}
@media (min-width: 1100px) {
  .catalogo__detalle { scroll-padding-top: 96px; scroll-padding-bottom: 80px; }
}
/* Pantallas bajas con el diseño de escritorio (un celular acostado, una ventana chata): la cabecera fija y la barra se comerían casi todo el panel.
   La cabecera se va con el resto al desplazar y la barra queda en una sola línea, sin su nota (la lista de la izquierda ya dice que se copia). */
@media (min-width: 768px) and (max-height: 560px) {
  .catalogo-etapas__cabeza { position: static; margin: 0; padding: 0; background: none; box-shadow: none; }
  .catalogo-acciones { flex-wrap: nowrap; padding-block: 6px; }
  .catalogo-acciones__nota { display: none; }
  .catalogo__detalle { scroll-padding-top: 0; scroll-padding-bottom: 64px; }
}

/* ═════════ Tableta (de 768 a 1099 px): la mesa arriba y, abajo, una sola columna con las etapas y el inspector ═════════ */
@media (min-width: 768px) {
  body[data-pestana="ficha"] .pane[data-pane="ficha"],
  body[data-pestana="sonido"] .pane[data-pane="sonido"],
  body[data-pestana="programa"] .pane[data-pane="programa"],
  body[data-pestana="etapa"] .pane[data-pane="etapa"],
  body[data-pestana="revision"] .pane[data-pane="revision"] { display: block; }
}
@media (max-width: 1099px) {
  .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .barra__etiqueta { display: none; }
  .barra__acciones .boton--catalogo { width: 44px; padding: 0; }
  .barra__acciones .boton--catalogo .boton__texto { display: none; }
}

/* ═════════ Celular (menos de 768 px): una columna, con el selector Mesa · Etapas · Ficha · Revisión ═════════ */
@media (max-width: 767px) {
  :root { --gutter-lt: 64px; --alto-carril: 36px; }
  body.consola { padding-bottom: calc(var(--alto-transporte) + env(safe-area-inset-bottom, 0px)); }
  .consola .solo-escritorio { display: none !important; }
  .consola .solo-movil { display: flex !important; }

  .barra { position: static; padding: 10px 16px; }
  .barra__fila { flex-wrap: nowrap; gap: 8px; }
  .barra__acciones { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .marca-nombre { display: none; }
  .barra__acciones .boton { padding: 0 14px; font-size: var(--t-3); }
  .barra__acciones .boton--icono, .barra__acciones .boton--solo-icono-movil { width: 44px; padding: 0; }
  .barra__acciones .boton__texto { display: none; }
  .barra__nombre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .consola-app > .aviso { margin: 8px 16px 0; }
  .espacio { gap: 12px; padding: 12px 16px 24px; }
  .vacio { margin-top: 2vh; padding: 20px; }
  .vacio__acciones .boton { flex: 1 1 100%; }

  .vistas { display: flex; position: sticky; top: 0; z-index: 15; margin: -12px -16px 0; padding: 0 12px; background: var(--negro); box-shadow: inset 0 -1px 0 var(--linea-tenue); }
  .vista { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 48px; border-bottom: 2px solid transparent; color: var(--gris); font-size: var(--t-4); line-height: 1; white-space: nowrap; }
  .vista:hover { color: var(--blanco); }
  .vista[aria-selected="true"] { color: var(--blanco); border-bottom-color: var(--blanco); }
  .vista:focus-visible { outline-offset: -3px; }
  .trabajo { gap: 12px; padding-top: 12px; }

  .mesa { display: contents; }
  .mesa__cuerpo { display: grid; gap: 14px; }
  body:not([data-vista="mesa"]) .mesa__cuerpo { display: none; }
  .mesa__controles { gap: 12px 24px; }
  .cuerpo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .etapas { padding: 16px; }
  body:not([data-vista="etapas"]) .etapas { display: none; }
  .inspector { display: contents; }
  .pestanas { display: none; }
  .pane { padding: 16px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo); }
  body[data-vista="ficha"] .pane[data-pane="ficha"],
  body[data-vista="ficha"] .pane[data-pane="sonido"],
  body[data-vista="ficha"] .pane[data-pane="programa"],
  body[data-vista="revision"] .pane[data-pane="revision"] { display: block; }
  /* La etapa que se edita: una hoja a pantalla completa, por encima de todo menos del transporte. */
  body[data-hoja-etapa="true"] .pane[data-pane="etapa"] { display: block; position: fixed; inset: 0 0 var(--alto-transporte) 0; z-index: 30; padding: 16px 16px 24px; border-radius: 0; background: var(--oro-ambiente) 50% 0 / 100% 240px no-repeat, var(--negro); overflow-y: auto; overscroll-behavior: contain; }
  .pane__cerrar { display: inline-flex; }
  .cuenta { display: none; }
  body[data-hoja-etapa="true"] { overflow: hidden; }

  /* La línea de tiempo cabe a lo ancho: carriles más finos y los rótulos cortos. */
  .lt__largo { display: none; }
  .lt__corto { display: inline; }
  .lt__rotulo { padding: 0 4px 0 8px; }
  .lt__fila--etapas .lt__pista { height: 40px; }
  .lt-etapa { padding: 0 5px; gap: 4px; }

  /* El transporte, fijo abajo. */
  .transporte {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 35;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--negro);
    box-shadow: var(--oro-filo-fuerte), 0 -1px 0 var(--linea-tenue);
  }
  .transporte__botones { flex-wrap: nowrap; gap: 6px; }
  .transporte__botones .boton { padding: 0 12px; font-size: var(--t-5); }
  .transporte__botones [data-detener] { width: 44px; padding: 0; }
  .transporte__botones [data-detener] span:last-child { display: none; }
  .transporte__lectura { gap: 0 14px; }
  .transporte__tiempo { font-size: var(--t-3); line-height: var(--l-3); }
  .transporte__subtitulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-4); line-height: var(--l-4); }
  .transporte__subtitulo:empty { display: none; }

  /* Las hojas: a pantalla completa. */
  dialog.hoja, dialog.hoja--ancha, dialog.hoja--lateral, dialog.hoja--catalogo { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  dialog.hoja[open], dialog.hoja--lateral[open] { animation: aparecer var(--mov-medio) var(--curva) both; }
  dialog.hoja--aviso { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .hoja__cuerpo { padding: 6px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .hoja__cabeza { padding: 14px 16px 8px; }
  .nota { max-width: 92vw; }

  /* El catálogo: una cosa a la vez. La lista; al elegir uno, su desglose con "Volver" en la cabecera. */
  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .catalogo__lista { padding: 14px 16px 24px; border-right: 0; }
  dialog[data-vista="lista"] .catalogo__detalle { display: none; }
  dialog[data-vista="detalle"] .catalogo__lista { display: none; }
  dialog[data-vista="detalle"] .catalogo__volver { display: inline-flex; padding: 0 12px 0 6px; }
  .catalogo-detalle__cuerpo { gap: 26px; padding: 18px 16px 24px; }
  .catalogo-datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .catalogo-datos--fondo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .catalogo-etapa { padding: 14px; }
  .catalogo-etapa__cabeza { grid-template-columns: 32px minmax(0, 1fr); }
  .catalogo-etapa__tiempo { grid-column: 2; text-align: left; }
  .catalogo-voz__frase { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 8px; }
  .catalogo-acciones { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .catalogo-acciones .boton { flex: 1 1 100%; }
  .catalogo-acciones__nota { display: none; }   /* la lista ya dice que se copia con otro nombre y que el original no se toca */

  /* Lo que se toca mide 44 px o más. */
  .chip { min-height: 44px; }
  .chip--chico { min-height: 40px; }
  .entrada, .seleccion { min-height: 44px; }
  .casilla { min-height: 44px; align-items: center; }
  .casilla input { width: 22px; height: 22px; margin: 0; }
  .boton--chico { min-height: 44px; }
  .boton--chico.boton--icono { width: 44px; }
  .etapa-tarjeta__acciones { grid-template-columns: repeat(2, 44px); }
  .aviso .boton { min-height: 44px; }

  /* Deshacer y rehacer: debajo del nombre y las etiquetas, a la derecha, de 44 px; con tres botones caben en 320 px. */
  .barra__historial { flex-basis: 100%; justify-content: flex-end; }
  .barra__historial .boton__texto { display: none; }
  .barra__historial [data-abrir-historial] { width: 44px; padding: 0; }
  .version__detalle summary { min-height: 44px; }
  .version .boton { min-height: 44px; }
}

/* En pantallas muy angostas, las flechas de la cabecera de la etapa bajan a una segunda línea para no apretar el título ni "Listo". */
@media (max-width: 360px) {
  .pane__cabeza { flex-wrap: wrap; }
  .pane__historial { order: 3; flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
}

/* Hasta unos 400 px la fila de cada entrada de una cascada no cabe en una línea: el texto arriba y sus botones debajo. */
@media (max-width: 400px) {
  .escalon .pieza__acciones { flex-basis: 100%; justify-content: flex-end; }
}