<!--
========================================================================
  DRY FIRE STAGE EDITOR — manual / resumen de funcionamiento
========================================================================

Editor de práctica de tiro en seco (dry-fire) para el Club Tir Les Gavarres.
Página autocontenida: HTML + CSS + JavaScript en este único archivo. Todo el
estado (stages, secuencia, config del temporizador, cámaras, preferencias)
se guarda en localStorage del navegador; en el servidor solo lo compartido
con un código (/dryfire/<código>/, `CompartidoDryfire`) y, con la sesión de
tiropractico.es, lo guardado en la cuenta del usuario (README.md, «Compartir
y cuenta»).

------------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------------
Tres paneles superpuestos al lienzo (#stage-canvas), cerrados por
defecto al cargar. El único elemento flotante y arrastrable de la
página es la ventana de cámara (ver más abajo); todo lo demás está
anclado:

  • Barra izquierda (#toolbar)       — botón arriba-izquierda
      Paleta de blancos + editor del stage activo (guardar/cargar/borrar).
  • Barra derecha (#toolbar-right)   — botón arriba-derecha
      Temporizador de tiro (la cámara ya no vive aquí, ver LAYOUT).
  • Barra inferior (#seqbar)         — botón abajo-derecha (se desplaza
      hacia la izquierda si la barra derecha está abierta, para no
      quedar tapado)
      Editor de la secuencia automática de ejercicios (stages).

La barra derecha y la inferior son EXCLUYENTES entre sí: abrir una
cierra automáticamente la otra (nunca están visibles a la vez). La
barra izquierda es independiente de ambas.

El lienzo ocupa toda la pantalla de fondo; las barras se abren/cierran
con una transición y no reorganizan el lienzo (los blancos se colocan en
coordenadas absolutas respecto al lienzo completo).

------------------------------------------------------------------------
BARRA IZQUIERDA — editor del stage
------------------------------------------------------------------------
  - Paleta: click para añadir una diana (IPSC, Popper, Metal, No-Shoot)
    al centro del lienzo. Arrastrar para mover, rueda del
    ratón para rotar (15°), tirador inferior-derecho para redimensionar,
    click derecho para menú contextual (rotar, hard cover, duplicar,
    frente/fondo, eliminar).
  - Imágenes: compartidas con el Stage Designer
    (stagedesigner/static/stagedesigner/img/), incluidas las de hard cover.
    Solo se comparten las imágenes: las dos apps no intercambian stages.
  - Selección múltiple con Shift+click; "Snap" a rejilla activable con el
    botón de la cabecera.
  - Nombre + Guardar/Nuevo/Eliminar. El selector "Cargar stage" aplica el
    cambio directamente al elegir una opción (sin botón "Cargar").
  - Compartir (el stage con su temporizador, con un código público; exige
    sesión), Abrir código y, con sesión, Mis stages (lo guardado en la cuenta).
    En la barra inferior, ⇪ comparte la secuencia con sus stages.

------------------------------------------------------------------------
BARRA DERECHA — temporizador
------------------------------------------------------------------------
  - Temporizador: cuenta de tiro (atrás o hacia adelante, alternable con
    el botón-icono ↓/↑) con Duración / Repeticiones / Pausa entre series
    (campos compactos icono+número). Pitido agudo al empezar cada serie,
    doble pitido grave al terminarla.
  - "Grabar al iniciar" (botón-icono ⏺) y "Mostrar/ocultar cámara"
    (botón-icono 🎥): controlan un estado compartido (grabación activada,
    cámara(s) visibles), pero cada uno tiene su PROPIO botón en esta
    barra Y en la barra inferior — como ambas barras son excluyentes,
    así siempre hay acceso a los dos sin importar cuál esté abierta. Si
    "Grabar al iniciar" está activo, pulsar cualquiera de los dos
    botones "Iniciar" (temporizador o secuencia) lanza también la
    grabación de pantalla + cámara(s) activas + audio.

------------------------------------------------------------------------
CÁMARA(S) — ventana(s) flotante(s)
------------------------------------------------------------------------
Único elemento flotante de la página: cada cámara activa es su propia
ventana `position:fixed`, arrastrable desde su cabecera, independiente
de qué barra esté abierta o cerrada. La principal aparece por defecto
abajo-derecha; "+" (en su cabecera) añade hasta 4, cada una con su
propio selector de dispositivo y botón de activar/desactivar. El botón
"Mostrar/ocultar cámara" (en la barra derecha o en la inferior) oculta
o muestra todas a la vez y las apaga si se ocultan.

------------------------------------------------------------------------
BARRA INFERIOR — secuencia automática de ejercicios
------------------------------------------------------------------------
  - Selector "Añadir stage": al elegir un stage se añade como chip al
    final de la lista (sin botón "+").
  - Chips de la secuencia (scroll horizontal): nombre del stage, mover
    antes/después, segundos de exposición, quitar, y una pausa propia
    (icono reloj de arena + número, en segundos, 0 = sin pausa) antes de
    pasar al siguiente ejercicio — configurable e independiente por
    ítem; no se aplica tras el último (ese usa la pausa antes de repetir
    en bucle, si aplica).
  - Controles compactos agrupados: pausa inicial/de bucle (icono reloj
    de arena + número, en segundos), sentido de la cuenta (icono ↓/↑,
    independiente del sentido del temporizador de la barra derecha),
    "Grabar al iniciar" y "Mostrar/ocultar cámara" (mismo estado
    compartido que sus homónimos de la barra derecha, ver esa sección),
    modo al terminar (icono ↻ fijo; oscuro = detener, encendido = repetir
    en bucle) e Iniciar/Detener (icono ▶/⏹).
  - Al iniciar: se limpia el lienzo y cuenta atrás "Preparados" (con la
    duración configurada, dos decimales); al terminar cada pausa se
    muestra el siguiente ejercicio con un pitido agudo. Si el modo es
    "detener", al llegar al final suenan dos pitidos graves y el lienzo
    queda vacío. Si es "repetir en bucle", vuelve a pausar y repetir
    desde el primero.

El temporizador y la secuencia son independientes entre sí: cada botón
"Iniciar" (el del temporizador y el de la secuencia) arranca siempre
solo su propio sistema, nunca ambos a la vez.

------------------------------------------------------------------------
ATAJOS DE TECLADO (con el foco fuera de inputs/selects)
------------------------------------------------------------------------
  Supr/Backspace  Eliminar diana(s) seleccionada(s)
  Escape          Deseleccionar, cerrar menú contextual y detener
                  temporizador/secuencia si están en marcha
  Ctrl/Cmd+S      Guardar stage
  Ctrl/Cmd+N      Nuevo stage
  Ctrl/Cmd+A      Seleccionar todas las dianas
  Flechas         Mover la(s) diana(s) seleccionada(s): un paso de la rejilla
                  (con snap) o 2 unidades (sin snap); con Mayús, 5 veces más
  + / -           Aumentar / disminuir el tamaño de la selección (10 %, de 0,3×
                  a 3×, sin mover su centro)
  T               Mostrar/ocultar la barra izquierda

------------------------------------------------------------------------
PERSISTENCIA (localStorage, prefijo "dryfire-")
------------------------------------------------------------------------
  dryfire-v5              Lista de stages guardados (nombre + dianas)
  dryfire-seq-cfg         Secuencia (ítems, modo al terminar, pausa)
  dryfire-timer-cfg       Duración / repeticiones / pausa del temporizador
  dryfire-record-enabled  Estado del interruptor "Grabar al iniciar"
  dryfire-timer-count-up  Sentido de la cuenta del temporizador (atrás/adelante)
  dryfire-seq-count-up    Sentido de la cuenta de la secuencia (atrás/adelante)
  dryfire-cam-device      Dispositivo de la cámara principal
  dryfire-cam-panels-extra  Cámaras adicionales añadidas
  dryfire-cam-pos         Posición arrastrada de la cámara principal (y
                          dryfire-cam-pos-<uid> para cada cámara extra)
  dryfire-cam-visible     Estado de "Mostrar/ocultar cámara" (sin guardar: oculta)
  dryfire-config-uuid     uuid del temporizador + secuencia (cuenta y compartir)
  dryfire-cuenta          Lo ya guardado en la cuenta: { usuario: { uuid: huella } }
========================================================================
-->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dry Fire Stage Editor | Club de Tir Les Gavarres</title>
    
<script>
    (function () {
        var forzar = false;
        try { forzar = sessionStorage.getItem("solo-escritorio-forzar") === "1"; } catch (e) { /* sin almacenamiento */ }
        var movil = window.matchMedia && matchMedia("(hover: none) and (pointer: coarse)").matches
            && Math.min(screen.width, screen.height) < 768;
        if (!movil || forzar) return;
        var codigo = "";
        location.replace(codigo ? "/visor3d/" + encodeURIComponent(codigo) + "/"
                                : "/designer/escritorio/?app=dryfire&volver=" + encodeURIComponent(location.pathname + location.search + location.hash));
    })();
</script>

    <link rel="icon" type="image/png" sizes="32x32" href="/static/stagedesigner/img/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/stagedesigner/img/favicon-16.png">
    <link rel="shortcut icon" href="/static/stagedesigner/img/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --toolbar-w: 260px; --toolbar-right-w: 300px; --seqbar-h: 148px; --snap: 20px; --accent: #2563EB; }

/* Scrollbars finas integradas con los paneles (en lugar de las nativas del navegador).
   Firefox y Chrome 121+ usan scrollbar-*; Safari y Chrome antiguos, ::-webkit-scrollbar. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.32); }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden; height: 100dvh; width: 100vw;
    user-select: none; -webkit-user-select: none;
    /* Fondo ajustado a la altura y centrado, como la escena de las dianas (abajo): mismo sitio en cualquier monitor */
    background: #1a1a2e url('/static/dryfire/img/galeria-bg.webp') center top / auto 100% no-repeat;
}

#stage-canvas { position: fixed; inset: 0; overflow: hidden; cursor: crosshair; }

.dist-marker {
    position: absolute; left: 8px;
    font-size: 10px; color: rgba(255,255,255,0.25); font-family: monospace; letter-spacing: 1px;
}
.grid-overlay {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: var(--snap) var(--snap);
}
.grid-overlay.on { opacity: 1; }
/* Escena de las dianas: unidades de una escena de ESCENA_H (1080) de alto con el origen arriba en el
   centro de la pantalla; se escala entera (posiciones y tamaños) con --k = alto de la pantalla / 1080. */
.targets-layer { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-origin: 0 0; transform: scale(var(--k, 1)); }
/* Zona segura 16:9 (1920 × 1080): lo que quede fuera no se ve en un monitor 16:9. Solo editando (menú abierto),
   y en la práctica solo se ve en pantallas más anchas que 16:9 */
.escena-guia { pointer-events: none; }
.zona-segura { display: none; position: absolute; left: -960px; top: 0; width: 1920px; height: 1080px;
    border-left: 2px dashed rgba(251,191,36,0.4); border-right: 2px dashed rgba(251,191,36,0.4); }
body.df-editando .zona-segura { display: block; }

.target {
    position: absolute; cursor: grab; transform-origin: center center; z-index: 1;
    transition: filter 0.15s;
}
.target img { display: block; width: 100%; height: 100%; pointer-events: none; object-fit: contain; }
.target:hover { filter: brightness(1.08) drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
.target.sel { z-index: 10; filter: drop-shadow(0 0 12px rgba(37,99,235,0.7)) !important; }
.target.sel .rsz-handle { opacity: 1; }
.rsz-handle {
    position: absolute; right: -7px; bottom: -7px;
    width: 14px; height: 14px; cursor: nwse-resize;
    background: var(--accent); border: 2px solid #fff; border-radius: 3px;
    opacity: 0; transition: opacity 0.15s; z-index: 20; pointer-events: auto;
}
.rsz-handle:hover, .rsz-handle.resizing { opacity: 1; background: #fff; border-color: var(--accent); }
.target.drag {
    cursor: grabbing; z-index: 100;
    filter: brightness(1.12) drop-shadow(0 4px 12px rgba(0,0,0,0.4)); opacity: 0.9;
}
.target.pop { animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Toolbar (barra izquierda y, por herencia, barra derecha) */
.toolbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--toolbar-w);
    background: rgba(15,15,25,0.92); backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,0.08); z-index: 1000;
    display: flex; flex-direction: column; color: #e0e0e0;
    transition: transform 0.25s ease;
}
.toolbar.off { transform: translateX(calc(-1 * var(--toolbar-w))); }
.tb-toggle {
    position: fixed; top: 10px; left: calc(var(--toolbar-w) + 8px);
    width: 56px; height: 56px; z-index: 1001; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    background: rgba(15,15,25,0.85); color: #ccc;
    cursor: pointer; transition: left 0.25s ease, background 0.15s;
}
.tb-toggle:hover { background: rgba(15,15,25,0.95); color: #fff; }
#toolbar.off ~ #tb-toggle { left: 8px; }

/* Barra derecha: temporizador + cámaras, ancladas (sin arrastre) */
.toolbar-right {
    left: auto; right: 0; width: var(--toolbar-right-w);
    border-right: none; border-left: 1px solid rgba(255,255,255,0.08);
}
.toolbar-right.off { transform: translateX(var(--toolbar-right-w)); }
.tb-toggle-right {
    left: auto; right: calc(var(--toolbar-right-w) + 8px);
    transition: right 0.25s ease, background 0.15s;
}
#toolbar-right.off ~ #tb-toggle-right { right: 8px; }
.tbr-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }
.tb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tb-header-acc { display: flex; gap: 6px; }
a.btn { text-decoration: none; }
.tb-title { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 12px; font-size: 13px; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px; background: rgba(255,255,255,0.06); color: #ccc;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.input:disabled, .select:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ico { width: 32px; height: 32px; padding: 0; font-size: 15px; }
.btn-danger { color: #f87171; }
.btn-danger:hover { background: rgba(220,38,38,0.2); border-color: rgba(220,38,38,0.4); }
.btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-group { display: flex; gap: 2px; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 6px 0 0 6px; }
.btn-group > .btn:last-child { border-radius: 0 6px 6px 0; }

.palette {
    padding: 12px 10px; display: flex; flex-wrap: wrap; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.palette-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 68px; padding: 8px 4px 6px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    background: rgba(255,255,255,0.03); color: #aaa; font-size: 10px; cursor: pointer;
    transition: all 0.15s;
}
.palette-item:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.palette-item img { max-width: 28px; max-height: 32px; object-fit: contain; }

.stage-ctrl { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; }
.input {
    width: 100%; padding: 7px 10px; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    background: rgba(255,255,255,0.05); color: #e0e0e0; outline: none; transition: border-color 0.15s;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: rgba(255,255,255,0.25); }
.select {
    width: 100%; padding: 7px 10px; font-size: 12px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    background: rgba(255,255,255,0.05); color: #ccc; outline: none; cursor: pointer;
}
.select:focus { border-color: var(--accent); }
.sel-row { display: flex; gap: 6px; align-items: flex-start; }
.name-row { display: flex; gap: 8px; align-items: center; }
.df-sync { flex: none; font-size: 16px; line-height: 1; }
.df-sync[hidden] { display: none; }
.df-sync.ok { color: #4ade80; } .df-sync.pend { color: #fbbf24; } .df-sync.err { color: #f87171; }
.sel-row .btn-sml { width: 28px; height: 28px; font-size: 12px; }

/* Barra inferior: editor de secuencia de stages, entre las dos barras laterales */
.seqbar {
    position: fixed; left: var(--toolbar-w); right: var(--toolbar-right-w); bottom: 0; height: var(--seqbar-h); z-index: 998;
    background: rgba(15,15,25,0.92); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.08); color: #e0e0e0;
    display: flex; align-items: stretch; gap: 14px; padding: 10px 14px;
    transition: transform 0.25s ease, left 0.25s ease, right 0.25s ease;
}
.seqbar.off { transform: translateY(100%); }
#toolbar.off ~ .seqbar { left: 0; }
#toolbar-right.off ~ .seqbar { right: 0; }
.tb-toggle-bottom {
    left: auto; right: 10px; top: auto; bottom: calc(var(--seqbar-h) + 8px);
    transition: bottom 0.25s ease, right 0.25s ease, background 0.15s;
}
.tb-toggle-bottom i { display: inline-block; transform: rotate(-90deg); }
.seqbar.off ~ .tb-toggle-bottom { bottom: 8px; }
#toolbar-right:not(.off) ~ #tb-toggle-bottom { right: calc(var(--toolbar-right-w) + 8px); }
.seqbar-controls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.seqbar-controls .select { width: 170px; }
.seqbar-controls-row2 { display: flex; align-items: center; gap: 8px; }
#btn-seq-end-mode.active { background: rgba(37,99,235,0.25); border-color: var(--accent); color: #93c5fd; }
/* Campo compacto icono + número, reutilizado en la barra inferior y en el temporizador */
.field-num {
    display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
}
.field-num input {
    width: 40px; padding: 0; border: none; background: transparent; outline: none;
    color: #e0e0e0; font-size: 13px; text-align: center;
}
#seq-list { flex: 1; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px; counter-reset: seqidx; }
.seq-empty { align-self: center; white-space: nowrap; font-size: 11px; color: rgba(255,255,255,0.35); padding: 0 12px; }
.seq-item {
    flex: 0 0 150px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.seq-item::before { counter-increment: seqidx; content: counter(seqidx) ". "; font-size: 10px; color: rgba(255,255,255,0.4); }
.seq-item.active { border-color: var(--accent); background: rgba(37,99,235,0.18); }
.seq-item-row1, .seq-item-row2, .seq-item-row3 { display: flex; align-items: center; gap: 6px; }
.seq-item-name { flex: 1; font-size: 12px; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-item-row1 .btn-ico, .seq-item-row2 .btn-ico { width: 24px; height: 24px; font-size: 11px; }
.seq-item-sec { width: 48px; padding: 4px 6px; text-align: center; }
.seq-item-sec-label { font-size: 11px; color: rgba(255,255,255,0.4); }
.seq-item-row3 { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }
.seq-item-row3 i { font-size: 11px; color: rgba(255,255,255,0.35); }
#btn-seq-start.running { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.5); color: #fca5a5; }
#btn-seq-start.running:hover { background: rgba(220,38,38,0.35); }

.tb-home {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ccc;
    text-decoration: none; border-radius: 6px; transition: all 0.15s;
}
.tb-home:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tb-home img { width: 24px; height: 24px; object-fit: contain; }

.ctx-menu {
    position: fixed; z-index: 2000; min-width: 160px;
    background: rgba(20,20,30,0.96); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    padding: 4px; display: none; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.ctx-menu.show { display: block; }
.ctx-menu button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 12px; font-size: 12px; border: none; border-radius: 4px;
    background: transparent; color: #ccc; cursor: pointer; text-align: left; transition: background 0.1s;
}
.ctx-menu button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ctx-menu hr { margin: 4px 8px; border: none; border-top: 1px solid rgba(255,255,255,0.08); }
.ctx-menu .danger { color: #f87171 !important; }
.ctx-menu .danger:hover { background: rgba(220,38,38,0.2) !important; }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
    padding: 10px 20px; border-radius: 8px;
    background: rgba(15,15,25,0.92); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1); color: #e0e0e0;
    font-size: 13px; z-index: 3000; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cuenta (Mis stages) y compartir con código */
.df-cuenta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.df-cuenta .btn-row { display: flex; gap: 6px; }
.df-cuenta .btn-row .btn { flex: 1; }
/* Indicador «Sin conexión», arriba en el centro */
.df-offline { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1002; display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: rgba(15,15,25,0.9); border: 1px solid rgba(251,191,36,0.5); color: #fbbf24;
    font-size: 12.5px; font-weight: 700; pointer-events: auto; }
.df-offline[hidden] { display: none; }
/* Usuario con la sesión iniciada en tiropractico.es (bajo la cabecera de la barra; abre «Mis stages») */
.df-usuario { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 6px 10px; border: 0; border-radius: 999px;
    background: rgba(255,255,255,0.08); color: #e0e0e0; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.df-usuario:hover { background: rgba(255,255,255,0.14); color: #fff; }
.df-usuario span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-usuario[hidden] { display: none; }
.df-estado { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.df-estado.err { color: #fda4af; }
.df-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.6); }
.df-modal[hidden] { display: none; }
.df-card { width: min(460px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 12px;
    background: #161827; border: 1px solid rgba(255,255,255,0.12); color: #ddd; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.df-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.df-cab b { flex: 1; font-size: 15px; color: #fff; }
#df-modal-body { padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.df-pie { display: flex; gap: 6px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.df-pie:empty { display: none; }
.df-codigo { font: 700 30px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center; color: #fff; }
.df-qr { width: 180px; margin: 0 auto; padding: 6px; border-radius: 8px; background: #fff; }
.df-qr svg { display: block; width: 100%; height: auto; }
.df-url { display: flex; gap: 6px; }
.df-url .input { flex: 1; min-width: 0; }
.df-ayuda { color: rgba(255,255,255,0.5); font-size: 12px; }
.df-lista { display: flex; flex-direction: column; gap: 4px; }
.df-lista label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); cursor: pointer; }
.df-lista label small { color: rgba(255,255,255,0.45); margin-left: auto; white-space: nowrap; }
.df-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); white-space: nowrap; }
.df-tag.nuevo { color: #93c5fd; background: rgba(37,99,235,0.2); }

/* Timer (sección fija dentro de la barra derecha) */
#timer-panel {
    display: flex; flex-direction: column; gap: 10px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.timer-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #999;
}
.timer-title > span:first-child { flex: 1; }
.rec-badge {
    display: none; align-items: center; gap: 4px;
    color: #f87171; font-size: 10px; letter-spacing: 1px;
}
.rec-badge.on { display: inline-flex; }
.rec-badge .bi-record-fill { animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.timer-controls { display: flex; gap: 8px; }
.timer-controls-row2 { display: flex; align-items: center; gap: 8px; }
#btn-timer-start.running { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.5); color: #fca5a5; }
#btn-timer-start.running:hover { background: rgba(220,38,38,0.35); }
#btn-record-toggle.active { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.5); color: #fca5a5; }

#timer-display {
    text-align: center; padding: 2px 0 10px; margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#timer-state {
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #888;
    margin-bottom: 2px;
}
#timer-state.go { color: #4ade80; }
#timer-state.pause { color: #fbbf24; }
#timer-num {
    font-size: 42px; line-height: 1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
#timer-num.flash { animation: timer-flash 0.35s ease; }
@keyframes timer-flash { 0% { transform: scale(1.15); color: #4ade80; } 100% { transform: scale(1); color: #fff; } }
#timer-rep { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; letter-spacing: 1px; }

/* Lectura del estado "en marcha" de la secuencia, integrada en la barra inferior */
.seqbar-now {
    flex: 0 0 170px; padding: 0 16px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08);
    visibility: hidden;
}
.seqbar.running .seqbar-now { visibility: visible; }
#seq-panel-state {
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #4ade80;
    margin-bottom: 2px;
}
#seq-panel-state.pause { color: #fbbf24; }
#seq-panel-num { font-size: 30px; line-height: 1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
#seq-panel-name { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Cámara(s), apiladas de forma fija en la barra derecha (sin arrastre ni redimensionado) */
.cam-panel {
    position: fixed; z-index: 999;
    width: 240px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
    background: rgba(15,15,25,0.92); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #e0e0e0;
}
.cam-panel.cam-primary { bottom: 10px; right: 10px; }
.cam-hd {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #999;
    cursor: move; touch-action: none; margin: -2px -2px 0; padding: 2px;
}
.cam-hd > span:first-child { flex: 1; display: flex; align-items: center; gap: 6px; }
.cam-hd .bi-grip-horizontal { color: rgba(255,255,255,0.25); font-size: 13px; }
.cam-remove-btn {
    border: none; background: transparent; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 12px; padding: 2px 4px; line-height: 1;
}
.cam-remove-btn:hover { color: #f87171; }
.cam-controls { display: flex; gap: 6px; }
.cam-controls .select { flex: 1; }
.cam-controls .btn-ico.active { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.5); color: #fca5a5; }
.cam-view {
    position: relative; height: 180px;
    background: #000; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cam-video { width: 100%; height: 100%; object-fit: cover; display: none; }
.cam-video.active { display: block; }
.cam-placeholder { font-size: 26px; color: rgba(255,255,255,0.25); }
.cam-video.active ~ .cam-placeholder { display: none; }
</style>
</head>
<body>

<div id="stage-canvas">
    <span class="dist-marker" style="bottom:10%">5m</span>
    <span class="dist-marker" style="bottom:25%">10m</span>
    <span class="dist-marker" style="bottom:40%">15m</span>
    <span class="dist-marker" style="bottom:55%">20m</span>
    <span class="dist-marker" style="bottom:70%">25m</span>
    <div class="grid-overlay on" id="grid-overlay"></div>
    <div class="targets-layer escena-guia"><div class="zona-segura"></div></div>
    <div class="targets-layer" id="targets-layer"></div>
</div>

<div class="toolbar off" id="toolbar">
    <div class="tb-header">
        <a href="/" class="tb-home"><img src="/static/stagedesigner/img/ciar-logo.webp" alt="CIAR"> TIROPRACTICO</a>
        <span class="tb-header-acc">
            <!-- Ayuda [?]: el markdown de ayuda/docs/dryfire.md, en otra pestaña -->
            <a class="btn btn-ico" id="btn-ayuda" href="/dryfire/ayuda/" target="_blank" rel="noopener" title="Ayuda de Dry Fire"><i class="bi bi-question-circle"></i></a>
            <button class="btn btn-ico active" id="btn-snap" title="Toggle grid snap"><i class="bi bi-grid-3x3-gap-fill"></i></button>
        </span>
    </div>
    <button class="df-usuario" id="df-usuario" hidden><i class="bi bi-person-circle"></i><span></span></button>
    <div class="palette" id="target-palette"></div>
    <div class="stage-ctrl">
        <div class="name-row">
            <input type="text" id="stage-name" class="input" placeholder="Nombre del stage..." maxlength="60">
            <!-- Con sesión: el stage activo está guardado en la cuenta y al día, pendiente o con error -->
            <span class="df-sync" id="df-sync" hidden></span>
        </div>
        <div class="btn-group">
            <button class="btn" id="btn-new" title="Nuevo stage"><i class="bi bi-file-earmark-plus"></i> Nuevo</button>
            <button class="btn" id="btn-save" title="Guardar stage"><i class="bi bi-save"></i> Guardar</button>
        </div>
        <div class="sel-row">
            <select id="stage-select" class="select"><option value="">-- Cargar stage --</option></select>
            <button class="btn btn-ico btn-sml btn-danger" id="btn-delete" title="Eliminar"><i class="bi bi-trash"></i></button>
        </div>
        <!-- Compartir con un código (/dryfire/<código>/) y lo guardado en la cuenta (sesión de tiropractico.es) -->
        <div class="df-cuenta">
            <div class="btn-row">
                <button class="btn" id="btn-share" title="Compartir este stage, con su temporizador, con un código"><i class="bi bi-share"></i> Compartir</button>
                <button class="btn" id="btn-code-open" title="Abrir un stage o una secuencia compartidos con su código"><i class="bi bi-box-arrow-in-down"></i> Abrir código</button>
            </div>
            <button class="btn" id="btn-cuenta" hidden title="Lo guardado en tu cuenta: recupéralo en cualquier dispositivo"><i class="bi bi-person-badge"></i> Mis stages</button>
            <p class="df-estado" id="cuenta-estado" hidden></p>
        </div>
    </div>
</div>

<!-- Sin conexión: Dry Fire sigue funcionando (Service Worker); compartir, códigos y la cuenta esperan a la red -->
<div class="df-offline" id="df-offline" hidden title="Sin conexión: Dry Fire sigue funcionando y guarda en este navegador; compartir, abrir códigos y «Mis stages» esperan a que vuelva la red"><i class="bi bi-wifi-off"></i> Sin conexión</div>

<button class="tb-toggle" id="tb-toggle" title="Mostrar / Ocultar menú"><i class="bi bi-layout-sidebar-inset"></i></button>

<div class="toolbar toolbar-right off" id="toolbar-right">
    <div class="tb-header">
        <span class="tb-title">Timer y cámaras</span>
    </div>
    <div class="tbr-body">
        <div id="timer-panel">
            <div class="timer-title">
                <span><i class="bi bi-stopwatch-fill"></i> Temporizador</span>
                <span class="rec-badge" id="rec-badge"><i class="bi bi-record-fill"></i> REC</span>
            </div>
            <div id="timer-display">
                <div id="timer-state">Preparado</div>
                <div id="timer-num">0.00</div>
                <div id="timer-rep"></div>
            </div>
            <div class="timer-controls">
                <label class="field-num" title="Duración (s)">
                    <i class="bi bi-stopwatch"></i>
                    <input type="number" id="timer-duration" min="0.1" step="0.01" value="4">
                </label>
                <label class="field-num" title="Repeticiones">
                    <i class="bi bi-arrow-repeat"></i>
                    <input type="number" id="timer-reps" min="1" max="50" step="1" value="1">
                </label>
                <label class="field-num" title="Pausa entre series (s)">
                    <i class="bi bi-hourglass-split"></i>
                    <input type="number" id="timer-gap" min="0" step="0.1" value="6">
                </label>
            </div>
            <div class="timer-controls-row2">
                <button type="button" class="btn btn-ico" id="btn-timer-direction" title="Cuenta atrás"><i class="bi bi-arrow-down"></i></button>
                <button type="button" class="btn btn-ico" id="btn-record-toggle" title="Grabar al iniciar: desactivado"><i class="bi bi-record-circle"></i></button>
                <button type="button" class="btn btn-ico" id="btn-cam-toggle" title="Mostrar/ocultar cámara: visible"><i class="bi bi-camera-video-fill"></i></button>
                <button type="button" class="btn btn-ico" id="btn-timer-start" title="Iniciar temporizador"><i class="bi bi-play-fill"></i></button>
            </div>
        </div>
    </div>
</div>

<template id="cam-panel-tpl">
    <div class="cam-panel">
        <div class="cam-hd" data-role="drag">
            <span><i class="bi bi-camera-video-fill"></i> Cámara</span>
            <button type="button" class="cam-remove-btn" data-role="remove" title="Quitar cámara"><i class="bi bi-x-lg"></i></button>
            <i class="bi bi-grip-horizontal"></i>
        </div>
        <div class="cam-controls">
            <select class="select" data-role="select"><option value="">-- Cámara --</option></select>
            <button type="button" class="btn btn-ico" data-role="toggle" title="Activar / detener cámara"><i class="bi bi-camera-video"></i></button>
        </div>
        <div class="cam-view">
            <video class="cam-video" data-role="video" autoplay playsinline muted></video>
            <i class="bi bi-camera-video-off cam-placeholder" data-role="placeholder"></i>
        </div>
    </div>
</template>
<div id="cam-panels-layer"></div>

<button class="tb-toggle tb-toggle-right" id="tb-toggle-right" title="Mostrar / Ocultar temporizador y cámaras"><i class="bi bi-layout-sidebar-inset-reverse"></i></button>

<div class="seqbar off" id="seqbar">
    <div class="seqbar-controls">
        <select id="seq-add-select" class="select" title="Añadir stage a la secuencia"><option value="">-- Añadir stage --</option></select>
        <div class="seqbar-controls-row2">
            <label class="field-num" title="Pausa antes de mostrar el primer ejercicio y, si repite en bucle, antes de cada repetición (s)">
                <i class="bi bi-hourglass-split"></i>
                <input type="number" id="seq-loop-gap" class="input" min="0" step="0.5" value="3">
            </label>
            <button type="button" class="btn btn-ico" id="btn-seq-direction" title="Cuenta atrás"><i class="bi bi-arrow-down"></i></button>
            <button type="button" class="btn btn-ico" id="btn-seq-record-toggle" title="Grabar al iniciar: desactivado"><i class="bi bi-record-circle"></i></button>
            <button type="button" class="btn btn-ico" id="btn-seq-cam-toggle" title="Mostrar/ocultar cámara: visible"><i class="bi bi-camera-video-fill"></i></button>
            <button type="button" class="btn btn-ico" id="btn-seq-end-mode" title="Al terminar: detener"><i class="bi bi-arrow-repeat"></i></button>
            <button type="button" class="btn btn-ico" id="btn-seq-share" title="Compartir la secuencia (con sus stages y el temporizador) con un código"><i class="bi bi-share"></i></button>
            <button type="button" class="btn btn-ico" id="btn-seq-start" title="Iniciar secuencia"><i class="bi bi-play-fill"></i></button>
        </div>
    </div>
    <div id="seq-list"></div>
    <div class="seqbar-now" id="seqbar-now">
        <div id="seq-panel-state">Stage 1/1</div>
        <div id="seq-panel-num">0.0</div>
        <div id="seq-panel-name"></div>
    </div>
</div>

<button class="tb-toggle tb-toggle-bottom" id="tb-toggle-bottom" title="Mostrar / Ocultar secuencia"><i class="bi bi-layout-sidebar-inset"></i></button>

<template id="seq-item-tpl">
    <div class="seq-item">
        <div class="seq-item-row1">
            <span class="seq-item-name" data-role="name"></span>
            <button type="button" class="btn btn-ico btn-sml btn-danger" data-role="remove" title="Quitar de la secuencia"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="seq-item-row2">
            <button type="button" class="btn btn-ico btn-sml" data-role="up" title="Mover antes"><i class="bi bi-chevron-left"></i></button>
            <button type="button" class="btn btn-ico btn-sml" data-role="down" title="Mover después"><i class="bi bi-chevron-right"></i></button>
            <input type="number" class="input seq-item-sec" data-role="seconds" min="0.5" step="0.5">
            <span class="seq-item-sec-label">s</span>
        </div>
        <div class="seq-item-row3" title="Pausa después de este ejercicio, antes del siguiente (0 = sin pausa)">
            <i class="bi bi-hourglass-split"></i>
            <input type="number" class="input seq-item-sec seq-item-gap" data-role="gap" min="0" step="0.5">
            <span class="seq-item-sec-label">s</span>
        </div>
    </div>
</template>

<div class="ctx-menu" id="ctx-menu">
    <button data-action="rotate-cw"><i class="bi bi-arrow-clockwise"></i> Rotar +15&deg;</button>
    <button data-action="rotate-ccw"><i class="bi bi-arrow-counterclockwise"></i> Rotar -15&deg;</button>
    <button data-action="cover"><i class="bi bi-square-half"></i> Hard cover (siguiente)</button>
    <button data-action="duplicate"><i class="bi bi-copy"></i> Duplicar</button>
    <button data-action="front"><i class="bi bi-front"></i> Al frente</button>
    <button data-action="back"><i class="bi bi-back"></i> Al fondo</button>
    <hr>
    <button data-action="delete" class="danger"><i class="bi bi-trash"></i> Eliminar</button>
</div>

<div class="toast" id="toast"></div>

<!-- Diálogo: código compartido (con su QR), abrir un código y «Mis stages» -->
<div class="df-modal" id="df-modal" hidden role="dialog" aria-modal="true" aria-labelledby="df-modal-tit">
    <div class="df-card">
        <div class="df-cab"><b id="df-modal-tit"></b><button class="btn btn-ico" id="df-modal-x" title="Cerrar"><i class="bi bi-x-lg"></i></button></div>
        <div id="df-modal-body"></div>
        <div class="df-pie" id="df-modal-pie"></div>
    </div>
</div>

<script>
(function () {
    "use strict";

    var LS_KEY = "dryfire-v5";
    var TIMER_LS_KEY = "dryfire-timer-cfg";
    var RECORD_ENABLED_LS_KEY = "dryfire-record-enabled";
    var TIMER_COUNT_UP_LS_KEY = "dryfire-timer-count-up";
    var CAM_DEVICE_LS_KEY = "dryfire-cam-device";
    var CAM_PANELS_LS_KEY = "dryfire-cam-panels-extra";
    var CAM_POS_LS_KEY = "dryfire-cam-pos";
    var CAM_VISIBLE_LS_KEY = "dryfire-cam-visible";
    var CAM_MAX_PANELS = 4;
    var CAM_PANEL_CASCADE_OFFSET = 30;
    var SNAP = 20;                // rejilla, en unidades de la escena
    // Escena independiente del monitor: las dianas (posición y tamaño) van en unidades de una escena de
    // ESCENA_H de alto, con x desde el centro de la pantalla e y desde arriba; la capa se escala con
    // k = alto de la pantalla / ESCENA_H (y el fondo, ajustado a la altura, igual). Los stages de antes
    // (`escena` ausente, en píxeles de la pantalla donde se hicieron) se convierten una vez con la actual.
    var ESCENA_H = 1080, ESCENA = 1;
    var escalaK = 1;
    var snapOn = true;
    var stages = [];
    var activeId = null;
    var selTargets = [];
    var dragging = null;
    var ctxTarget = null;
    var toastTimer;

    var canvas = document.getElementById("stage-canvas");
    var tLayer = document.getElementById("targets-layer");
    var grid = document.getElementById("grid-overlay");
    var nameInp = document.getElementById("stage-name");
    var stageSel = document.getElementById("stage-select");
    var ctxMenu = document.getElementById("ctx-menu");
    var toastEl = document.getElementById("toast");
    var btnSnap = document.getElementById("btn-snap");

    /* Timer */
    var timerPanel = document.getElementById("timer-panel");
    var timerDurationInp = document.getElementById("timer-duration");
    var timerRepsInp = document.getElementById("timer-reps");
    var timerGapInp = document.getElementById("timer-gap");
    var btnTimerStart = document.getElementById("btn-timer-start");
    var recordEnabled = false;
    var recordToggleBtns = [document.getElementById("btn-record-toggle"), document.getElementById("btn-seq-record-toggle")];
    var camVisible = false;   // por defecto oculta: se muestra con el botón de la cámara (y se recuerda)
    var camToggleBtns = [document.getElementById("btn-cam-toggle"), document.getElementById("btn-seq-cam-toggle")];
    var btnTimerDirection = document.getElementById("btn-timer-direction");
    var timerCountUp = false;
    var timerStateEl = document.getElementById("timer-state");
    var timerNumEl = document.getElementById("timer-num");
    var timerRepEl = document.getElementById("timer-rep");
    var timerDuration = 4;
    var timerRunning = false;
    var timerRepsDone = 0;
    var timerRepsTotal = 1;
    var timerRAF = null;
    var timerGapTO = null;
    var audioCtx = null;
    var beepBus = null;
    var recBadge = document.getElementById("rec-badge");
    var mediaRecorder = null;
    var recordedChunks = [];
    var screenStream = null;
    var isRecording = false;
    var recordingStartTO = null;
    var REC_LEAD_MS = 1000;
    var recAudioDest = null;
    var recMicSources = [];
    var recScreenAudioSource = null;

    /* Cámara */
    var camPanelsLayer = document.getElementById("cam-panels-layer");
    var camPanelTpl = document.getElementById("cam-panel-tpl");
    var camPanels = []; // camPanels[0] siempre es el panel primario
    var btnCamAdd = null;

    /* Secuencia automática de stages */
    var SEQ_LS_KEY = "dryfire-seq-cfg";
    var SEQ_COUNT_UP_LS_KEY = "dryfire-seq-count-up";
    var SEQ_DEFAULT_SECONDS = 5;
    var seqItems = []; // {uid, stageId, seconds}
    var seqEndMode = "stop"; // "stop" | "loop"
    var seqLoopGap = 3;
    var seqCountUp = false;
    var seqRunning = false;
    var seqIndex = -1;
    var seqRAF = null;
    var seqAddSelect = document.getElementById("seq-add-select");
    var seqListEl = document.getElementById("seq-list");
    var btnSeqDirection = document.getElementById("btn-seq-direction");
    var btnSeqEndMode = document.getElementById("btn-seq-end-mode");
    var seqLoopGapInp = document.getElementById("seq-loop-gap");
    var btnSeqStart = document.getElementById("btn-seq-start");
    var seqItemTpl = document.getElementById("seq-item-tpl");
    var seqbar = document.getElementById("seqbar");
    var seqPanelStateEl = document.getElementById("seq-panel-state");
    var seqPanelNumEl = document.getElementById("seq-panel-num");
    var seqPanelNameEl = document.getElementById("seq-panel-name");

    var IMG_BASE = "/static/stagedesigner/img/";  // recursos compartidos con el Stage Designer
    var IMG = {
        classic: IMG_BASE + "tarjeta-ipsc.webp",
        popper: IMG_BASE + "popper-ipsc.webp",
        plate: IMG_BASE + "metal.webp",
        ns: IMG_BASE + "nonshoot.webp"
    };

    var TARGET_TYPES = [
        { type: "classic", name: "IPSC" },
        { type: "popper", name: "Popper" },
        { type: "plate", name: "Metal" },
        { type: "ns", name: "No-Shoot" }
    ];

    var SIZE = {
        classic: [63, 80],
        popper: [24, 83],
        plate: [26, 39],  // plato + pletina y poste (metal.webp es 256×384)
        ns: [62, 78]
    };

    // Hard cover (mitad negra) solo en tarjetas y no-shoots; las imágenes las genera el Stage Designer.
    var COVERS = ["", "top", "right", "bottom", "left"];
    var COVER_BASE = { classic: "tarjeta-ipsc", ns: "nonshoot" };

    function imgSrc(type, cover) {
        if (cover && COVER_BASE[type]) return IMG_BASE + COVER_BASE[type] + "-hc-" + cover + ".webp";
        return IMG[type] || IMG.classic;
    }

    // Punto de entrada: carga los stages guardados, monta la paleta y arranca todos los widgets.
    function init() {
        ajustarEscena();
        window.addEventListener("resize", ajustarEscena);
        // Zona segura 16:9 solo mientras se edita (menú izquierdo abierto).
        var tb = document.getElementById("toolbar");
        var editando = function () { document.body.classList.toggle("df-editando", !tb.classList.contains("off")); };
        new MutationObserver(editando).observe(tb, { attributes: true, attributeFilter: ["class"] });
        editando();
        loadAll();
        buildPalette();
        btnSnap.addEventListener("click", togSnap);
        btnSnap.classList.toggle("active", snapOn);

        var tbToggle = document.getElementById("tb-toggle");
        tbToggle.addEventListener("click", function() {
            document.getElementById("toolbar").classList.toggle("off");
        });
        var toolbarRight = document.getElementById("toolbar-right");
        var tbToggleRight = document.getElementById("tb-toggle-right");
        tbToggleRight.addEventListener("click", function() {
            var willOpen = toolbarRight.classList.contains("off");
            toolbarRight.classList.toggle("off");
            if (willOpen) seqbar.classList.add("off"); // barra derecha e inferior son excluyentes
        });
        var tbToggleBottom = document.getElementById("tb-toggle-bottom");
        tbToggleBottom.addEventListener("click", function() {
            var willOpen = seqbar.classList.contains("off");
            seqbar.classList.toggle("off");
            if (willOpen) toolbarRight.classList.add("off"); // barra derecha e inferior son excluyentes
        });
        document.getElementById("btn-new").addEventListener("click", newStage);
        document.getElementById("btn-save").addEventListener("click", saveStage);
        stageSel.addEventListener("change", loadSel);
        document.getElementById("btn-delete").addEventListener("click", delStage);
        nameInp.addEventListener("keydown", function(e) { if (e.key === "Enter") saveStage(); });
        canvas.addEventListener("pointerdown", canvasDown);
        document.addEventListener("click", function(e) { if (!ctxMenu.contains(e.target)) hideCtx(); });
        bindCtxMenu();
        bindKeys();
        grid.classList.toggle("on", snapOn);
        if (stages.length === 0) { newStage(); } else { loadStage(stages[stages.length - 1].id); }
        initTimer();
        initCam();
        initSeq();
        initCuenta();
    }

    // Carga los stages guardados desde localStorage y refresca el selector.
    // Cada stage lleva un uuid (su identidad al compartirlo y en la cuenta); los antiguos lo reciben ahora.
    function loadAll() {
        try { var r = localStorage.getItem(LS_KEY); stages = r ? JSON.parse(r) : []; } catch(_) { stages = []; }
        var sinUuid = false;
        stages.forEach(function (s) {
            if (!s.uuid) { s.uuid = genUUID(); sinUuid = true; }
            if (aEscena(s)) sinUuid = true;
        });
        if (sinUuid) persist();
        refreshSel();
    }
    // Stage de antes de la escena (píxeles de la pantalla donde se hizo): lo pasa a unidades de la escena
    // suponiendo que se hizo en esta pantalla, así se ve igual que antes aquí. Devuelve si lo ha cambiado.
    function aEscena(st) {
        if (!st || st.escena === ESCENA) return false;
        var W = canvas.clientWidth || window.innerWidth, H = canvas.clientHeight || window.innerHeight, f = ESCENA_H / H;
        (st.targets || []).forEach(function (t) {
            t.x = Math.round(((t.x || 0) - W / 2) * f * 10) / 10;
            t.y = Math.round((t.y || 0) * f * 10) / 10;
            t.scale = Math.round((t.scale || 1) * f * 1000) / 1000;
        });
        st.escena = ESCENA;
        return true;
    }

    // Escala la escena al alto de la pantalla (y la rejilla con ella, alineada con el centro).
    function ajustarEscena() {
        var H = canvas.clientHeight || window.innerHeight, W = canvas.clientWidth || window.innerWidth;
        escalaK = H / ESCENA_H;
        document.documentElement.style.setProperty("--k", escalaK);
        var g = document.getElementById("grid-overlay"), paso = SNAP * escalaK;
        g.style.backgroundSize = paso + "px " + paso + "px";
        g.style.backgroundPosition = (W / 2) + "px 0";
    }

    // Guarda el array de stages en localStorage (y, con sesión, en la cuenta).
    function persist() { localStorage.setItem(LS_KEY, JSON.stringify(stages)); programarCuenta(); pintarSync(); }

    // Devuelve el stage actualmente activo, o null si no hay ninguno.
    function getActive() {
        if (!activeId) return null;
        for (var i = 0; i < stages.length; i++) { if (stages[i].id === activeId) return stages[i]; }
        return null;
    }

    // Crea un stage vacío, lo activa y limpia el lienzo.
    function newStage() {
        activeId = genId();
        stages.push({ id: activeId, uuid: genUUID(), name: "", targets: [], escena: ESCENA, modificado: new Date().toISOString() });
        persist(); nameInp.value = ""; clearAll(); refreshSel();
        toast("Nuevo stage creado");
    }

    // Guarda el nombre y las dianas del lienzo en el stage activo (crea uno nuevo si no había).
    function saveStage() {
        var s = getActive();
        if (!s) { newStage(); saveStage(); return; }
        s.name = nameInp.value.trim() || "Sin nombre";
        s.targets = collectTargets();
        s.escena = ESCENA;
        s.modificado = new Date().toISOString();
        persist(); refreshSel();
        toast("Stage guardado");
    }

    // Carga un stage guardado en el lienzo, sin dejar ninguna diana seleccionada.
    function loadStage(id) {
        var s; for (var i = 0; i < stages.length; i++) { if (stages[i].id === id) { s = stages[i]; break; } }
        if (!s) return;
        activeId = s.id;
        nameInp.value = s.name || "";
        clearAll();
        (s.targets || []).forEach(function(t) { createTarget(t, false); });
        refreshSel();
        toast("Stage cargado");
    }

    // Carga en el lienzo el stage elegido en el desplegable de la barra lateral.
    function loadSel() { var v = stageSel.value; if (!v) return; loadStage(v); }

    // Elimina el stage activo (tras confirmar) y purga sus referencias en la secuencia automática.
    function delStage() {
        var s = getActive();
        if (!s) return;
        if (!confirm("Eliminar el stage \u201c" + (s.name || "Sin nombre") + "\u201d?")) return;
        stages = stages.filter(function(x) { return x.id !== s.id; });
        var hadSeqRefs = seqItems.some(function (it) { return it.stageId === s.id; });
        seqItems = seqItems.filter(function (it) { return it.stageId !== s.id; });
        if (hadSeqRefs) {
            persistSeqConfig();
            if (seqRunning) { stopSeqPlayback(); toast("Secuencia detenida: stage eliminado"); }
        }
        persist(); clearAll(); activeId = null; nameInp.value = ""; refreshSel();
        toast("Stage eliminado");
    }

    // Repuebla el selector de stages y sincroniza el selector y la lista de la secuencia automática.
    function refreshSel() {
        stageSel.innerHTML = '<option value="">-- Cargar stage --</option>';
        stages.forEach(function(s) {
            var o = document.createElement("option");
            o.value = s.id; o.textContent = s.name || "Sin nombre";
            stageSel.appendChild(o);
        });
        if (activeId) stageSel.value = activeId;
        pintarSync();
        refreshSeqAddSelect();
        renderSeqList();
    }

    /* --- Secuencia autom\u00e1tica --- */
    // Restaura la configuración guardada de la secuencia y enlaza sus controles en la barra lateral.
    function initSeq() {
        restoreSeqConfig();
        updateSeqEndModeBtn();
        seqLoopGapInp.value = seqLoopGap;
        seqAddSelect.addEventListener("change", function () { if (seqAddSelect.value) addSeqItem(); });
        btnSeqEndMode.addEventListener("click", function () {
            setSeqEndMode(seqEndMode === "loop" ? "stop" : "loop");
            updateSeqEndModeBtn();
        });
        seqLoopGapInp.addEventListener("change", function () { setSeqLoopGap(seqLoopGapInp.value); });

        seqCountUp = localStorage.getItem(SEQ_COUNT_UP_LS_KEY) === "1";
        updateSeqDirectionBtn();
        btnSeqDirection.addEventListener("click", function () {
            seqCountUp = !seqCountUp;
            try { localStorage.setItem(SEQ_COUNT_UP_LS_KEY, seqCountUp ? "1" : "0"); } catch (_) { /* storage unavailable */ }
            updateSeqDirectionBtn();
        });
        btnSeqStart.addEventListener("click", function () {
            if (seqRunning) stopSeqPlayback(); else startSeqPlayback();
        });
        refreshSeqAddSelect();
        renderSeqList();
    }

    // Refleja el modo de fin actual (detener / repetir en bucle) en el icono y el título del botón.
    function updateSeqEndModeBtn() {
        var isLoop = seqEndMode === "loop";
        btnSeqEndMode.innerHTML = '<i class="bi bi-arrow-repeat"></i>';
        btnSeqEndMode.title = isLoop ? "Al terminar: repetir en bucle" : "Al terminar: detener";
        btnSeqEndMode.classList.toggle("active", isLoop);
    }

    // Refleja el sentido de la cuenta de la secuencia (atrás o hacia adelante) en el icono y el título del botón.
    function updateSeqDirectionBtn() {
        btnSeqDirection.innerHTML = seqCountUp ? '<i class="bi bi-arrow-up"></i>' : '<i class="bi bi-arrow-down"></i>';
        btnSeqDirection.title = seqCountUp ? "Cuenta hacia adelante" : "Cuenta atrás";
        btnSeqDirection.classList.toggle("active", seqCountUp);
    }

    // Actualiza la lectura "en marcha" de la barra inferior con el stage/pausa y los segundos, atrás o hacia
    // adelante según btn-seq-direction (independiente del sentido del temporizador), siempre con dos
    // decimales de precisión, igual que el temporizador de tiro.
    function updateSeqDisplay(remaining, opts) {
        var displayed = seqCountUp ? (opts.total - remaining) : remaining;
        var numTxt = formatTimerNum(displayed, 2);
        seqPanelStateEl.textContent = opts.label;
        seqPanelStateEl.classList.toggle("pause", !!opts.pause);
        seqPanelNumEl.textContent = numTxt;
        seqPanelNameEl.textContent = opts.name || "";
    }

    // Restaura la playlist, el modo de fin y la pausa de bucle desde localStorage, descartando ítems cuyo stage ya no exista.
    function restoreSeqConfig() {
        var cfg = null;
        try {
            var raw = localStorage.getItem(SEQ_LS_KEY);
            cfg = raw ? JSON.parse(raw) : null;
        } catch (_) { cfg = null; }
        var items = (cfg && Array.isArray(cfg.items)) ? cfg.items : [];
        seqItems = items.filter(function (it) {
            return it && it.stageId && stages.some(function (s) { return s.id === it.stageId; });
        }).map(function (it) {
            var sec = parseFloat(it.seconds);
            var itemGap = parseFloat(it.gap);
            return {
                uid: it.uid || genId(), stageId: it.stageId,
                seconds: (sec > 0) ? sec : SEQ_DEFAULT_SECONDS,
                gap: (itemGap >= 0) ? itemGap : 0
            };
        });
        seqEndMode = (cfg && (cfg.endMode === "loop" || cfg.endMode === "stop")) ? cfg.endMode : "stop";
        var gap = cfg ? parseFloat(cfg.loopGap) : NaN;
        seqLoopGap = (gap >= 0) ? gap : 3;
    }

    // Guarda la playlist, el modo de fin y la pausa de bucle en localStorage.
    function persistSeqConfig() {
        try {
            localStorage.setItem(SEQ_LS_KEY, JSON.stringify({
                items: seqItems, endMode: seqEndMode, loopGap: seqLoopGap
            }));
        } catch (_) { /* storage unavailable */ }
        programarCuenta();
    }

    // Repuebla el selector "Añadir stage" con los stages guardados.
    function refreshSeqAddSelect() {
        seqAddSelect.innerHTML = '<option value="">-- A\u00f1adir stage --</option>';
        stages.forEach(function (s) {
            var o = document.createElement("option");
            o.value = s.id; o.textContent = s.name || "Sin nombre";
            seqAddSelect.appendChild(o);
        });
    }

    // Devuelve el nombre de un stage por id (o un texto de aviso si fue eliminado).
    function getStageName(stageId) {
        for (var i = 0; i < stages.length; i++) { if (stages[i].id === stageId) return stages[i].name || "Sin nombre"; }
        return "(stage eliminado)";
    }

    // Repinta la lista de la playlist y bloquea/desbloquea sus controles según si está en marcha.
    function renderSeqList() {
        seqListEl.innerHTML = "";
        if (seqItems.length === 0) {
            seqListEl.innerHTML = '<div class="seq-empty">A\u00f1ade stages a la secuencia</div>';
        } else {
            seqItems.forEach(function (item, idx) {
                seqListEl.appendChild(createSeqItemDom(item, idx, seqItems.length));
            });
        }
        setSeqControlsDisabled(seqRunning);
    }

    // Resalta el chip del stage actualmente en reproducción en la barra inferior (-1 = ninguno).
    function setActiveSeqChip(index) {
        var chips = seqListEl.querySelectorAll(".seq-item");
        chips.forEach(function (el, i) { el.classList.toggle("active", i === index); });
        if (index >= 0 && chips[index]) chips[index].scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
    }

    // Clona la plantilla de un ítem de la secuencia y enlaza sus botones (subir/bajar/quitar/segundos/pausa).
    function createSeqItemDom(item, index, total) {
        var frag = seqItemTpl.content.cloneNode(true);
        var el = frag.querySelector(".seq-item");
        var nameEl = el.querySelector('[data-role="name"]');
        var removeBtn = el.querySelector('[data-role="remove"]');
        var upBtn = el.querySelector('[data-role="up"]');
        var downBtn = el.querySelector('[data-role="down"]');
        var secInp = el.querySelector('[data-role="seconds"]');
        var gapInp = el.querySelector('[data-role="gap"]');

        nameEl.textContent = getStageName(item.stageId);
        secInp.value = item.seconds;
        gapInp.value = item.gap || 0;
        upBtn.disabled = index === 0;
        downBtn.disabled = index === total - 1;

        removeBtn.addEventListener("click", function () { removeSeqItem(item.uid); });
        upBtn.addEventListener("click", function () { moveSeqItem(item.uid, -1); });
        downBtn.addEventListener("click", function () { moveSeqItem(item.uid, 1); });
        secInp.addEventListener("change", function () { updateSeqItemSeconds(item.uid, secInp.value); });
        gapInp.addEventListener("change", function () { updateSeqItemGap(item.uid, gapInp.value); });

        return el;
    }

    // Añade el stage elegido en el selector como nuevo ítem de la secuencia (sin pausa tras él) y limpia el selector.
    function addSeqItem() {
        var v = seqAddSelect.value;
        if (!v) return;
        seqItems.push({ uid: genId(), stageId: v, seconds: SEQ_DEFAULT_SECONDS, gap: 0 });
        seqAddSelect.value = "";
        persistSeqConfig();
        renderSeqList();
    }

    // Quita un ítem de la secuencia por su uid.
    function removeSeqItem(uid) {
        seqItems = seqItems.filter(function (it) { return it.uid !== uid; });
        persistSeqConfig();
        renderSeqList();
    }

    // Reordena un ítem de la secuencia una posición arriba o abajo.
    function moveSeqItem(uid, dir) {
        var idx = seqItems.findIndex(function (it) { return it.uid === uid; });
        var newIdx = idx + dir;
        if (idx < 0 || newIdx < 0 || newIdx >= seqItems.length) return;
        var tmp = seqItems[idx];
        seqItems[idx] = seqItems[newIdx];
        seqItems[newIdx] = tmp;
        persistSeqConfig();
        renderSeqList();
    }

    // Actualiza la duración (segundos) de un ítem de la secuencia.
    function updateSeqItemSeconds(uid, raw) {
        var item = seqItems.filter(function (it) { return it.uid === uid; })[0];
        if (!item) return;
        var val = parseFloat(raw);
        item.seconds = (val > 0) ? val : SEQ_DEFAULT_SECONDS;
        persistSeqConfig();
    }

    // Actualiza la pausa (en segundos) tras un ítem de la secuencia, antes de mostrar el siguiente (0 = sin pausa).
    function updateSeqItemGap(uid, raw) {
        var item = seqItems.filter(function (it) { return it.uid === uid; })[0];
        if (!item) return;
        var val = parseFloat(raw);
        item.gap = (val >= 0) ? val : 0;
        persistSeqConfig();
    }

    // Cambia el modo de fin de la secuencia (detener / repetir en bucle).
    function setSeqEndMode(mode) {
        seqEndMode = (mode === "loop") ? "loop" : "stop";
        persistSeqConfig();
    }

    // Actualiza la pausa antes de repetir el bucle.
    function setSeqLoopGap(raw) {
        var val = parseFloat(raw);
        seqLoopGap = (val >= 0) ? val : 3;
        seqLoopGapInp.value = seqLoopGap;
        persistSeqConfig();
    }

    // Activa o desactiva todos los controles de edición de la playlist.
    function setSeqControlsDisabled(disabled) {
        seqAddSelect.disabled = disabled;
        btnSeqEndMode.disabled = disabled;
        seqLoopGapInp.disabled = disabled;
        seqListEl.querySelectorAll("button, input").forEach(function (el) { el.disabled = disabled; });
    }

    // Botón "Iniciar secuencia": valida que haya ítems y la arranca.
    function startSeqPlayback() {
        if (seqItems.length === 0) { toast("A\u00f1ade al menos un stage a la secuencia"); return; }
        if (timerRunning) stopSequence();
        if (shouldStartRecording()) {
            startRecording().then(beginSeqPlayback, beginSeqPlayback);
        } else {
            beginSeqPlayback();
        }
    }

    // Pone la UI de la secuencia en estado "en marcha" (botón, controles, lectura de la barra inferior).
    function activateSeqSession() {
        seqRunning = true;
        btnSeqStart.classList.add("running");
        btnSeqStart.innerHTML = '<i class="bi bi-stop-fill"></i>';
        btnSeqStart.title = "Detener secuencia";
        setSeqControlsDisabled(true);
        seqbar.classList.add("running");
    }

    /* La secuencia siempre arranca con la pausa configurada (misma duraci\u00f3n que la pausa
       de bucle) antes de mostrar el primer ejercicio: da tiempo a prepararse y, si hay
       grabaci\u00f3n en curso, su se\u00f1al real de MediaRecorder.start() se programa REC_LEAD_MS
       antes de que acabe esa pausa, para que ya est\u00e9 grabando cuando aparezca el stage. */
    function beginSeqPlayback() {
        activateSeqSession();
        scheduleRecordingStart(seqLoopGap);
        playSeqPause("Preparados", seqLoopGap, function () { playSeqItem(0); });
    }

    // Detiene la secuencia, para también el temporizador si estaba corriendo junto a ella, y libera la grabación.
    function stopSeqPlayback() {
        if (!seqRunning) return;
        seqRunning = false;
        if (seqRAF) { cancelAnimationFrame(seqRAF); seqRAF = null; }
        btnSeqStart.classList.remove("running");
        btnSeqStart.innerHTML = '<i class="bi bi-play-fill"></i>';
        btnSeqStart.title = "Iniciar secuencia";
        setSeqControlsDisabled(false);
        seqbar.classList.remove("running");
        seqPanelStateEl.classList.remove("pause");
        setActiveSeqChip(-1);
        if (timerRunning) stopSequence();
        stopRecording();
    }

    // Muestra el stage indicado de la playlist (con un pitido de aviso) y, tras su duración, pasa al siguiente
    // (con la pausa propia de este ítem de por medio, si tiene una configurada y no es el último).
    function playSeqItem(index) {
        if (!seqRunning) return;
        if (index >= seqItems.length) {
            if (seqEndMode === "loop") { playSeqLoopPause(); } else { beepEnd(); clearAll(); stopSeqPlayback(); toast("Secuencia finalizada"); }
            return;
        }
        seqIndex = index;
        var item = seqItems[index];
        if (!stages.some(function (s) { return s.id === item.stageId; })) {
            playSeqItem(index + 1);
            return;
        }
        loadStage(item.stageId);
        beepStart();
        setActiveSeqChip(index);
        var label = "Stage " + (index + 1) + "/" + seqItems.length;
        var name = getStageName(item.stageId);
        runSeqPhase(item.seconds, function (remaining) {
            updateSeqDisplay(remaining, { label: label, name: name, pause: false, total: item.seconds });
        }, function () {
            var isLast = index + 1 >= seqItems.length;
            var gap = item.gap || 0;
            if (!isLast && gap > 0) {
                playSeqPause("Pausa", gap, function () { playSeqItem(index + 1); });
            } else {
                playSeqItem(index + 1);
            }
        });
    }

    // Cuenta atrás de una pausa de la secuencia (inicio, entre ejercicios o antes de repetir en bucle):
    // limpia el stage y la muestra con la duración indicada.
    function playSeqPause(label, durationSec, onDone) {
        clearAll();
        runSeqPhase(durationSec, function (remaining) {
            updateSeqDisplay(remaining, { label: label, name: "", pause: true, total: durationSec });
        }, onDone);
    }

    // Cuenta atrás de la pausa antes de reiniciar el bucle en el primer stage.
    function playSeqLoopPause() {
        playSeqPause("Pausa antes de repetir", seqLoopGap, function () { playSeqItem(0); });
    }

    // Primitiva de cuenta atrás con requestAnimationFrame reutilizada por playSeqItem y playSeqLoopPause.
    function runSeqPhase(durationSec, onTick, onDone) {
        var start = performance.now();
        var end = start + Math.max(0, durationSec) * 1000;
        function tick(now) {
            if (!seqRunning) return;
            var remaining = Math.max(0, (end - now) / 1000);
            onTick(remaining);
            if (now >= end) { onDone(); return; }
            seqRAF = requestAnimationFrame(tick);
        }
        seqRAF = requestAnimationFrame(tick);
    }

    // Construye los botones de la paleta de tipos de diana.
    function buildPalette() {
        var p = document.getElementById("target-palette");
        TARGET_TYPES.forEach(function(t) {
            var btn = document.createElement("button");
            btn.className = "palette-item";
            btn.title = t.name;
            btn.innerHTML = '<img src="' + IMG[t.type] + '" alt="' + t.name + '"><span>' + t.name + '</span>';
            btn.addEventListener("click", function() { addTarget(t.type); });
            p.appendChild(btn);
        });
    }

    // Recoge el estado (posición, tipo, rotación, tamaño) de todas las dianas del lienzo.
    function collectTargets() {
        var out = [];
        tLayer.querySelectorAll(".target").forEach(function(el) { out.push(readTarget(el)); });
        return out;
    }

    // Lee el estado de una diana concreta a partir de su elemento del DOM.
    function readTarget(el) {
        var l = parseFloat(el.style.left) || 0;
        var t = parseFloat(el.style.top) || 0;
        var w = parseFloat(el.style.width) || 0;
        var h = parseFloat(el.style.height) || 0;
        return {
            id: el.dataset.id, type: el.dataset.type,
            x: l + w / 2, y: t + h / 2,
            rot: parseInt(el.dataset.rot) || 0, z: parseInt(el.style.zIndex) || 1,
            scale: parseFloat(el.dataset.scale) || 1,
            cover: el.dataset.cover || ""
        };
    }

    // Vacía el lienzo y la selección actual.
    function clearAll() { tLayer.innerHTML = ""; selTargets = []; }

    // Añade una diana nueva del tipo elegido cerca del centro del lienzo.
    function addTarget(type) {
        var off = (Math.random() - 0.5) * 120;
        createTarget({ id: genId(), type: type, x: off, y: ESCENA_H / 2 + off, rot: 0, z: 1 });
    }

    // Crea el elemento DOM de una diana y lo añade al lienzo (autoSelect controla si queda seleccionada).
    function createTarget(d, autoSelect) {
        // El popper es único: los antiguos "mini" pasan a popper con su tamaño (55/83 px de alto).
        if (d.type === "mini") { d.type = "popper"; d.scale = (d.scale || 1) * 55 / 83; }
        var scale = d.scale || 1;
        var el = document.createElement("div");
        el.className = "target pop";
        el.dataset.id = d.id; el.dataset.type = d.type; el.dataset.rot = d.rot || 0;
        el.dataset.scale = scale;
        el.dataset.cover = COVER_BASE[d.type] ? (d.cover || "") : "";
        if (!SIZE[d.type]) d.type = el.dataset.type = "classic";
        var w = SIZE[d.type][0] * scale, h = SIZE[d.type][1] * scale;
        el.style.left = (d.x - w/2) + "px";
        el.style.top = (d.y - h/2) + "px";
        el.style.width = w + "px";
        el.style.height = h + "px";
        el.style.zIndex = d.z || 1;
        el.style.transform = "rotate(" + (d.rot || 0) + "deg)";
        el.innerHTML = '<img src="' + imgSrc(d.type, el.dataset.cover) + '" alt="' + d.type + '"><div class="rsz-handle"></div>';
        el.addEventListener("pointerdown", targetDown);
        el.addEventListener("wheel", targetWheel, { passive: false });
        el.addEventListener("contextmenu", targetCtx);
        tLayer.appendChild(el);
        if (autoSelect !== false) select(el, false);
        return el;
    }

    // Devuelve todos los elementos de diana presentes en el lienzo.
    function getAllTargets() { return tLayer.querySelectorAll(".target"); }

    // Selecciona una diana (con Shift, añade o quita de la selección múltiple).
    function select(el, shiftKey) {
        if (shiftKey) {
            var idx = selTargets.indexOf(el);
            if (idx >= 0) {
                el.classList.remove("sel");
                selTargets.splice(idx, 1);
            } else {
                el.classList.add("sel");
                selTargets.push(el);
            }
        } else {
            deselect();
            el.classList.add("sel");
            selTargets.push(el);
        }
    }
    // Vacía la selección actual.
    function deselect() {
        selTargets.forEach(function(t) { t.classList.remove("sel"); });
        selTargets = [];
    }

    // Maneja el inicio de arrastre (o clic de selección) sobre una diana.
    function targetDown(e) {
        if (e.button !== 0) return;
        if (e.target.classList.contains("rsz-handle")) {
            e.preventDefault(); e.stopPropagation();
            resizeDown(e);
            return;
        }
        e.preventDefault(); e.stopPropagation();
        var el = e.currentTarget;

        if (e.shiftKey) {
            // Shift+click: toggle selection, no drag
            select(el, true);
            return;
        }

        // If clicking an unselected target, select only it
        if (selTargets.indexOf(el) < 0) {
            select(el, false);
        }
        // If clicking on an already-selected target, keep group selection

        // Drag all selected targets
        var targets = selTargets.length > 0 ? selTargets.slice() : [el];
        targets.forEach(function(t) { t.classList.add("drag"); });
        el.setPointerCapture(e.pointerId);
        var cr = canvas.getBoundingClientRect();

        var starts = targets.map(function(t) {
            return {
                el: t,
                sx: parseFloat(t.style.left),
                sy: parseFloat(t.style.top)
            };
        });

        var baseX = e.clientX, baseY = e.clientY;

        function onMove(ev) {
            var dx = (ev.clientX - baseX) / escalaK, dy = (ev.clientY - baseY) / escalaK;   // píxeles → unidades
            starts.forEach(function(s) {
                var nx = s.sx + dx, ny = s.sy + dy;
                if (snapOn) {
                    nx = Math.round(nx / SNAP) * SNAP;
                    ny = Math.round(ny / SNAP) * SNAP;
                }
                s.el.style.left = nx + "px";
                s.el.style.top = ny + "px";
            });
        }

        function onUp() {
            targets.forEach(function(t) { t.classList.remove("drag"); });
            el.releasePointerCapture(e.pointerId);
            dragging = null;
            canvas.removeEventListener("pointermove", onMove);
            canvas.removeEventListener("pointerup", onUp);
            canvas.removeEventListener("pointercancel", onUp);
        }

        canvas.addEventListener("pointermove", onMove);
        canvas.addEventListener("pointerup", onUp);
        canvas.addEventListener("pointercancel", onUp);
    }

    // Deselecciona todo al hacer clic en una zona vacía del lienzo.
    function canvasDown(e) { if (e.target === canvas || e.target === tLayer) { deselect(); hideCtx(); } }

    // Rota la diana (o el grupo seleccionado) con la rueda del ratón.
    function targetWheel(e) {
        e.preventDefault();
        var el = e.currentTarget;
        // If part of selected group, rotate all
        var targets = selTargets.length > 0 && selTargets.indexOf(el) >= 0 ? selTargets : [el];
        targets.forEach(function(t) {
            var cur = parseInt(t.dataset.rot) || 0, d = e.deltaY > 0 ? 15 : -15, nxt = (cur + d) % 360;
            t.dataset.rot = nxt; t.style.transform = "rotate(" + nxt + "deg)";
        });
    }

    /* --- Resize --- */
    var resizing = null;
    // Maneja el redimensionado de una diana arrastrando su tirador.
    function resizeDown(e) {
        var el = e.currentTarget.closest(".target");
        el.setPointerCapture(e.pointerId);
        var cr = canvas.getBoundingClientRect();
        var baseW = SIZE[el.dataset.type][0], baseH = SIZE[el.dataset.type][1];
        var centerX = parseFloat(el.style.left) + parseFloat(el.style.width) / 2;
        var centerY = parseFloat(el.style.top) + parseFloat(el.style.height) / 2;

        resizing = {
            el: el,
            cx: cr.left + cr.width / 2 + centerX * escalaK,   // centro de la diana en la pantalla
            cy: cr.top + centerY * escalaK,
            baseW: baseW, baseH: baseH,
            pid: e.pointerId
        };

        function onMove(ev) {
            if (!resizing || resizing.el !== el) return;
            var dx = ev.clientX - resizing.cx, dy = ev.clientY - resizing.cy;
            var dist = Math.sqrt(dx*dx + dy*dy) / escalaK;
            var baseHalfDiag = Math.sqrt(resizing.baseW*resizing.baseW + resizing.baseH*resizing.baseH) / 2;
            var s = Math.max(0.3, Math.min(3, dist / baseHalfDiag));
            if (snapOn) s = Math.round(s * 10) / 10;
            el.dataset.scale = s;
            var nw = resizing.baseW * s, nh = resizing.baseH * s;
            if (snapOn) { nw = Math.round(nw / SNAP) * SNAP; nh = Math.round(nh / SNAP) * SNAP; }
            el.style.width = nw + "px"; el.style.height = nh + "px";
            el.style.left = (centerX - nw/2) + "px";
            el.style.top = (centerY - nh/2) + "px";
        }

        function onUp() {
            if (!resizing) return;
            resizing.el.releasePointerCapture(resizing.pid);
            resizing = null;
            canvas.removeEventListener("pointermove", onMove);
            canvas.removeEventListener("pointerup", onUp);
            canvas.removeEventListener("pointercancel", onUp);
        }

        canvas.addEventListener("pointermove", onMove);
        canvas.addEventListener("pointerup", onUp);
        canvas.addEventListener("pointercancel", onUp);
    }

    // Abre el menú contextual sobre una diana.
    function targetCtx(e) {
        e.preventDefault();
        var el = e.currentTarget;
        if (selTargets.indexOf(el) < 0) {
            select(el, e.shiftKey);
        }
        ctxTarget = el;
        ctxMenu.style.left = e.clientX + "px"; ctxMenu.style.top = e.clientY + "px";
        ctxMenu.classList.add("show");
    }
    // Cierra el menú contextual.
    function hideCtx() { ctxMenu.classList.remove("show"); ctxTarget = null; }

    // Enlaza las acciones del menú contextual (rotar, duplicar, ordenar, eliminar).
    function bindCtxMenu() {
        ctxMenu.querySelectorAll("button").forEach(function(btn) {
            btn.addEventListener("click", function() {
                if (!ctxTarget) return;
                var targets = selTargets.length > 0 ? selTargets.slice() : [ctxTarget];
                var a = btn.dataset.action;
                switch (a) {
                    case "rotate-cw": targets.forEach(function(t) { rotTarget(t, 15); }); break;
                    case "rotate-ccw": targets.forEach(function(t) { rotTarget(t, -15); }); break;
                    case "cover": targets.forEach(function(t) { cycleCover(t); }); break;
                    case "duplicate": targets.forEach(function(t) { dupTarget(t); }); break;
                    case "front": targets.forEach(function(t) { bringToFront(t); }); break;
                    case "back": targets.forEach(function(t) { sendToBack(t); }); break;
                    case "delete": targets.forEach(function(t) { delTarget(t); }); break;
                }
                hideCtx();
            });
        });
    }

    // Rota una diana el ángulo indicado.
    function rotTarget(el, deg) {
        var cur = parseInt(el.dataset.rot) || 0, nxt = (cur + deg) % 360;
        el.dataset.rot = nxt; el.style.transform = "rotate(" + nxt + "deg)";
    }

    // Pasa al siguiente hard cover (ninguno → arriba → derecha → abajo → izquierda) en tarjetas y no-shoots.
    function cycleCover(el) {
        if (!COVER_BASE[el.dataset.type]) return;
        var next = COVERS[(COVERS.indexOf(el.dataset.cover || "") + 1) % COVERS.length];
        el.dataset.cover = next;
        el.querySelector("img").src = imgSrc(el.dataset.type, next);
    }

    // Duplica una diana con un pequeño desplazamiento.
    function dupTarget(el) {
        var d = readTarget(el); d.id = genId(); d.x += 50; d.y += 50; createTarget(d);
    }

    // Elimina una diana del lienzo y de la selección.
    function delTarget(el) {
        el.remove();
        var idx = selTargets.indexOf(el);
        if (idx >= 0) selTargets.splice(idx, 1);
    }

    // Sube una diana al frente (z-index más alto).
    function bringToFront(el) {
        var maxZ = 0;
        tLayer.querySelectorAll(".target").forEach(function(t) {
            var z = parseInt(t.style.zIndex) || 1;
            if (z > maxZ) maxZ = z;
        });
        el.style.zIndex = maxZ + 1;
    }

    // Manda una diana al fondo (z-index más bajo).
    function sendToBack(el) {
        var minZ = Infinity;
        tLayer.querySelectorAll(".target").forEach(function(t) {
            if (t === el) return;
            var z = parseInt(t.style.zIndex) || 1;
            if (z < minZ) minZ = z;
        });
        el.style.zIndex = Math.max(0, (minZ === Infinity ? 1 : minZ - 1));
    }

    // Enlaza los atajos de teclado (borrar, escape, guardar, nuevo, seleccionar todo, ocultar barra).
    function bindKeys() {
        document.addEventListener("keydown", function(e) {
            if (e.target.tagName === "INPUT" || e.target.tagName === "SELECT") return;
            switch (e.key) {
                case "Delete": case "Backspace":
                    selTargets.slice().forEach(function(t) { delTarget(t); });
                    break;
                case "Escape": deselect(); hideCtx(); if (timerRunning) stopSequence(); if (seqRunning) stopSeqPlayback(); break;
                case "s": case "S": if (e.ctrlKey || e.metaKey) { e.preventDefault(); saveStage(); } break;
                case "n": case "N": if (e.ctrlKey || e.metaKey) { e.preventDefault(); newStage(); } break;
                case "a": case "A":
                    if (e.ctrlKey || e.metaKey) {
                        e.preventDefault();
                        deselect();
                        getAllTargets().forEach(function(t) { t.classList.add("sel"); selTargets.push(t); });
                    }
                    break;
                case "t": case "T": if (!e.ctrlKey && !e.metaKey) { document.getElementById("toolbar").classList.toggle("off"); } break;
                // Con dianas seleccionadas: flechas para moverlas y + / - para su tamaño.
                case "ArrowLeft": case "ArrowRight": case "ArrowUp": case "ArrowDown":
                    if (!selTargets.length || e.ctrlKey || e.metaKey || e.altKey) break;
                    e.preventDefault();
                    var paso = (snapOn ? SNAP : 2) * (e.shiftKey ? 5 : 1);
                    moverSeleccion(e.key === "ArrowLeft" ? -paso : e.key === "ArrowRight" ? paso : 0,
                                   e.key === "ArrowUp" ? -paso : e.key === "ArrowDown" ? paso : 0);
                    break;
                case "+": case "-":
                    if (!selTargets.length || e.ctrlKey || e.metaKey) break;   // Ctrl + / -: zoom del navegador
                    e.preventDefault();
                    escalarSeleccion(e.key === "+" ? 0.1 : -0.1);
                    break;
            }
        });
    }

    // Mueve la selección (unidades de la escena); con snap, cada diana se alinea antes a la rejilla, así un
    // paso la lleva a la siguiente línea.
    function moverSeleccion(dx, dy) {
        selTargets.forEach(function (el) {
            var l = parseFloat(el.style.left) || 0, t = parseFloat(el.style.top) || 0;
            if (snapOn) { l = Math.round(l / SNAP) * SNAP; t = Math.round(t / SNAP) * SNAP; }
            el.style.left = (l + dx) + "px";
            el.style.top = (t + dy) + "px";
        });
    }

    // Cambia el tamaño de la selección (`d` = ±0,1 de escala, entre 0,3 y 3) sin mover el centro de cada diana.
    function escalarSeleccion(d) {
        selTargets.forEach(function (el) {
            var s = Math.round(Math.max(0.3, Math.min(3, (parseFloat(el.dataset.scale) || 1) + d)) * 100) / 100;
            var cx = (parseFloat(el.style.left) || 0) + (parseFloat(el.style.width) || 0) / 2;
            var cy = (parseFloat(el.style.top) || 0) + (parseFloat(el.style.height) || 0) / 2;
            var w = SIZE[el.dataset.type][0] * s, h = SIZE[el.dataset.type][1] * s;
            el.dataset.scale = s;
            el.style.width = w + "px"; el.style.height = h + "px";
            el.style.left = (cx - w / 2) + "px"; el.style.top = (cy - h / 2) + "px";
        });
        if (selTargets.length === 1) toast("Tamaño: " + String(parseFloat(selTargets[0].dataset.scale).toFixed(1)).replace(".", ",") + "×");
    }

    // Activa o desactiva el ajuste a la rejilla.
    function togSnap() {
        snapOn = !snapOn;
        btnSnap.classList.toggle("active", snapOn);
        grid.classList.toggle("on", snapOn);
        toast(snapOn ? "Snap: ON" : "Snap: OFF");
    }

    // Muestra un aviso temporal en la parte inferior de la pantalla.
    function toast(msg) {
        if (toastTimer) clearTimeout(toastTimer);
        toastEl.textContent = msg; toastEl.classList.add("on");
        toastTimer = setTimeout(function() { toastEl.classList.remove("on"); }, 2000);
    }

    // Genera un identificador único simple.
    function genId() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 9); }

    /* --- Timer --- */
    // Restaura la configuración guardada del temporizador y enlaza el botón de inicio y el arrastre del panel.
    function initTimer() {
        try {
            var raw = localStorage.getItem(TIMER_LS_KEY);
            var cfg = raw ? JSON.parse(raw) : null;
            if (cfg) {
                if (cfg.duration) timerDurationInp.value = cfg.duration;
                if (cfg.reps) timerRepsInp.value = cfg.reps;
                if (cfg.gap != null) timerGapInp.value = cfg.gap;
            }
        } catch (_) { /* ignore malformed config */ }

        recordEnabled = localStorage.getItem(RECORD_ENABLED_LS_KEY) === "1";
        updateRecordToggleBtn();
        recordToggleBtns.forEach(function (btn) {
            btn.addEventListener("click", function () {
                recordEnabled = !recordEnabled;
                try { localStorage.setItem(RECORD_ENABLED_LS_KEY, recordEnabled ? "1" : "0"); } catch (_) { /* storage unavailable */ }
                updateRecordToggleBtn();
            });
        });

        timerCountUp = localStorage.getItem(TIMER_COUNT_UP_LS_KEY) === "1";
        updateTimerDirectionBtn();
        btnTimerDirection.addEventListener("click", function () {
            timerCountUp = !timerCountUp;
            try { localStorage.setItem(TIMER_COUNT_UP_LS_KEY, timerCountUp ? "1" : "0"); } catch (_) { /* storage unavailable */ }
            updateTimerDirectionBtn();
        });

        btnTimerStart.addEventListener("click", function () {
            if (timerRunning) { stopSequence(); return; }
            if (seqRunning) stopSeqPlayback();
            if (shouldStartRecording()) {
                startRecording().then(startSequence, startSequence);
            } else {
                startSequence();
            }
        });
    }

    // Crea (o reactiva) el AudioContext compartido para los pitidos y la grabación.
    function ensureAudio() {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            beepBus = audioCtx.createGain();
            beepBus.connect(audioCtx.destination);
        }
        if (audioCtx.state === "suspended") audioCtx.resume();
    }

    // Genera un pitido con un oscilador Web Audio.
    function beep(freq, durMs, delayMs) {
        ensureAudio();
        var startAt = audioCtx.currentTime + (delayMs || 0) / 1000;
        var osc = audioCtx.createOscillator();
        var gain = audioCtx.createGain();
        osc.type = "square";
        osc.frequency.value = freq;
        gain.gain.setValueAtTime(0.35, startAt);
        gain.gain.exponentialRampToValueAtTime(0.001, startAt + durMs / 1000);
        osc.connect(gain);
        gain.connect(beepBus);
        osc.start(startAt);
        osc.stop(startAt + durMs / 1000);
    }

    // Pitido agudo al iniciar cada cuenta atrás.
    function beepStart() { beep(1500, 350); }
    // Doble pitido grave al finalizar cada cuenta atrás.
    function beepEnd() { beep(700, 260); beep(700, 260, 300); }

    // Formatea un número de segundos con los decimales indicados.
    function formatTimerNum(sec, decimals) {
        return Math.max(0, sec).toFixed(decimals);
    }

    // Cuenta la serie del temporizador (atrás o hacia adelante, según btn-timer-direction), con pitidos de inicio y fin.
    function runCountdown(durationSec, onDone) {
        beepStart();
        var decimals = 2;
        var start = performance.now();
        var end = start + durationSec * 1000;
        timerStateEl.textContent = "¡En marcha!";
        timerStateEl.className = "go";

        function tick(now) {
            var remaining = Math.max(0, (end - now) / 1000);
            var displayed = timerCountUp ? (durationSec - remaining) : remaining;
            timerNumEl.textContent = formatTimerNum(displayed, decimals);
            if (now >= end) {
                timerNumEl.textContent = formatTimerNum(timerCountUp ? durationSec : 0, decimals);
                timerNumEl.classList.add("flash");
                beepEnd();
                setTimeout(function () { timerNumEl.classList.remove("flash"); }, 350);
                onDone();
                return;
            }
            timerRAF = requestAnimationFrame(tick);
        }
        timerRAF = requestAnimationFrame(tick);
    }

    // Arranca la secuencia de repeticiones del temporizador de tiro.
    function startSequence() {
        timerDuration = Math.max(0.1, parseFloat(timerDurationInp.value) || 4);
        timerDurationInp.value = timerDuration;
        timerRepsTotal = Math.max(1, parseInt(timerRepsInp.value, 10) || 1);
        var gap = parseFloat(timerGapInp.value);
        if (!(gap >= 0)) gap = 6;
        timerGapInp.value = gap;
        try {
            localStorage.setItem(TIMER_LS_KEY, JSON.stringify({
                duration: timerDuration, reps: timerRepsTotal, gap: gap
            }));
        } catch (_) { /* storage unavailable */ }

        timerRunning = true;
        timerRepsDone = 0;
        btnTimerStart.classList.add("running");
        btnTimerStart.innerHTML = '<i class="bi bi-stop-fill"></i>';
        btnTimerStart.title = "Detener temporizador";
        timerRepEl.textContent = timerRepsTotal > 1 ? "Serie 1 / " + timerRepsTotal : "";
        scheduleRecordingStart(gap);
        pauseThen(nextRep);
    }

    // Programa el arranque real de MediaRecorder unos instantes antes del pitido o de que aparezca el primer stage.
    function scheduleRecordingStart(gapSec) {
        /* Idempotente: en una sesión sincronizada, tanto el temporizador como la
           secuencia intentan programar el arranque; solo la primera llamada cuenta. */
        if (!mediaRecorder || recordingStartTO || isRecording) return;
        var leadMs = Math.max(0, gapSec * 1000 - REC_LEAD_MS);
        recordingStartTO = setTimeout(function () {
            recordingStartTO = null;
            if (mediaRecorder && mediaRecorder.state === "inactive") {
                mediaRecorder.start();
                isRecording = true;
                recBadge.classList.add("on");
            }
        }, leadMs);
    }

    // Cuenta atrás de la pausa entre series (y antes de la primera).
    function pauseThen(cb) {
        timerStateEl.textContent = "Pausa";
        timerStateEl.className = "pause";
        var gapMs = Math.max(0, parseFloat(timerGapInp.value) || 0) * 1000;
        var gapStart = performance.now();
        (function tickGap(now) {
            if (!timerRunning) return;
            var remaining = Math.max(0, (gapStart + gapMs - now) / 1000);
            timerNumEl.textContent = formatTimerNum(remaining, 0);
            if (now >= gapStart + gapMs) { cb(); return; }
            timerRAF = requestAnimationFrame(tickGap);
        })(performance.now());
    }

    // Ejecuta la siguiente repetición del temporizador.
    function nextRep() {
        if (!timerRunning) return;
        timerRepsDone++;
        timerRepEl.textContent = timerRepsTotal > 1 ? "Serie " + timerRepsDone + " / " + timerRepsTotal : "";
        runCountdown(timerDuration, function () {
            if (!timerRunning) return;
            if (timerRepsDone < timerRepsTotal) {
                pauseThen(nextRep);
            } else {
                timerStateEl.textContent = "Fin";
                timerStateEl.className = "";
                timerGapTO = setTimeout(stopSequence, 900);
            }
        });
    }

    // Detiene el temporizador de tiro, para también la secuencia si estaba corriendo junto a él, y libera la grabación.
    function stopSequence() {
        timerRunning = false;
        if (timerRAF) { cancelAnimationFrame(timerRAF); timerRAF = null; }
        if (timerGapTO) { clearTimeout(timerGapTO); timerGapTO = null; }
        timerStateEl.textContent = "Preparado";
        timerStateEl.className = "";
        timerRepEl.textContent = "";
        timerNumEl.textContent = "0.00";
        btnTimerStart.classList.remove("running");
        btnTimerStart.innerHTML = '<i class="bi bi-play-fill"></i>';
        btnTimerStart.title = "Iniciar temporizador";
        if (seqRunning) stopSeqPlayback();
        stopRecording();
    }

    /* --- Grabación (pantalla + cámara + micrófono + pitidos + tarjetas) --- */
    function startRecording() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
            toast("Grabación de pantalla no disponible en este navegador");
            return Promise.reject();
        }
        return navigator.mediaDevices.getDisplayMedia({ video: true, audio: true, preferCurrentTab: true }).then(function (stream) {
            screenStream = stream;
            recordedChunks = [];
            var recStream = buildRecordingStream(stream);
            var mimeType = pickMimeType();
            try {
                mediaRecorder = mimeType ? new MediaRecorder(recStream, { mimeType: mimeType }) : new MediaRecorder(recStream);
            } catch (err) {
                teardownRecordingAudio();
                stream.getTracks().forEach(function (t) { t.stop(); });
                screenStream = null;
                toast("No se pudo iniciar la grabación");
                return;
            }
            mediaRecorder.addEventListener("dataavailable", function (e) {
                if (e.data && e.data.size > 0) recordedChunks.push(e.data);
            });
            mediaRecorder.addEventListener("stop", finalizeRecording);
            stream.getVideoTracks()[0].addEventListener("ended", function () {
                if (timerRunning) stopSequence(); else if (seqRunning) stopSeqPlayback(); else stopRecording();
            });
            /* No se arranca aquí: se programa 1s antes del primer pitido, ver scheduleRecordingStart() */
        }).catch(function () {
            toast("Grabación cancelada");
        });
    }

    /* Mezcla en un único track de audio: pitidos del temporizador + micrófono de cada
       cámara activa (si tiene) + audio de pantalla compartida (si el usuario lo autorizó). */
    function buildRecordingStream(dispStream) {
        ensureAudio();
        var dest = audioCtx.createMediaStreamDestination();
        recAudioDest = dest;
        beepBus.connect(dest);
        camPanels.forEach(function (p) {
            if (p.stream && p.stream.getAudioTracks().length) {
                try {
                    p.micSource = audioCtx.createMediaStreamSource(new MediaStream(p.stream.getAudioTracks()));
                    p.micSource.connect(dest);
                    recMicSources.push(p.micSource);
                } catch (_) { p.micSource = null; }
            }
        });
        if (dispStream.getAudioTracks().length) {
            try {
                recScreenAudioSource = audioCtx.createMediaStreamSource(new MediaStream(dispStream.getAudioTracks()));
                recScreenAudioSource.connect(dest);
            } catch (_) { recScreenAudioSource = null; }
        }
        var combined = new MediaStream();
        dispStream.getVideoTracks().forEach(function (t) { combined.addTrack(t); });
        dest.stream.getAudioTracks().forEach(function (t) { combined.addTrack(t); });
        return combined;
    }

    // Desconecta todas las fuentes de audio mezcladas para la grabación (pitidos, micrófonos, audio de pantalla).
    function teardownRecordingAudio() {
        if (beepBus && recAudioDest) { try { beepBus.disconnect(recAudioDest); } catch (_) { /* already disconnected */ } }
        recMicSources.forEach(function (src) { try { src.disconnect(); } catch (_) { /* already disconnected */ } });
        recMicSources = [];
        camPanels.forEach(function (p) { p.micSource = null; });
        if (recScreenAudioSource) { try { recScreenAudioSource.disconnect(); } catch (_) { /* already disconnected */ } recScreenAudioSource = null; }
        recAudioDest = null;
    }

    // Desconecta y olvida la fuente de audio de grabación de un panel de cámara concreto.
    function dropCamPanelAudioSource(panel) {
        if (panel.micSource) {
            try { panel.micSource.disconnect(); } catch (_) { /* already disconnected */ }
            var idx = recMicSources.indexOf(panel.micSource);
            if (idx >= 0) recMicSources.splice(idx, 1);
            panel.micSource = null;
        }
    }

    // Detiene la grabación en curso, si la hay, y libera cámara/pantalla/audio asociados.
    function stopRecording() {
        if (recordingStartTO) { clearTimeout(recordingStartTO); recordingStartTO = null; }
        var wasRecording = isRecording;
        isRecording = false;
        recBadge.classList.remove("on");
        if (wasRecording && mediaRecorder && mediaRecorder.state !== "inactive") mediaRecorder.stop();
        mediaRecorder = null;
        teardownRecordingAudio();
        if (screenStream) {
            screenStream.getTracks().forEach(function (t) { t.stop(); });
            screenStream = null;
        }
    }

    // Genera el blob final del vídeo y lo descarga.
    function finalizeRecording() {
        if (!recordedChunks.length) return;
        var type = recordedChunks[0].type || "video/webm";
        var blob = new Blob(recordedChunks, { type: type });
        recordedChunks = [];
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = buildRecordingFilename(type.indexOf("mp4") >= 0 ? "mp4" : "webm");
        document.body.appendChild(a);
        a.click();
        a.remove();
        setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
        toast("Grabación descargada");
    }

    // Construye el nombre del archivo de vídeo a partir del stage activo y la fecha.
    function buildRecordingFilename(ext) {
        var name = (nameInp.value || "dryfire").trim().replace(/[^a-z0-9]+/gi, "-").toLowerCase() || "dryfire";
        var ts = new Date().toISOString().replace(/[:.]/g, "-");
        return "dryfire-" + name + "-" + ts + "." + (ext || "webm");
    }

    /* Elige el mejor mimeType de vídeo soportado por el navegador para la
       grabación: MP4 primero (no es universal — Firefox no lo soporta en
       absoluto como formato de grabación, y el soporte en Chromium varía
       según versión/SO), cayendo a WebM si no está disponible. */
    function pickMimeType() {
        if (!window.MediaRecorder || !MediaRecorder.isTypeSupported) return "";
        var candidates = [
            'video/mp4;codecs="avc1.42E01E,mp4a.40.2"',
            "video/mp4",
            "video/webm;codecs=vp9,opus",
            "video/webm;codecs=vp9",
            "video/webm;codecs=vp8",
            "video/webm"
        ];
        for (var i = 0; i < candidates.length; i++) {
            if (MediaRecorder.isTypeSupported(candidates[i])) return candidates[i];
        }
        return "";
    }

    /* --- Cámara --- */
    // Crea el panel de cámara primario, restaura los paneles extra guardados y enlaza los dos botones
    // de mostrar/ocultar cámara (barra derecha y barra inferior, independientes con estado compartido).
    function initCam() {
        addCamPanel({ primary: true, deviceId: localStorage.getItem(CAM_DEVICE_LS_KEY) || "" });
        restoreCamPanelsExtra();
        if (navigator.mediaDevices && navigator.mediaDevices.addEventListener) {
            navigator.mediaDevices.addEventListener("devicechange", function () {
                camPanels.forEach(function (p) { populateCamSelect(p.select, p.deviceId); });
            });
        }
        window.addEventListener("resize", function () {
            camPanels.forEach(function (p) { clampPos(p.el); });
        });
        setCamVisible(localStorage.getItem(CAM_VISIBLE_LS_KEY) === "1");   // oculta salvo que se haya activado
        camToggleBtns.forEach(function (btn) {
            btn.addEventListener("click", function () { setCamVisible(!camVisible); });
        });
    }

    // Mantiene un panel dentro de los límites de la ventana tras un redimensionado.
    function clampPos(el) {
        if (el.style.left === "") return;
        var maxL = window.innerWidth - el.offsetWidth;
        var maxT = window.innerHeight - el.offsetHeight;
        el.style.left = Math.max(0, Math.min(maxL, parseFloat(el.style.left))) + "px";
        el.style.top = Math.max(0, Math.min(maxT, parseFloat(el.style.top))) + "px";
    }

    // Hace arrastrable un panel desde su cabecera y persiste su posición.
    function makeDraggable(el, handle, lsKey) {
        handle.addEventListener("pointerdown", function (e) {
            if (e.button !== 0) return;
            if (e.target.closest("button")) return;
            e.preventDefault();
            var rect = el.getBoundingClientRect();
            el.style.transform = "none";
            el.style.right = "auto";
            el.style.bottom = "auto";
            el.style.left = rect.left + "px";
            el.style.top = rect.top + "px";
            var startX = e.clientX, startY = e.clientY, startLeft = rect.left, startTop = rect.top;
            handle.setPointerCapture(e.pointerId);

            function onMove(ev) {
                var maxL = window.innerWidth - el.offsetWidth;
                var maxT = window.innerHeight - el.offsetHeight;
                var nl = Math.max(0, Math.min(maxL, startLeft + (ev.clientX - startX)));
                var nt = Math.max(0, Math.min(maxT, startTop + (ev.clientY - startY)));
                el.style.left = nl + "px";
                el.style.top = nt + "px";
            }
            function onUp() {
                handle.releasePointerCapture(e.pointerId);
                document.removeEventListener("pointermove", onMove);
                document.removeEventListener("pointerup", onUp);
                try {
                    localStorage.setItem(lsKey, JSON.stringify({
                        left: parseFloat(el.style.left), top: parseFloat(el.style.top)
                    }));
                } catch (_) { /* storage unavailable */ }
            }
            document.addEventListener("pointermove", onMove);
            document.addEventListener("pointerup", onUp);
        });
    }

    // Restaura la posición guardada de un panel, si existe.
    function restorePos(el, lsKey) {
        try {
            var raw = localStorage.getItem(lsKey);
            if (!raw) return;
            var pos = JSON.parse(raw);
            var maxL = window.innerWidth - el.offsetWidth;
            var maxT = window.innerHeight - el.offsetHeight;
            el.style.transform = "none";
            el.style.right = "auto";
            el.style.bottom = "auto";
            el.style.left = Math.max(0, Math.min(maxL, pos.left)) + "px";
            el.style.top = Math.max(0, Math.min(maxT, pos.top)) + "px";
        } catch (_) { /* ignore malformed position */ }
    }

    // Indica si hay al menos un panel de cámara con stream activo.
    function anyCamActive() { return camPanels.some(function (p) { return !!p.stream; }); }

    // Condición compartida por los dos botones de inicio para disparar grabación: el interruptor "Grabar al iniciar".
    function shouldStartRecording() { return recordEnabled; }

    // Refleja el estado del interruptor "Grabar al iniciar" en el icono y el título de sus dos botones
    // (uno en la barra derecha y otro en la inferior, independientes pero con el mismo estado compartido).
    function updateRecordToggleBtn() {
        recordToggleBtns.forEach(function (btn) {
            btn.innerHTML = recordEnabled ? '<i class="bi bi-record-circle-fill"></i>' : '<i class="bi bi-record-circle"></i>';
            btn.title = recordEnabled ? "Grabar al iniciar: activado" : "Grabar al iniciar: desactivado";
            btn.classList.toggle("active", recordEnabled);
        });
    }

    // Refleja la visibilidad de la(s) cámara(s) flotante(s) en el icono y el título de sus dos botones.
    function updateCamToggleBtns() {
        camToggleBtns.forEach(function (btn) {
            btn.innerHTML = camVisible ? '<i class="bi bi-camera-video-fill"></i>' : '<i class="bi bi-camera-video-off"></i>';
            btn.title = camVisible ? "Mostrar/ocultar cámara: visible" : "Mostrar/ocultar cámara: oculta";
            btn.classList.toggle("active", camVisible);
        });
    }

    // Muestra u oculta todos los paneles de cámara flotantes (y los apaga si se ocultan).
    function setCamVisible(visible) {
        camVisible = visible;
        camPanelsLayer.style.display = visible ? "" : "none";
        try { localStorage.setItem(CAM_VISIBLE_LS_KEY, visible ? "1" : "0"); } catch (_) { /* storage unavailable */ }
        updateCamToggleBtns();
        if (!visible) camPanels.forEach(function (p) { deactivateCamPanel(p); });
    }

    // Refleja el sentido de la cuenta (atrás o hacia adelante) en el icono y el título del botón.
    function updateTimerDirectionBtn() {
        btnTimerDirection.innerHTML = timerCountUp ? '<i class="bi bi-arrow-up"></i>' : '<i class="bi bi-arrow-down"></i>';
        btnTimerDirection.title = timerCountUp ? "Cuenta hacia adelante" : "Cuenta atrás";
        btnTimerDirection.classList.toggle("active", timerCountUp);
    }

    // Clona la plantilla de un panel de cámara y localiza sus controles internos.
    function createCamPanelDom(uid, isPrimary) {
        var frag = camPanelTpl.content.cloneNode(true);
        var el = frag.querySelector(".cam-panel");
        el.dataset.uid = uid;
        el.classList.toggle("cam-primary", isPrimary);
        return {
            el: el,
            dragHandle: el.querySelector('[data-role="drag"]'),
            removeBtn: el.querySelector('[data-role="remove"]'),
            select: el.querySelector('[data-role="select"]'),
            btnToggle: el.querySelector('[data-role="toggle"]'),
            video: el.querySelector('[data-role="video"]'),
            placeholder: el.querySelector('[data-role="placeholder"]')
        };
    }

    // Crea (o restaura) un panel de cámara flotante, arrastrable, con su propia posición guardada.
    function addCamPanel(opts) {
        opts = opts || {};
        if (!opts.primary && camPanels.length >= CAM_MAX_PANELS) return null;
        var isPrimary = !!opts.primary;
        var uid = opts.uid || genId();
        var panel = createCamPanelDom(uid, isPrimary);
        panel.uid = uid; panel.isPrimary = isPrimary;
        panel.stream = null; panel.micSource = null;
        panel.deviceId = opts.deviceId || "";
        panel.posKey = isPrimary ? CAM_POS_LS_KEY : ("dryfire-cam-pos-" + uid);

        camPanelsLayer.appendChild(panel.el);

        if (isPrimary) {
            if (panel.removeBtn) panel.removeBtn.remove();
            btnCamAdd = document.createElement("button");
            btnCamAdd.type = "button";
            btnCamAdd.className = "btn btn-ico";
            btnCamAdd.id = "btn-cam-add";
            btnCamAdd.title = "Añadir otra cámara";
            btnCamAdd.innerHTML = '<i class="bi bi-plus-lg"></i>';
            btnCamAdd.addEventListener("click", function () { addCamPanel({}); });
            panel.el.querySelector(".cam-controls").appendChild(btnCamAdd);
        } else {
            applyCascadePosition(panel);
            panel.removeBtn.addEventListener("click", function () { removeCamPanel(panel); });
        }

        restorePos(panel.el, panel.posKey);
        makeDraggable(panel.el, panel.dragHandle, panel.posKey);

        populateCamSelect(panel.select, panel.deviceId);
        panel.btnToggle.addEventListener("click", function () { toggleCamPanel(panel); });
        panel.select.addEventListener("change", function () {
            panel.deviceId = panel.select.value;
            if (isPrimary) {
                try { localStorage.setItem(CAM_DEVICE_LS_KEY, panel.deviceId); } catch (_) { /* storage unavailable */ }
            } else {
                persistExtraPanelsList();
            }
            if (panel.stream) activateCamPanel(panel, panel.deviceId);
        });

        camPanels.push(panel);
        if (!isPrimary) persistExtraPanelsList();
        updateAddCamBtnState();
        return panel;
    }

    // Elimina un panel de cámara extra y su configuración guardada.
    function removeCamPanel(panel) {
        if (panel.isPrimary) return;
        deactivateCamPanel(panel);
        panel.el.remove();
        var idx = camPanels.indexOf(panel);
        if (idx >= 0) camPanels.splice(idx, 1);
        try { localStorage.removeItem(panel.posKey); } catch (_) { /* storage unavailable */ }
        persistExtraPanelsList();
        updateAddCamBtnState();
    }

    // Calcula la posición inicial en cascada de un panel de cámara nuevo respecto al primario.
    function applyCascadePosition(panel) {
        var idx = camPanels.filter(function (p) { return !p.isPrimary; }).length;
        var baseRect = camPanels[0].el.getBoundingClientRect();
        var offset = CAM_PANEL_CASCADE_OFFSET * (idx + 1);
        panel.el.style.transform = "none";
        panel.el.style.right = "auto";
        panel.el.style.bottom = "auto";
        panel.el.style.left = Math.max(0, baseRect.left - offset) + "px";
        panel.el.style.top = Math.max(0, baseRect.top - offset) + "px";
    }

    // Guarda en localStorage qué paneles de cámara extra existen y su dispositivo.
    function persistExtraPanelsList() {
        var list = camPanels.filter(function (p) { return !p.isPrimary; })
            .map(function (p) { return { uid: p.uid, deviceId: p.deviceId || "" }; });
        try { localStorage.setItem(CAM_PANELS_LS_KEY, JSON.stringify(list)); } catch (_) { /* storage unavailable */ }
    }

    // Recrea, apagados, los paneles de cámara extra guardados en sesiones anteriores.
    function restoreCamPanelsExtra() {
        try {
            var raw = localStorage.getItem(CAM_PANELS_LS_KEY);
            var list = raw ? JSON.parse(raw) : [];
            list.forEach(function (entry) {
                if (camPanels.length >= CAM_MAX_PANELS) return;
                addCamPanel({ primary: false, uid: entry.uid, deviceId: entry.deviceId || "" });
            });
        } catch (_) { /* ignore malformed list */ }
    }

    // Activa o desactiva el botón de añadir cámara según el límite de paneles.
    function updateAddCamBtnState() {
        if (btnCamAdd) btnCamAdd.disabled = camPanels.length >= CAM_MAX_PANELS;
    }

    // Repuebla el selector de dispositivos de vídeo de un panel de cámara.
    function populateCamSelect(selectEl, preferredDeviceId) {
        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) return;
        navigator.mediaDevices.enumerateDevices().then(function (devices) {
            var cams = devices.filter(function (d) { return d.kind === "videoinput"; });
            selectEl.innerHTML = "";
            if (cams.length === 0) {
                selectEl.innerHTML = '<option value="">Sin cámaras</option>';
                return;
            }
            cams.forEach(function (d, i) {
                var o = document.createElement("option");
                o.value = d.deviceId;
                o.textContent = d.label || ("Cámara " + (i + 1));
                selectEl.appendChild(o);
            });
            if (preferredDeviceId && cams.some(function (d) { return d.deviceId === preferredDeviceId; })) {
                selectEl.value = preferredDeviceId;
            }
        }).catch(function () { /* ignore enumeration errors */ });
    }

    // Pide permiso y arranca el stream de cámara (con micrófono si es posible) de un panel.
    function activateCamPanel(panel, deviceId) {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            toast("Cámara no disponible (requiere HTTPS)");
            return;
        }
        deactivateCamStream(panel);
        var videoConstraint = deviceId ? { deviceId: { exact: deviceId } } : true;
        navigator.mediaDevices.getUserMedia({ video: videoConstraint, audio: true }).catch(function () {
            return navigator.mediaDevices.getUserMedia({ video: videoConstraint, audio: false });
        }).then(function (stream) {
            panel.stream = stream;
            panel.video.srcObject = stream;
            panel.video.classList.add("active");
            panel.btnToggle.classList.add("active");
            panel.btnToggle.innerHTML = '<i class="bi bi-camera-video-off"></i>';
            stream.getVideoTracks().forEach(function (t) {
                t.addEventListener("ended", function () { handleCamTrackEnded(panel); });
            });
            populateCamSelect(panel.select, panel.deviceId);
        }).catch(function () {
            toast("No se pudo acceder a la cámara");
        });
    }

    // Detiene el stream de un panel de cámara sin tocar su UI.
    function deactivateCamStream(panel) {
        if (panel.stream) {
            panel.stream.getTracks().forEach(function (t) { t.stop(); });
            panel.stream = null;
        }
    }

    // Apaga un panel de cámara y, si era la última activa, detiene temporizador/secuencia/grabación en curso.
    function deactivateCamPanel(panel) {
        deactivateCamStream(panel);
        panel.video.srcObject = null;
        panel.video.classList.remove("active");
        panel.btnToggle.classList.remove("active");
        panel.btnToggle.innerHTML = '<i class="bi bi-camera-video"></i>';
        dropCamPanelAudioSource(panel);
        if (!anyCamActive()) {
            if (timerRunning) stopSequence(); else if (seqRunning) stopSeqPlayback(); else stopRecording();
        }
    }

    // Reacciona a que el dispositivo de un panel de cámara se desconecte a media sesión.
    function handleCamTrackEnded(panel) {
        if (!panel.stream) return;
        toast("Cámara desconectada");
        deactivateCamPanel(panel);
    }

    // Activa o desactiva un panel de cámara según su estado actual.
    function toggleCamPanel(panel) {
        if (panel.stream) { deactivateCamPanel(panel); } else { activateCamPanel(panel, panel.select.value); }
    }


    /* --- Compartir con código y cuenta (Mis stages) ---
       Compartir (sesión CIFE de tiropractico.es): el stage activo con su temporizador, o la
       secuencia con todos sus stages y el temporizador, con un código público (/dryfire/<código>/) que
       abre una copia en otro navegador. Con sesión, cada stage y el temporizador + secuencia se guardan
       solos en la cuenta del usuario (3 s después del último cambio, solo lo que cambia) y «Mis stages»
       los recupera en cualquier dispositivo. Borrar un stage aquí no lo borra de la cuenta. */
    var DF_CODIGO = "";
    var URL_SESION = "/scoring/api/cife/sesion/";
    var URL_CUENTA = "/designer/api/cuenta/";
    var URL_CUENTA_DATOS = "/designer/api/cuenta/datos/";
    var URL_CUENTA_BORRAR = "/designer/api/cuenta/borrar/";
    var URL_COMPARTIR = "/dryfire/api/compartir/";
    var URL_EDITOR = "/dryfire/";
    var RE_CODIGO = /^[A-Za-z0-9]{4,8}$/;
    var LS_CUENTA = "dryfire-cuenta";            // { id de usuario: { uuid: huella } } (lo ya guardado)
    var LS_CONFIG_UUID = "dryfire-config-uuid";  // uuid del temporizador + secuencia de este navegador
    var SIN_SESION = "Para compartir inicia sesión en tiropractico.es (candado) con un usuario del equipo CIFE.";
    var cuenta = null;                           // { id, nombre } del usuario de la sesión
    var cuentaTimer = null, cuentaSubiendo = false, cuentaError = "";
    var modal = document.getElementById("df-modal");

    // UUID v4 (crypto.randomUUID solo existe en https / localhost).
    function genUUID() {
        if (window.crypto && crypto.randomUUID) return crypto.randomUUID();
        var b = crypto.getRandomValues(new Uint8Array(16));
        b[6] = (b[6] & 0x0f) | 0x40; b[8] = (b[8] & 0x3f) | 0x80;
        var h = Array.prototype.map.call(b, function (x) { return ("0" + x.toString(16)).slice(-2); }).join("");
        return h.slice(0, 8) + "-" + h.slice(8, 12) + "-" + h.slice(12, 16) + "-" + h.slice(16, 20) + "-" + h.slice(20);
    }

    function lsGet(k) { try { return localStorage.getItem(k); } catch (_) { return null; } }
    function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (_) { /* storage unavailable */ } }
    function cabeceraCife() { var t = lsGet("cife-token"); return t ? { "X-Cife-Token": t } : {}; }
    function conJson(h) { var o = { "Content-Type": "application/json" }; for (var k in h) o[k] = h[k]; return o; }
    function esc(t) { return String(t == null ? "" : t).replace(/[&<>"]/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]; }); }

    function configUuid() {
        var u = lsGet(LS_CONFIG_UUID);
        if (!u) { u = genUUID(); lsSet(LS_CONFIG_UUID, u); }
        return u;
    }

    // Temporizador tal como está en la barra derecha.
    function timerActual() {
        var gap = parseFloat(timerGapInp.value);
        return { duration: Math.max(0.1, parseFloat(timerDurationInp.value) || 4), reps: Math.max(1, parseInt(timerRepsInp.value, 10) || 1),
                 gap: gap >= 0 ? gap : 6, countUp: !!timerCountUp };
    }

    function aplicarTimer(t) {
        if (!t) return;
        if (t.duration) timerDurationInp.value = t.duration;
        if (t.reps) timerRepsInp.value = t.reps;
        if (t.gap != null) timerGapInp.value = t.gap;
        timerCountUp = !!t.countUp;
        lsSet(TIMER_COUNT_UP_LS_KEY, timerCountUp ? "1" : "0");
        updateTimerDirectionBtn();
        guardarTimer();
    }

    function guardarTimer() {
        var t = timerActual();
        lsSet(TIMER_LS_KEY, JSON.stringify({ duration: t.duration, reps: t.reps, gap: t.gap }));
        programarCuenta();
    }

    function stagePorId(id) { for (var i = 0; i < stages.length; i++) { if (stages[i].id === id) return stages[i]; } return null; }
    function stagePorUuid(u) { for (var i = 0; i < stages.length; i++) { if (stages[i].uuid === u) return stages[i]; } return null; }
    function limpio(st) { return { uuid: st.uuid, name: st.name || "", targets: st.targets || [], escena: st.escena || null, modificado: st.modificado || null }; }

    // Secuencia portable: cada ítem con el uuid de su stage (el id es local de este navegador).
    function secuenciaActual() {
        return {
            items: seqItems.map(function (it) { var st = stagePorId(it.stageId); return st ? { stageUuid: st.uuid, seconds: it.seconds, gap: it.gap } : null; })
                .filter(Boolean),
            endMode: seqEndMode, loopGap: seqLoopGap, countUp: !!seqCountUp
        };
    }

    function aplicarSecuencia(sec) {
        if (!sec) return;
        seqItems = (sec.items || []).map(function (it) {
            var st = stagePorUuid(it.stageUuid);
            return st ? { uid: genId(), stageId: st.id, seconds: parseFloat(it.seconds) > 0 ? parseFloat(it.seconds) : SEQ_DEFAULT_SECONDS,
                          gap: parseFloat(it.gap) >= 0 ? parseFloat(it.gap) : 0 } : null;
        }).filter(Boolean);
        seqEndMode = sec.endMode === "loop" ? "loop" : "stop";
        seqLoopGap = parseFloat(sec.loopGap) >= 0 ? parseFloat(sec.loopGap) : 3;
        seqCountUp = !!sec.countUp;
        lsSet(SEQ_COUNT_UP_LS_KEY, seqCountUp ? "1" : "0");
        seqLoopGapInp.value = seqLoopGap;
        updateSeqEndModeBtn();
        updateSeqDirectionBtn();
        persistSeqConfig();
        renderSeqList();
    }

    // Añade (o sustituye, mismo uuid) stages de un código o de la cuenta. Devuelve cuántos sustituye.
    function importarStages(lista) {
        var sustituidos = 0;
        (lista || []).forEach(function (src) {
            if (!src || !Array.isArray(src.targets)) return;
            aEscena(src);   // compartido o guardado antes de la escena: en píxeles
            var local = src.uuid && stagePorUuid(src.uuid);
            if (local) { local.name = src.name || local.name; local.targets = src.targets; local.escena = ESCENA; local.modificado = src.modificado || new Date().toISOString(); sustituidos++; }
            else stages.push({ id: genId(), uuid: src.uuid || genUUID(), name: src.name || "Sin nombre", targets: src.targets, escena: ESCENA, modificado: src.modificado || new Date().toISOString() });
        });
        persist();
        refreshSel();
        return sustituidos;
    }

    // ---- Diálogo ----
    function abrirModal(titulo, cuerpo, pie) {
        document.getElementById("df-modal-tit").textContent = titulo;
        document.getElementById("df-modal-body").innerHTML = cuerpo;
        document.getElementById("df-modal-pie").innerHTML = pie || "";
        modal.hidden = false;
    }
    function cerrarModal() { modal.hidden = true; }

    function qrSVG(url) {
        if (!window.qrcode) return "";
        var q = qrcode(0, "M"); q.addData(url); q.make();
        return q.createSvgTag({ cellSize: 4, margin: 2, scalable: true });
    }

    function mostrarCodigo(res, que) {
        abrirModal("Código de " + que,
            '<div class="df-codigo">' + esc(res.codigo) + '</div>' +
            '<div class="df-qr">' + qrSVG(res.url) + '</div>' +
            '<div class="df-url"><input class="input" readonly value="' + esc(res.url) + '"><button class="btn" data-copiar="' + esc(res.url) + '"><i class="bi bi-copy"></i></button></div>' +
            '<p class="df-ayuda">Quien abra el enlace o escriba el código en «Abrir código» recibe una copia en su navegador' +
            (que === "la secuencia" ? ' (la secuencia con todos sus stages y el temporizador).' : ' (el stage con su temporizador).') +
            ' Si vuelves a compartir, el código se mantiene y se actualiza el contenido.</p>');
    }

    async function compartir(tipo) {
        if (!cuentaSesion()) { toast(SIN_SESION); return; }
        var datos, nombre, uuid;
        if (tipo === "stage") {
            saveStage();
            var st = getActive();
            if (!st || !(st.targets || []).length) { toast("El stage no tiene dianas"); return; }
            datos = { schemaVersion: 1, stages: [limpio(st)], timer: timerActual() };
            nombre = st.name; uuid = st.uuid;
        } else {
            var sec = secuenciaActual();
            if (!sec.items.length) { toast("La secuencia está vacía"); return; }
            var usados = [];
            sec.items.forEach(function (it) { if (usados.indexOf(it.stageUuid) < 0) usados.push(it.stageUuid); });
            datos = { schemaVersion: 1, stages: usados.map(function (u) { return limpio(stagePorUuid(u)); }), secuencia: sec, timer: timerActual() };
            nombre = "Secuencia: " + datos.stages.map(function (x) { return x.name || "Sin nombre"; }).join(", ");
            uuid = configUuid();
        }
        try {
            var r = await fetch(URL_COMPARTIR, { method: "POST", headers: conJson(cabeceraCife()),
                body: JSON.stringify({ tipo: tipo, uuid: uuid, nombre: nombre.slice(0, 200), datos: datos }) });
            var res = await r.json().catch(function () { return {}; });
            if (res.login) { perderSesion(); toast(SIN_SESION); return; }
            if (!r.ok) throw new Error(res.error || "error " + r.status);
            mostrarCodigo(res, tipo === "stage" ? "«" + (nombre || "Sin nombre") + "»" : "la secuencia");
        } catch (e) { toast("No se pudo compartir: " + e.message); }
    }

    function pedirCodigo() {
        abrirModal("Abrir código",
            '<div class="df-url"><input class="input" id="df-codigo-inp" maxlength="8" placeholder="p. ej. CF54A" autocomplete="off" spellcheck="false" style="text-transform: uppercase; letter-spacing: .12em"></div>' +
            '<p class="df-ayuda">Código de un stage o de una secuencia de Dry Fire. Se añade a este navegador (si ya lo tenías, se sustituye).</p>',
            '<button class="btn active" id="df-codigo-ir"><i class="bi bi-box-arrow-in-down"></i> Abrir</button>');
        var inp = document.getElementById("df-codigo-inp");
        inp.focus();
        var ir = function () { var c = inp.value.trim().toUpperCase(); if (RE_CODIGO.test(c)) { cerrarModal(); abrirCodigo(c); } else toast("Código no válido"); };
        document.getElementById("df-codigo-ir").addEventListener("click", ir);
        inp.addEventListener("keydown", function (e) { if (e.key === "Enter") ir(); });
    }

    // Abre lo compartido con un código: añade sus stages; un stage se carga en el lienzo con su
    // temporizador; una secuencia sustituye la actual (con confirmación) y aplica su temporizador.
    async function abrirCodigo(codigo) {
        var res;
        try {
            var r = await fetch(URL_EDITOR + "api/compartir/" + encodeURIComponent(codigo) + "/", { cache: "no-store" });
            res = await r.json().catch(function () { return {}; });
            if (!r.ok) throw new Error(res.error || "error " + r.status);
        } catch (e) { toast("No se pudo abrir el código " + codigo + ": " + e.message); return; }
        var d = res.datos || {};
        if (res.tipo === "secuencia" && seqItems.length && !confirm("¿Sustituir tu secuencia actual por la del código " + codigo + "?")) return;
        var sust = importarStages(d.stages);
        aplicarTimer(d.timer);
        if (res.tipo === "secuencia") {
            aplicarSecuencia(d.secuencia);
            seqbar.classList.remove("off");
            document.getElementById("toolbar-right").classList.add("off");
            toast("Secuencia abierta (" + (d.stages || []).length + " stages" + (sust ? ", " + sust + " sustituidos" : "") + ")");
        } else {
            var st = d.stages && d.stages[0] && stagePorUuid(d.stages[0].uuid);
            if (st) loadStage(st.id);
            toast((sust ? "Stage actualizado" : "Stage añadido") + ": " + ((st && st.name) || res.nombre || codigo));
        }
    }

    // ---- Cuenta ----
    function cuentaSesion() { return !!cabeceraCife()["X-Cife-Token"]; }

    function perderSesion() {
        cuenta = null;
        pintarUsuario("");
        try { localStorage.removeItem("cife-token"); localStorage.removeItem("cife-nombre"); } catch (_) { /* storage unavailable */ }
        pintarCuentaEstado();
    }

    // Nombre del usuario de la sesión: al cargar, el guardado al iniciar sesión en la landing; luego el del servidor.
    function pintarUsuario(nombre) {
        var b = document.getElementById("df-usuario");
        b.hidden = !nombre;
        b.querySelector("span").textContent = nombre || "";
        b.title = nombre ? "Sesión iniciada en tiropractico.es como " + nombre + " · Mis stages" : "";
    }

    function huella(txt) {
        var h = 5381;
        for (var i = 0; i < txt.length; i++) h = (h * 33 + txt.charCodeAt(i)) | 0;
        return (h >>> 0).toString(36) + "." + txt.length.toString(36);
    }
    function cuentaMapa() {
        var m = null;
        try { m = JSON.parse(lsGet(LS_CUENTA) || "null"); } catch (_) { m = null; }
        return (m && cuenta && m[cuenta.id]) || {};
    }
    function guardarCuentaMapa(mapa) {
        if (!cuenta) return;
        var m = null;
        try { m = JSON.parse(lsGet(LS_CUENTA) || "null"); } catch (_) { m = null; }
        m = m || {}; m[cuenta.id] = mapa;
        lsSet(LS_CUENTA, JSON.stringify(m));
    }

    // Lo que se guarda en la cuenta, con su huella: cada stage (no los vacíos y sin nombre, como el que se
    // crea al abrir Dry Fire por primera vez) y el temporizador + secuencia.
    function itemsCuenta() {
        var out = stages.filter(function (st) { return (st.targets || []).length || st.name; }).map(function (st) {
            var datos = limpio(st), txt = JSON.stringify(datos);
            return { uuid: st.uuid, tipo: "stage", datos: datos, h: huella(txt) };
        });
        var cfg = { uuid: configUuid(), name: "Temporizador y secuencia", timer: timerActual(), secuencia: secuenciaActual() };
        var txt = JSON.stringify(cfg);
        cfg.modificado = new Date().toISOString();
        out.push({ uuid: cfg.uuid, tipo: "config", datos: cfg, h: huella(txt) });
        return out;
    }

    function programarCuenta(espera) {
        if (!cuenta) return;
        clearTimeout(cuentaTimer);
        cuentaTimer = setTimeout(subirCuenta, espera == null ? 3000 : espera);
    }

    async function subirCuenta() {
        if (!cuenta) return;
        if (cuentaSubiendo) { programarCuenta(); return; }
        cuentaSubiendo = true;
        var mapa = cuentaMapa();
        var cambios = itemsCuenta().filter(function (x) { return mapa[x.uuid] !== x.h; });
        try {
            for (var i = 0; i < cambios.length; i += 25) {
                var lote = cambios.slice(i, i + 25);
                var r = await fetch(URL_CUENTA, { method: "POST", headers: conJson(cabeceraCife()),
                    body: JSON.stringify({ app: "dryfire", items: lote.map(function (x) { return { tipo: x.tipo, datos: x.datos }; }) }) });
                var res = await r.json().catch(function () { return {}; });
                if (res.login) { perderSesion(); return; }
                if (!r.ok) throw new Error(res.error || "error " + r.status);
                lote.forEach(function (x) { mapa[x.uuid] = x.h; });
                guardarCuentaMapa(mapa);
            }
            cuentaError = "";
        } catch (e) {
            cuentaError = navigator.onLine === false ? "sin conexión" : e.message;
        } finally {
            cuentaSubiendo = false;
            pintarCuentaEstado();
        }
    }

    // Estado en la cuenta de cada stage: «ok» (su huella es la subida), «pend» (cambios sin subir) o «err».
    // Junto al nombre del stage activo, un icono; en el desplegable, una marca tras cada nombre.
    var SYNC_TXT = {
        ok: ["bi-cloud-check-fill", "\u2713", "Guardado en tu cuenta y al día"],
        pend: ["bi-cloud-arrow-up", "\u2191", "Con cambios aún sin guardar en tu cuenta (se guardan solos en unos segundos)"],
        err: ["bi-cloud-slash", "\u26A0", "No se pudo guardar en tu cuenta; se reintentará"]
    };
    function pintarSync() {
        var estado = {};
        if (cuenta) {
            var mapa = cuentaMapa();
            itemsCuenta().forEach(function (x) { estado[x.uuid] = mapa[x.uuid] === x.h ? "ok" : cuentaError ? "err" : "pend"; });
        }
        Array.prototype.forEach.call(stageSel.options, function (o) {
            if (!o.value) return;
            var st = stages.filter(function (x) { return x.id === o.value; })[0], e = st && estado[st.uuid];
            if (st) o.textContent = (st.name || "Sin nombre") + (e ? "  " + SYNC_TXT[e][1] : "");
        });
        var act = getActive(), e = act && estado[act.uuid], el = document.getElementById("df-sync");
        el.hidden = !e;
        el.className = "df-sync" + (e ? " " + e : "");
        el.title = e ? SYNC_TXT[e][2] : "";
        el.innerHTML = e ? '<i class="bi ' + SYNC_TXT[e][0] + '"></i>' : "";
    }

    function pintarCuentaEstado() {
        pintarSync();
        var el = document.getElementById("cuenta-estado");
        document.getElementById("btn-cuenta").hidden = !cuenta;
        el.hidden = !cuenta;
        if (!cuenta) return;
        el.classList.toggle("err", !!cuentaError);
        el.innerHTML = cuentaError
            ? '<i class="bi bi-exclamation-triangle"></i> No se pudo guardar en tu cuenta (' + esc(cuentaError) + '); se reintentará.'
            : '<i class="bi bi-cloud-check"></i> Guardado en tu cuenta';
    }

    async function abrirMisStages() {
        abrirModal("Mis stages", '<p class="df-ayuda">Cargando…</p>');
        var items;
        try {
            var r = await fetch(URL_CUENTA + "?app=dryfire", { headers: cabeceraCife(), cache: "no-store" });
            var res = await r.json().catch(function () { return {}; });
            if (res.login) { perderSesion(); cerrarModal(); return; }
            if (!r.ok) throw new Error(res.error || "error " + r.status);
            items = res.items || [];
        } catch (e) { abrirModal("Mis stages", '<p class="df-ayuda">No se pudo cargar: ' + esc(e.message) + '</p>'); return; }
        var fila = function (x) {
            var aqui = x.tipo === "stage" ? !!stagePorUuid(x.uuid) : x.uuid === configUuid();
            var info = x.tipo === "stage" ? x.resumen.dianas + " dianas" : x.resumen.secuencia + " en la secuencia";
            return '<label><input type="checkbox" value="' + x.uuid + '"> <span>' + esc(x.nombre || "Sin nombre") + '</span>' +
                '<span class="df-tag' + (aqui ? '' : ' nuevo') + '">' + (aqui ? "en este navegador" : "no está aquí") + '</span>' +
                '<small>' + info + '</small></label>';
        };
        var sts = items.filter(function (x) { return x.tipo === "stage"; }), cfgs = items.filter(function (x) { return x.tipo === "config"; });
        abrirModal("Mis stages · " + cuenta.nombre,
            (items.length ? '' : '<p class="df-ayuda">Aún no hay nada guardado en tu cuenta.</p>') +
            (sts.length ? '<b>Stages</b><div class="df-lista">' + sts.map(fila).join("") + '</div>' : '') +
            (cfgs.length ? '<b>Temporizador y secuencia</b><div class="df-lista">' + cfgs.map(fila).join("") + '</div>' : '') +
            '<p class="df-ayuda">Con la sesión iniciada, tus stages y el temporizador + secuencia se guardan solos en tu cuenta. «Recuperar» los trae a este navegador (los stages que ya tenías se sustituyen; el temporizador y la secuencia sustituyen los actuales); «Borrar» los quita de la cuenta, no de este navegador.</p>',
            '<button class="btn btn-danger" id="df-cuenta-borrar"><i class="bi bi-trash"></i> Borrar</button>' +
            '<button class="btn active" id="df-cuenta-recuperar"><i class="bi bi-cloud-arrow-down"></i> Recuperar</button>');
        var marcados = function () { return Array.prototype.map.call(document.querySelectorAll("#df-modal-body input:checked"), function (i) { return i.value; }); };
        document.getElementById("df-cuenta-recuperar").addEventListener("click", function () { recuperar(marcados()); });
        document.getElementById("df-cuenta-borrar").addEventListener("click", function () { borrarDeCuenta(marcados()); });
    }

    async function recuperar(uuids) {
        if (!uuids.length) { toast("Marca qué recuperar"); return; }
        var res;
        try {
            var q = uuids.map(function (u) { return "uuid=" + encodeURIComponent(u); }).join("&");
            var r = await fetch(URL_CUENTA_DATOS + "?app=dryfire&" + q, { headers: cabeceraCife(), cache: "no-store" });
            res = await r.json().catch(function () { return {}; });
            if (!r.ok) throw new Error(res.error || "error " + r.status);
        } catch (e) { toast("No se pudo recuperar: " + e.message); return; }
        var sts = res.items.filter(function (x) { return x.tipo === "stage"; }).map(function (x) { return x.datos; });
        var cfg = res.items.filter(function (x) { return x.tipo === "config"; })[0];
        if (cfg && seqItems.length && !confirm("¿Sustituir tu temporizador y secuencia por los de tu cuenta?")) cfg = null;
        importarStages(sts);
        if (cfg) { aplicarTimer(cfg.datos.timer); aplicarSecuencia(cfg.datos.secuencia); }
        // Lo recuperado ya está en la cuenta: no se vuelve a subir hasta que cambie.
        var mapa = cuentaMapa();
        itemsCuenta().forEach(function (x) { if (uuids.indexOf(x.uuid) >= 0) mapa[x.uuid] = x.h; });
        guardarCuentaMapa(mapa);
        cerrarModal();
        toast("Recuperado: " + sts.length + " stage" + (sts.length === 1 ? "" : "s") + (cfg ? " y el temporizador + secuencia" : ""));
    }

    async function borrarDeCuenta(uuids) {
        if (!uuids.length) { toast("Marca qué borrar de tu cuenta"); return; }
        if (!confirm("¿Borrar de tu cuenta " + uuids.length + " elemento" + (uuids.length === 1 ? "" : "s") + "? En este navegador no se borran.")) return;
        try {
            var r = await fetch(URL_CUENTA_BORRAR, { method: "POST", headers: conJson(cabeceraCife()), body: JSON.stringify({ app: "dryfire", uuids: uuids }) });
            if (!r.ok) throw new Error("error " + r.status);
        } catch (e) { toast("No se pudo borrar: " + e.message); return; }
        // Lo que sigue en este navegador no se vuelve a subir hasta que cambie.
        var mapa = cuentaMapa(), actuales = {};
        itemsCuenta().forEach(function (x) { actuales[x.uuid] = x.h; });
        uuids.forEach(function (u) { if (actuales[u]) mapa[u] = actuales[u]; else delete mapa[u]; });
        guardarCuentaMapa(mapa);
        toast("Borrado de tu cuenta");
        abrirMisStages();
    }

    // Indicador «Sin conexión» (Dry Fire funciona igual: Service Worker y localStorage).
    function pintarConexion() { document.getElementById("df-offline").hidden = navigator.onLine !== false; }

    async function initCuenta() {
        pintarConexion();
        window.addEventListener("online", pintarConexion);
        window.addEventListener("offline", pintarConexion);
        document.getElementById("btn-share").addEventListener("click", function () { compartir("stage"); });
        document.getElementById("btn-seq-share").addEventListener("click", function () { compartir("secuencia"); });
        document.getElementById("btn-code-open").addEventListener("click", pedirCodigo);
        document.getElementById("btn-cuenta").addEventListener("click", abrirMisStages);
        document.getElementById("df-usuario").addEventListener("click", function () { if (cuenta) abrirMisStages(); });
        document.getElementById("df-modal-x").addEventListener("click", cerrarModal);
        modal.addEventListener("click", function (e) {
            if (e.target === modal) cerrarModal();
            var c = e.target.closest("[data-copiar]");
            if (c && navigator.clipboard) navigator.clipboard.writeText(c.dataset.copiar).then(function () { toast("Enlace copiado"); });
        });
        document.addEventListener("keydown", function (e) { if (e.key === "Escape" && !modal.hidden) cerrarModal(); });
        // Cambios del temporizador y del sentido de la cuenta de la secuencia: también se guardan en la cuenta.
        [timerDurationInp, timerRepsInp, timerGapInp].forEach(function (i) { i.addEventListener("change", guardarTimer); });
        btnTimerDirection.addEventListener("click", function () { programarCuenta(); });
        btnSeqDirection.addEventListener("click", function () { programarCuenta(); });
        window.addEventListener("online", function () { if (cuentaError) programarCuenta(0); });
        if (DF_CODIGO) {
            history.replaceState(null, "", URL_EDITOR);
            abrirCodigo(DF_CODIGO);
        }
        if (!cuentaSesion()) return;
        pintarUsuario(lsGet("cife-nombre") || "");
        try {
            var r = await fetch(URL_SESION, { headers: cabeceraCife(), cache: "no-store" });
            if (r.status === 401) { perderSesion(); return; }
            var res = await r.json().catch(function () { return {}; });
            if (r.ok && res.id) { cuenta = { id: res.id, nombre: res.nombre || "" }; pintarUsuario(cuenta.nombre); pintarCuentaEstado(); programarCuenta(0); }
        } catch (_) { /* sin conexión: sin cuenta en esta visita */ }
    }

    init();
})();
</script>
<!-- Sin conexión: el Service Worker guarda Dry Fire y sus recursos (stagedesigner/offline.py) -->
<script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("/dryfire/sw.js", { scope: "/dryfire/" }).catch(function () {});</script>
</body>
</html>