<!--
========================================================================
  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
------------------------------------------------------------------------
Dos paneles superpuestos al lienzo (#stage-canvas), cerrados por
defecto al cargar e independientes entre sí. Las ventanas de cámara y el
timer flotante son los únicos elementos arrastrables; 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
      «Práctica»: el temporizador, para el stage actual o la secuencia.

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, color del metal, 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 derecha, en modo Secuencia, ⇪ comparte la secuencia con sus stages.

------------------------------------------------------------------------
BARRA DERECHA — práctica (temporizador + secuencia)
------------------------------------------------------------------------
Un solo temporizador con un solo display, un solo Iniciar/Detener y un
solo juego de controles; el modo (arriba) dice qué se practica:

  - «Stage actual»: el stage del lienzo, con Duración / Repeticiones /
    Pausa (campos compactos icono+número). Pitido agudo al empezar cada
    serie, doble pitido grave al terminarla.
  - «Secuencia»: los stages de la lista, en orden, cada uno sus segundos
    (sin Duración). Al iniciar se limpia el lienzo y cuenta la Pausa
    ("Preparados"); a 3 s del final de cada pausa (la inicial, entre stages
    y entre vueltas) se oye «Stand by», y al terminarla se muestra el
    siguiente stage con un pitido agudo. Al final de la última vuelta suenan dos pitidos
    graves y el lienzo queda vacío.
  - Repeticiones (0 = sin fin) son las series del stage o las vueltas de
    la secuencia; la Pausa va antes de empezar, entre series y, en la
    secuencia, entre stages y entre vueltas.
  - Fila de botones: sentido de la cuenta (↓/↑), "Grabar al iniciar" (⏺:
    al iniciar lanza la grabación de pantalla + cámara(s) activas +
    audio), "Mostrar/ocultar cámara" (🎥), voz (🎤) e Iniciar/Detener.
    Pulsar Iniciar oculta las dos barras (queda el timer flotante).
  - Voz: al decir «Listo» / «Ready» → «Stand by», 3 s y pitido; arranca lo
    del modo elegido y, con varias series o vueltas, espera otra vez a
    «Listo» antes de cada una.
  - Lista de la secuencia (solo en modo Secuencia): una fila por stage
    (asa para reordenar arrastrando, nombre, segundos, quitar), selector
    "Añadir stage" (al elegir se añade al final) y ⇪ compartir.
  - Timer flotante: copia del display sobre la galería cuando la barra
    está cerrada, en el borde elegido o donde se arrastre.

------------------------------------------------------------------------
CÁMARA(S) — ventana(s) flotante(s)
------------------------------------------------------------------------
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" de la barra
derecha oculta o muestra todas a la vez y las apaga si se ocultan.

------------------------------------------------------------------------
ATAJOS DE TECLADO (con el foco fuera de inputs/selects)
------------------------------------------------------------------------
  Supr/Backspace  Eliminar diana(s) seleccionada(s)
  Escape          Deseleccionar, cerrar menú contextual y detener
                  la práctica si está 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: stage y segundos)
  dryfire-timer-cfg       Duración / repeticiones (0 = sin fin) / pausa del temporizador
  dryfire-modo            Modo de la práctica: stage | secuencia
  dryfire-record-enabled  Estado del interruptor "Grabar al iniciar"
  dryfire-timer-count-up  Sentido de la cuenta del temporizador (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-voz             Empezar con la voz («Listo» / «Ready»)
  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>
    <!-- mediabunny (el de Video): convertir la grabación a MP4 H.264 + AAC. El codificador AAC importa
         «mediabunny»: el importmap lo lleva a la misma copia, para que se registre en ella. -->
    <script type="importmap">{ "imports": { "mediabunny": "/static/video/vendor/mediabunny.min.mjs" } }</script>
    
<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: 290px; --toolbar-right-w: 300px; --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; }
/* Distancia simulada de cada diana, solo editando (menú abierto) */
.t-dist { display: none; position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%);
    padding: 1px 8px; border-radius: 10px; background: rgba(15,15,25,0.8); color: #fbbf24;
    font: 600 18px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; pointer-events: none; }
body.df-editando .t-dist { display: block; }
body.df-editando .t-dist.off { display: none; }
/* Soportes (estacas y base) de tarjetas y baterías: en su capa, detrás de las dianas */
.soporte { position: absolute; pointer-events: none; }
.soporte svg { display: block; width: 100%; height: 100%; }
/* Mis baterías (paleta) */
.bat-palette { padding: 0 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bat-palette[hidden] { display: none; }
.bat-palette .tb-sub { width: 100%; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.bat-palette .palette-item { position: relative; }
.bat-palette .palette-item svg { width: 28px; height: 32px; }
.bat-palette .palette-item span { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bat-x { position: absolute; top: 1px; right: 3px; display: none; color: #f87171; font-size: 11px; }
.bat-palette .palette-item:hover .bat-x { display: block; }
.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; }

/* Campo compacto icono + número del 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;
}
/* Modo de la práctica (stage actual / secuencia) y lista de la secuencia, en la barra derecha */
.df-modo { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,0.05); }
.df-modo button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px;
    border: 0; border-radius: 6px; background: transparent; color: #aaa; font-size: 12px; cursor: pointer;
}
.df-modo button.active { background: var(--accent); color: #fff; }
.df-modo button:disabled { cursor: default; opacity: 0.6; }
.df-seq { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.df-seq[hidden] { display: none; }
.df-seq-cab { display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #999; }
.df-seq-cab .btn-ico { width: 28px; height: 28px; font-size: 13px; }
#seq-list { display: flex; flex-direction: column; gap: 4px; counter-reset: seqidx; }
.seq-empty { font-size: 11px; color: rgba(255,255,255,0.35); padding: 4px 2px; }
.seq-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.seq-item::before { counter-increment: seqidx; content: counter(seqidx) "."; font-size: 10px; color: rgba(255,255,255,0.4); min-width: 14px; }
.seq-item.active { border-color: var(--accent); background: rgba(37,99,235,0.18); }
.seq-item.drag-sobre { border-color: rgba(255,255,255,0.5); }
.seq-item-asa { color: rgba(255,255,255,0.35); cursor: grab; font-size: 13px; }
.running .seq-item-asa { cursor: default; opacity: 0.4; }
.seq-item-name { flex: 1; font-size: 12px; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-item .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); }

.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 [hidden] { display: none !important; }
.ctx-dist { display: flex; align-items: center; gap: 4px; padding: 4px 10px; color: #aaa; font-size: 12px; }
.ctx-dist i { margin-right: 2px; }
.ctx-menu .ctx-dist button { width: auto; flex: 1; padding: 4px 0; justify-content: center; text-align: center;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; }
.ctx-menu .ctx-dist button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ctx-color { display: flex; align-items: center; gap: 6px; padding: 4px 10px; color: #aaa; font-size: 12px; }
.ctx-color i { margin-right: 2px; }
.ctx-menu .ctx-color button { width: 20px; height: 20px; padding: 0; flex: none; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25); }
.ctx-menu .ctx-color button.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.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-card.ancha { width: min(1000px, 100%); }
.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-campo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.df-campo .input { width: 110px; text-align: right; }
.df-regla { flex: none; align-self: flex-start; height: 14px; border: 2px solid #fbbf24; border-top: none; margin: 4px 0; }
#btn-calibrar.warn { color: #fbbf24; }
.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);
}
.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; }
.field-num[hidden] { display: none; }
.timer-controls-row2 { display: flex; align-items: center; gap: 8px; }
#btn-timer-start { margin-left: auto; }
#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; }
/* Voz y timer flotante (panel derecho) */
.df-voz { display: flex; flex-direction: column; gap: 8px; }
.df-voz .df-campo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #bbb; }
.df-voz .select { width: 130px; }
.df-voz-estado { font-size: 11px; color: rgba(255,255,255,0.45); }
.df-voz-estado.on { color: #4ade80; }
#btn-voz.active i { color: #fff; }
/* Timer flotante: sobre la galería, en el borde elegido o donde lo deje el tirador (arrastrándolo) */
.df-flotante { position: fixed; z-index: 950; min-width: 170px; padding: 8px 16px 10px; border-radius: 12px; cursor: move;
    background: rgba(10,10,20,0.78); border: 1px solid rgba(255,255,255,0.12); color: #fff; text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); user-select: none; touch-action: none; }
.df-flotante[hidden] { display: none; }
.df-flotante.pos-arriba { top: 12px; left: 50%; transform: translateX(-50%); }
.df-flotante.pos-abajo { bottom: 12px; left: 50%; transform: translateX(-50%); }
.df-flotante.pos-izquierda { left: 12px; top: 50%; transform: translateY(-50%); }
.df-flotante.pos-derecha { right: 12px; top: 50%; transform: translateY(-50%); }
.dff-estado { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ccc; }
.dff-estado.go { color: #4ade80; }
.dff-estado.pause { color: #fbbf24; }
.dff-num { font: 700 56px/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dff-info { font-size: 12px; color: rgba(255,255,255,0.6); min-height: 1em; }
.dff-mic { position: absolute; top: 6px; right: 8px; font-size: 13px; 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; }

/* 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="soportes-layer"></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" id="btn-calibrar" title="Calibrar la pantalla (tamaño real de las dianas)"><i class="bi bi-rulers"></i></button>
            <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>
    <!-- Mis baterías: las guardadas con «Guardar batería en la paleta» (navegador y, con sesión, cuenta) -->
    <div class="bat-palette" id="bat-palette" hidden></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">Práctica</span>
        <span class="rec-badge" id="rec-badge"><i class="bi bi-record-fill"></i> REC</span>
    </div>
    <div class="tbr-body">
        <!-- Un solo temporizador: el stage del lienzo o la secuencia de stages (mismas repeticiones y pausa) -->
        <div id="timer-panel">
            <div class="df-modo" id="df-modo" role="group" aria-label="Qué se practica">
                <button type="button" data-modo="stage" title="Practicar el stage del lienzo"><i class="bi bi-bullseye"></i> Stage actual</button>
                <button type="button" data-modo="secuencia" title="Practicar la secuencia de stages"><i class="bi bi-collection-play"></i> Secuencia</button>
            </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" id="timer-duration-campo" 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 (0 = sin fin)">
                    <i class="bi bi-arrow-repeat"></i>
                    <input type="number" id="timer-reps" min="0" max="50" step="1" value="1">
                </label>
                <label class="field-num" title="Pausa antes de empezar, entre repeticiones y entre los stages de la secuencia (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>
                <!-- Voz: al decir «Listo» / «Ready» → «Stand by», 3 s y pitido -->
                <button type="button" class="btn btn-ico" id="btn-voz" title="Empezar al decir «Listo» o «Ready»: desactivado"><i class="bi bi-mic-mute"></i></button>
                <button type="button" class="btn btn-ico" id="btn-timer-start" title="Iniciar"><i class="bi bi-play-fill"></i></button>
            </div>
            <span class="df-voz-estado" id="df-voz-estado"></span>
        </div>
        <!-- Secuencia: los stages en orden, cada uno con sus segundos; se reordena arrastrando -->
        <div class="df-seq" id="df-seq" hidden>
            <div class="df-seq-cab">
                <span><i class="bi bi-collection-play"></i> Secuencia</span>
                <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>
            </div>
            <div id="seq-list"></div>
            <select id="seq-add-select" class="select" title="Añadir stage a la secuencia"><option value="">-- Añadir stage --</option></select>
        </div>
        <div class="df-voz">
            <label class="df-campo"><span><i class="bi bi-window-stack"></i> Timer flotante</span>
                <select class="select" id="df-flotante-pos">
                    <option value="arriba">Arriba</option><option value="abajo">Abajo</option>
                    <option value="izquierda">Izquierda</option><option value="derecha">Derecha</option><option value="">Oculto</option>
                </select>
            </label>
        </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>

<!-- Timer flotante (copia del temporizador o de la secuencia en marcha); se arrastra a cualquier sitio -->
<div class="df-flotante pos-arriba" id="df-flotante" title="Arrastra para moverlo; en «Timer flotante» (panel derecho) eliges el borde">
    <i class="bi bi-mic-fill dff-mic" id="dff-mic" hidden></i>
    <div class="dff-estado" id="dff-estado">Preparado</div>
    <div class="dff-num" id="dff-num">0.00</div>
    <div class="dff-info" id="dff-info"></div>
</div>

<button class="tb-toggle tb-toggle-right" id="tb-toggle-right" title="Mostrar / Ocultar práctica (temporizador y secuencia)"><i class="bi bi-layout-sidebar-inset-reverse"></i></button>

<template id="seq-item-tpl">
    <div class="seq-item">
        <i class="bi bi-grip-vertical seq-item-asa" data-role="asa" title="Arrastra para reordenar"></i>
        <span class="seq-item-name" data-role="name"></span>
        <input type="number" class="input seq-item-sec" data-role="seconds" min="0.5" step="0.5" title="Segundos que se muestra el stage">
        <span class="seq-item-sec-label">s</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>
</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>
    <div class="ctx-color" id="ctx-color" title="Color del metal"><i class="bi bi-palette"></i></div>
    <div class="ctx-dist" id="ctx-dist" title="Distancia a la que se simula la diana"><i class="bi bi-arrows-expand-vertical"></i></div>
    <button data-action="soporte"><i class="bi bi-signpost-split"></i> <span>Soporte (estacas)</span></button>
    <button data-action="mov"><i class="bi bi-arrows-move"></i> Movimiento y exposición…</button>
    <button data-action="agrupar"><i class="bi bi-collection"></i> Agrupar en batería</button>
    <button data-action="desagrupar"><i class="bi bi-grid-1x2"></i> Desagrupar batería</button>
    <button data-action="guardar-bateria"><i class="bi bi-bookmark-plus"></i> Guardar batería en la paleta</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 btnRecordToggle = document.getElementById("btn-record-toggle");
    var camVisible = false;   // por defecto oculta: se muestra con el botón de la cámara (y se recuerda)
    var btnCamToggle = document.getElementById("btn-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;
    /* Qué se practica: el stage del lienzo o la secuencia (mismo temporizador, mismas repeticiones y pausa) */
    var MODO_LS_KEY = "dryfire-modo";
    var modo = "stage"; // "stage" | "secuencia"
    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_DEFAULT_SECONDS = 5;
    var seqItems = []; // {uid, stageId, seconds}
    var seqRunning = false;
    var seqIndex = -1;
    var seqRAF = null;
    var seqVuelta = 0;      // vuelta en curso (1..seqVueltas)
    var seqVueltas = 1;     // repeticiones del temporizador (0 = sin fin)
    var seqGap = 6;         // pausa del temporizador
    var seqDragUid = null;
    var seqAddSelect = document.getElementById("seq-add-select");
    var seqListEl = document.getElementById("seq-list");
    var seqItemTpl = document.getElementById("seq-item-tpl");
    var seqPanel = document.getElementById("df-seq");

    var IMG_BASE = "/static/stagedesigner/img/";  // recursos compartidos con el Stage Designer
    // Dianas con sus medidas reales en cm (reglamento IPSC Handgun: tarjetas Apéndices B2 y B3, poppers C2,
    // platos C3), las mismas de los SVG del Stage Designer (comando `dianas_svg`). Los platos llevan debajo
    // su pletina y un poste: el dibujo mide lado × 2·lado. El bidón azul (200 l) es un obstáculo más.
    var TARGET_TYPES = [
        { type: "classic", name: "IPSC", img: "tarjeta-ipsc", cm: [45, 57], cover: true },
        { type: "classicmini", name: "IPSC mini", img: "tarjeta-ipsc-mini", cm: [30, 37.5], cover: true },
        { type: "ns", name: "No-Shoot", img: "nonshoot", cm: [45, 57], cover: true },
        { type: "popper", name: "Popper", img: "popper-ipsc", cm: [30, 85], color: true },
        { type: "minipopper", name: "Mini popper", img: "popper-ipsc-mini", cm: [20, 56], color: true },
        { type: "plate", name: "Plato Ø20", img: "metal", cm: [20, 40], color: true },
        { type: "plate30", name: "Plato Ø30", img: "metal-30", cm: [30, 60], color: true },
        { type: "square", name: "Metal 15×15", img: "metal-cuadrado", cm: [15, 30], color: true },
        { type: "square30", name: "Metal 30×30", img: "metal-cuadrado-30", cm: [30, 60], color: true },
        { type: "bidon", name: "Bidón", img: "bidon-azul", cm: [58.5, 88] }
    ];
    var TIPO = {};
    TARGET_TYPES.forEach(function (t) { TIPO[t.type] = t; });

    // Distancias simuladas (m): cada diana se ve del tamaño que tendría a esa distancia (ver `tamDiana`).
    var DISTANCIAS = [5, 8, 10, 15, 20];
    var DIST_DEF = 10;
    function distValida(d) { return DISTANCIAS.indexOf(+d) >= 0 ? +d : DIST_DEF; }

    // Hard cover (mitad negra) solo en tarjetas y no-shoots.
    var COVERS = ["", "top", "right", "bottom", "left"];

    // Color de los metales (poppers y platos): blanco ("", el SVG de siempre) o una variante `<img>-<color>.svg`.
    var COLORES = [{ id: "", name: "Blanco", hex: "#f4f4f1" }, { id: "amarillo", name: "Amarillo", hex: "#f2c81e" },
                   { id: "azul", name: "Azul", hex: "#2f6fd6" }, { id: "rojo", name: "Rojo", hex: "#d32f2f" }];
    function colorValido(c) { return COLORES.some(function (x) { return x.id === c; }) ? c : ""; }

    function imgSrc(type, cover, color) {
        var t = TIPO[type] || TIPO.classic;
        return IMG_BASE + t.img + (cover && t.cover ? "-hc-" + cover : "") + (color && t.color ? "-" + color : "") + ".svg";
    }

    // Calibración de la pantalla (en este navegador): cm de la pantalla por píxel CSS y distancia (m) del
    // tirador a la pantalla. Sin calibrar se supone una pantalla de 120 cm de ancho vista a 3 m.
    var CALIB_LS_KEY = "dryfire-calibracion";
    var calib = null;
    function leerCalib() {
        try { var c = JSON.parse(localStorage.getItem(CALIB_LS_KEY)); if (c && c.cmPx > 0 && c.dist > 0) calib = c; } catch (_) { calib = null; }
    }
    function calibActual() { return calib || { cmPx: 120 / ((window.screen && screen.width) || 1920), dist: 3 }; }

    // Tamaño en unidades de la escena de una diana a `dist` metros: su tamaño real reducido por
    // distancia de la pantalla / distancia de la diana, pasado a píxeles con la calibración y a la escena.
    function tamDiana(type, dist) {
        var f = factor(dist), cm = (TIPO[type] || TIPO.classic).cm;
        return [cm[0] * f, cm[1] * f];
    }
    // Unidades de la escena por cm real de algo que está a `dist` metros.
    function factor(dist) {
        var c = calibActual(), H = canvas.clientHeight || window.innerHeight;
        return (c.dist / distValida(dist)) / c.cmPx * ESCENA_H / H;
    }

    // Aplica a una diana el tamaño de su distancia sin mover su centro.
    function aplicarTam(el) {
        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 wh = tamDiana(el.dataset.type, el.dataset.dist);
        el.style.width = wh[0] + "px"; el.style.height = wh[1] + "px";
        el.style.left = (cx - wh[0] / 2) + "px"; el.style.top = (cy - wh[1] / 2) + "px";
        el.querySelector(".t-dist").textContent = el.dataset.dist + " m";
    }
    function recalcularTamanos() {
        getAllTargets().forEach(aplicarTam);
        Object.keys(grupos).forEach(recolocarGrupo);
        refrescar();
    }

    // Punto de entrada: carga los stages guardados, monta la paleta y arranca todos los widgets.
    function init() {
        leerCalib();
        ajustarEscena();
        window.addEventListener("resize", ajustarEscena);
        // Zona segura 16:9 solo mientras se edita (menú izquierdo abierto).
        var tb = document.getElementById("toolbar");
        // Con los dos menús laterales ocultos (práctica), las dianas móviles se mueven (`practicaCambia`).
        var editando = function () { document.body.classList.toggle("df-editando", !tb.classList.contains("off")); practicaCambia(); refrescar(); };
        new MutationObserver(editando).observe(tb, { attributes: true, attributeFilter: ["class"] });
        new MutationObserver(editando).observe(document.getElementById("toolbar-right"), { attributes: true, attributeFilter: ["class"] });
        editando();
        loadAll();
        leerBaterias();
        buildPalette();
        pintarBaterias();
        btnSnap.addEventListener("click", togSnap);
        document.getElementById("btn-calibrar").addEventListener("click", abrirCalibracion);
        pintarCalibrar();
        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() {
            toolbarRight.classList.toggle("off");
        });
        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();
        initVoz();
        initCam();
        initSeq();
        initModo();
        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);
        recalcularTamanos();   // el tamaño real en píxeles no cambia: en unidades de la escena, sí
        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: [], grupos: [], 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.grupos = collectGrupos();
        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();
        // Baterías: sus tarjetas se colocan desde el centro de la batería con su posición real (cm).
        (s.grupos || []).forEach(function (g) { grupos[g.id] = { id: g.id, mov: g.mov || null, f: factor(g.dist) }; });
        var porId = {}, conSoporte = {};
        (s.grupos || []).forEach(function (g) { porId[g.id] = g; });
        (s.targets || []).forEach(function (t) { if (t.grupo && t.soporte) conSoporte[t.grupo] = true; });
        (s.targets || []).forEach(function(t) {
            var g = t.grupo && porId[t.grupo];
            if (g) {
                var f = factor(g.dist);
                t = Object.assign({}, t, { x: g.x + (t.dx || 0) * f, y: g.y + (t.dy || 0) * f, dist: g.dist });
                if (g.soporte && !conSoporte[g.id]) { t.soporte = true; conSoporte[g.id] = true; }   // formato anterior
            }
            createTarget(t, false);
        });
        Object.keys(grupos).forEach(function (gid) { unSoporte(miembros(gid)); });
        limpiarGrupos();
        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ática --- */
    /* La secuencia usa el mismo temporizador que el stage actual (display, sentido de la cuenta, Iniciar,
       grabar, cámara y voz): cada stage se muestra sus segundos; la Pausa del temporizador va antes de
       empezar, entre stages y entre vueltas, y las Repeticiones son las vueltas (0 = sin fin). */
    // Restaura la configuración guardada de la secuencia y enlaza sus controles en la barra derecha.
    function initSeq() {
        restoreSeqConfig();
        seqAddSelect.addEventListener("change", function () { if (seqAddSelect.value) addSeqItem(); });
        refreshSeqAddSelect();
        renderSeqList();
    }

    // Modo de la práctica: el stage del lienzo o la secuencia (se recuerda en este navegador).
    function initModo() {
        document.querySelectorAll("#df-modo button").forEach(function (b) {
            b.addEventListener("click", function () { setModo(b.dataset.modo); });
        });
        setModo(lsGet(MODO_LS_KEY) === "secuencia" ? "secuencia" : "stage");
    }
    function setModo(m) {
        if (timerRunning || seqRunning) return;
        modo = m === "secuencia" ? "secuencia" : "stage";
        lsSet(MODO_LS_KEY, modo);
        document.querySelectorAll("#df-modo button").forEach(function (b) { b.classList.toggle("active", b.dataset.modo === modo); });
        seqPanel.hidden = modo !== "secuencia";
        document.getElementById("timer-duration-campo").hidden = modo === "secuencia";   // cada stage lleva sus segundos
    }
    function setModoDisabled(disabled) {
        document.querySelectorAll("#df-modo button").forEach(function (b) { b.disabled = disabled; });
    }

    // Botón Iniciar / Detener (y la voz): arranca lo del modo elegido, o para lo que esté en marcha.
    function iniciar(porVoz) {
        if (modo === "secuencia") startSeqPlayback(porVoz); else iniciarTimer(porVoz);
    }
    function detener() {
        if (seqRunning) stopSeqPlayback(); else if (timerRunning) stopSequence(); else stopRecording();
    }

    // Muestra en el display del temporizador el stage/pausa de la secuencia y los segundos, atrás o hacia
    // adelante según el sentido de la cuenta del temporizador, con dos decimales.
    function updateSeqDisplay(remaining, opts) {
        var displayed = timerCountUp ? (opts.total - remaining) : remaining;
        timerStateEl.textContent = opts.label;
        timerStateEl.className = opts.pause ? "pause" : "go";
        timerNumEl.textContent = formatTimerNum(displayed, 2);
        var vuelta = seqVueltas === 1 ? "" : "Vuelta " + seqVuelta + (seqVueltas ? " / " + seqVueltas : "");
        timerRepEl.textContent = [vuelta, opts.name || ""].filter(Boolean).join(" · ");
    }

    // Restaura la playlist desde localStorage, descartando ítems cuyo stage ya no exista
    // (la pausa por ítem, el modo al terminar y la pausa de bucle de versiones anteriores se ignoran).
    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);
            return { uid: it.uid || genId(), stageId: it.stageId, seconds: (sec > 0) ? sec : SEQ_DEFAULT_SECONDS };
        });
    }

    // Guarda la playlist en localStorage.
    function persistSeqConfig() {
        try {
            localStorage.setItem(SEQ_LS_KEY, JSON.stringify({ items: seqItems }));
        } catch (_) { /* storage unavailable */ }
        programarCuenta();
    }

    // Repuebla el selector "Añadir stage" con los stages guardados.
    function refreshSeqAddSelect() {
        seqAddSelect.innerHTML = '<option value="">-- Añadir 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ñade stages a la secuencia</div>';
        } else {
            seqItems.forEach(function (item) { seqListEl.appendChild(createSeqItemDom(item)); });
        }
        setSeqControlsDisabled(seqRunning);
    }

    // Resalta la fila del stage actualmente en reproducción (-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", block: "nearest" });
    }

    // Clona la plantilla de un ítem de la secuencia y enlaza sus controles (segundos, quitar y arrastrar
    // desde el asa para reordenar).
    function createSeqItemDom(item) {
        var frag = seqItemTpl.content.cloneNode(true);
        var el = frag.querySelector(".seq-item");
        var secInp = el.querySelector('[data-role="seconds"]');

        el.querySelector('[data-role="name"]').textContent = getStageName(item.stageId);
        secInp.value = item.seconds;
        el.querySelector('[data-role="remove"]').addEventListener("click", function () { removeSeqItem(item.uid); });
        secInp.addEventListener("change", function () { updateSeqItemSeconds(item.uid, secInp.value); });

        // Solo se arrastra desde el asa (así el número se puede seleccionar y editar).
        el.querySelector('[data-role="asa"]').addEventListener("pointerdown", function () { if (!seqRunning) el.draggable = true; });
        el.addEventListener("dragstart", function (e) {
            seqDragUid = item.uid;
            e.dataTransfer.effectAllowed = "move";
            try { e.dataTransfer.setData("text/plain", item.uid); } catch (_) { /* solo para Firefox */ }
        });
        el.addEventListener("dragend", function () {
            el.draggable = false; seqDragUid = null;
            seqListEl.querySelectorAll(".drag-sobre").forEach(function (x) { x.classList.remove("drag-sobre"); });
        });
        el.addEventListener("dragover", function (e) {
            if (!seqDragUid || seqDragUid === item.uid) return;
            e.preventDefault();
            el.classList.add("drag-sobre");
        });
        el.addEventListener("dragleave", function () { el.classList.remove("drag-sobre"); });
        el.addEventListener("drop", function (e) {
            e.preventDefault();
            if (seqDragUid && seqDragUid !== item.uid) moveSeqItemTo(seqDragUid, item.uid);
        });
        return el;
    }

    // Añade el stage elegido en el selector como nuevo ítem de la secuencia y limpia el selector.
    function addSeqItem() {
        var v = seqAddSelect.value;
        if (!v) return;
        seqItems.push({ uid: genId(), stageId: v, seconds: SEQ_DEFAULT_SECONDS });
        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();
    }

    // Lleva un ítem de la secuencia (arrastrado) al sitio de otro.
    function moveSeqItemTo(uid, destUid) {
        var idx = seqItems.findIndex(function (it) { return it.uid === uid; });
        var dest = seqItems.findIndex(function (it) { return it.uid === destUid; });
        if (idx < 0 || dest < 0) return;
        seqItems.splice(dest, 0, seqItems.splice(idx, 1)[0]);
        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();
    }

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

    // Iniciar en modo secuencia: valida que haya ítems y la arranca (con la grabación, si está activada).
    function startSeqPlayback(porVoz) {
        if (seqItems.length === 0) { toast("Añade al menos un stage a la secuencia"); return; }
        if (timerRunning) stopSequence();
        var ir = function () { beginSeqPlayback(porVoz === true); };
        if (shouldStartRecording()) {
            startRecording().then(ir, ir);
        } else {
            ir();
        }
    }

    // Pone la UI en estado "en marcha" de la secuencia (botón, controles, modo).
    function activateSeqSession() {
        var gap = parseFloat(timerGapInp.value);
        var reps = parseInt(timerRepsInp.value, 10);
        seqGap = gap >= 0 ? gap : 6;
        seqVueltas = reps >= 0 ? reps : 1;
        seqVuelta = 1;
        seqRunning = true;
        pintarBotonInicio(true);
        setSeqControlsDisabled(true);
        vozActualizar();
    }

    /* La secuencia siempre arranca con la Pausa del temporizador antes de mostrar el primer ejercicio
       (o, con la voz, con «Stand by»): da tiempo a prepararse y, si hay grabación en curso, su
       señal real de MediaRecorder.start() se programa REC_LEAD_MS antes de que acabe esa pausa, para
       que ya esté grabando cuando aparezca el stage. */
    function beginSeqPlayback(porVoz) {
        activateSeqSession();
        if (porVoz) {   // «Listo» → «Stand by» y a los 3 s el primer stage con su pitido
            scheduleRecordingStart(STANDBY_S);
            seqStandby(function () { playSeqItem(0); });
            return;
        }
        scheduleRecordingStart(seqGap);
        playSeqPause("Preparados", seqGap, function () { playSeqItem(0); });
    }

    // «Stand by» con el lienzo vacío y, a los 3 s, `cb`.
    function seqStandby(cb) {
        clearAll();
        updateSeqDisplay(0, { label: "Stand by", name: "", pause: true, total: 0 });
        standby(cb);
    }

    // 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; }
        pintarBotonInicio(false);
        pintarPreparado();
        setSeqControlsDisabled(false);
        setActiveSeqChip(-1);
        cancelarStandby();
        if (voz.activa) pararMovimientos();
        if (timerRunning) stopSequence();
        stopRecording();
        vozActualizar();
    }

    // Muestra el stage indicado de la playlist (con un pitido de aviso) y, tras sus segundos, pasa al
    // siguiente con la Pausa de por medio; al acabar la vuelta, otra (con la voz, tras «Listo») o fin.
    function playSeqItem(index) {
        if (!seqRunning) return;
        if (index >= seqItems.length) {
            if (seqVueltas === 0 || seqVuelta < seqVueltas) {
                seqVuelta++;
                if (voz.activa) {
                    clearAll();
                    updateSeqDisplay(0, { label: "Di «Listo»", name: "", pause: true, total: 0 });
                    esperarVozSerie(function () { seqStandby(function () { playSeqItem(0); }); });
                } else {
                    playSeqPause("Pausa", seqGap, function () { playSeqItem(0); });
                }
            } 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;
            if (!isLast && seqGap > 0) {
                playSeqPause("Pausa", seqGap, function () { playSeqItem(index + 1); });
            } else {
                playSeqItem(index + 1);
            }
        });
    }

    // Cuenta atrás de una pausa de la secuencia (inicio, entre ejercicios o entre vueltas):
    // limpia el stage y la muestra con la duración indicada. A STANDBY_S segundos del final (o al empezar,
    // si es más corta) se oye «Stand by»; al acabar, el stage aparece con el pitido de inicio.
    function playSeqPause(label, durationSec, onDone) {
        clearAll();
        var standbyDicho = false;
        runSeqPhase(durationSec, function (remaining) {
            if (!standbyDicho && durationSec > 0 && remaining <= STANDBY_S) { standbyDicho = true; decir("Stand by"); }
            updateSeqDisplay(remaining, { label: standbyDicho ? "Stand by" : label, name: "", pause: true, total: durationSec });
        }, onDone);
    }

    // Primitiva de cuenta atrás con requestAnimationFrame reutilizada por playSeqItem y playSeqPause.
    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="' + imgSrc(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. La de una batería lleva su
    // `grupo` y su posición en cm respecto al centro de la batería (dx, dy); la suelta, su movimiento. El soporte,
    // en las dos (en una batería, solo una tarjeta).
    function readTarget(el) {
        var c = centroEl(el);
        var d = {
            id: el.dataset.id, type: el.dataset.type,
            x: Math.round(c.x * 10) / 10, y: Math.round(c.y * 10) / 10,
            rot: parseInt(el.dataset.rot) || 0, z: parseInt(el.style.zIndex) || 1,
            dist: distValida(el.dataset.dist),
            cover: el.dataset.cover || "",
            color: el.dataset.color || ""
        };
        var g = el.dataset.grupo && grupos[el.dataset.grupo];
        if (el.dfProps.soporte) d.soporte = true;
        if (g) {
            var cg = centroDe(miembros(g.id)), f = g.f || factor(d.dist);
            d.grupo = g.id; d.dx = Math.round((c.x - cg.x) / f * 10) / 10; d.dy = Math.round((c.y - cg.y) / f * 10) / 10;
        } else if (el.dfProps.mov) d.mov = el.dfProps.mov;
        return d;
    }

    // Baterías del lienzo: centro (unidades de la escena), distancia y movimiento.
    function collectGrupos() {
        return Object.keys(grupos).map(function (gid) {
            var g = grupos[gid], els = miembros(gid), c = centroDe(els);
            return { id: gid, x: Math.round(c.x * 10) / 10, y: Math.round(c.y * 10) / 10, dist: distValida(els[0].dataset.dist),
                     mov: g.mov || null };
        });
    }

    // Vacía el lienzo y la selección actual.
    function clearAll() { tLayer.innerHTML = ""; soportesLayer.innerHTML = ""; soporteEls = {}; grupos = {}; 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) {
        // Los antiguos "mini" (mini popper) son el mini popper; sin distancia (antes, tamaño libre), a 10 m.
        if (d.type === "mini") d.type = "minipopper";
        if (!TIPO[d.type]) d.type = "classic";
        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.dist = distValida(d.dist);
        el.dataset.cover = TIPO[d.type].cover ? (d.cover || "") : "";
        el.dataset.color = TIPO[d.type].color ? colorValido(d.color) : "";
        // El soporte es de la tarjeta; el movimiento, el de su batería o, suelta, el suyo.
        el.dataset.grupo = d.grupo && grupos[d.grupo] ? d.grupo : "";
        el.dfProps = { soporte: !!d.soporte && !!PAPEL[d.type], mov: !el.dataset.grupo && MOVIL[d.type] ? d.mov || null : null };
        el.style.left = d.x + "px";   // centro: aplicarTam pone el tamaño alrededor
        el.style.top = d.y + "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, el.dataset.color) + '" alt="' + d.type + '"><span class="t-dist"></span>';
        aplicarTam(el);
        el.addEventListener("pointerdown", targetDown);
        el.addEventListener("wheel", targetWheel, { passive: false });
        el.addEventListener("contextmenu", targetCtx);
        tLayer.appendChild(el);
        if (autoSelect !== false) select(el, false);
        refrescar();
        return el;
    }

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

    // Selecciona una diana, o su batería entera (con Shift, la añade o la quita de la selección múltiple).
    function select(el, shiftKey) {
        var els = unidad(el).els;
        if (shiftKey) {
            var quitar = selTargets.indexOf(el) >= 0;
            els.forEach(function (t) {
                var idx = selTargets.indexOf(t);
                if (quitar && idx >= 0) { t.classList.remove("sel"); selTargets.splice(idx, 1); }
                else if (!quitar && idx < 0) { t.classList.add("sel"); selTargets.push(t); }
            });
        } else {
            deselect();
            els.forEach(function (t) { t.classList.add("sel"); selTargets.push(t); });
        }
    }
    // 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;
        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;

        var pulsada = starts.filter(function (s) { return s.el === el; })[0] || starts[0];
        function onMove(ev) {
            var dx = (ev.clientX - baseX) / escalaK, dy = (ev.clientY - baseY) / escalaK;   // píxeles → unidades
            if (snapOn) {   // la diana pulsada se ajusta a la rejilla; las demás se mueven lo mismo
                dx = Math.round((pulsada.sx + dx) / SNAP) * SNAP - pulsada.sx;
                dy = Math.round((pulsada.sy + dy) / SNAP) * SNAP - pulsada.sy;
            }
            starts.forEach(function(s) {
                s.el.style.left = (s.sx + dx) + "px";
                s.el.style.top = (s.sy + dy) + "px";
            });
            refrescar();
        }

        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)";
        });
    }

    // 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.querySelectorAll("[data-dist]").forEach(function (b) { b.classList.toggle("active", b.dataset.dist === el.dataset.dist); });
        ctxMenu.querySelectorAll("[data-color]").forEach(function (b) { b.classList.toggle("active", b.dataset.color === (el.dataset.color || "")); });
        document.getElementById("ctx-color").hidden = !(selTargets.length ? selTargets : [el]).some(function (t) { return TIPO[t.dataset.type].color; });
        // Opciones de tarjetas: soporte y movimiento (tarjetas y baterías), agrupar (2+ tarjetas), la batería.
        var u = unidad(el), papel = !!PAPEL[el.dataset.type], accion = function (a) { return ctxMenu.querySelector('[data-action="' + a + '"]'); };
        var papeles = unidades(selTargets.length ? selTargets : [el]).filter(function (x) { return PAPEL[x.els[0].dataset.type]; });
        accion("soporte").hidden = !papel;
        accion("soporte").querySelector("span").textContent = el.dfProps.soporte ? "Quitar soporte"
            : u.grupo && u.els.some(function (t) { return t.dfProps.soporte; }) ? "Poner el soporte en esta tarjeta" : "Soporte (estacas)";
        accion("mov").hidden = !MOVIL[el.dataset.type];
        accion("agrupar").hidden = papeles.length < 2;
        accion("desagrupar").hidden = !u.grupo;
        accion("guardar-bateria").hidden = !u.grupo;
        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() {
        var fila = document.getElementById("ctx-dist");
        DISTANCIAS.forEach(function (d) {
            var b = document.createElement("button");
            b.dataset.action = "dist"; b.dataset.dist = d; b.textContent = d;
            b.title = "Simular a " + d + " m";
            fila.appendChild(b);
        });
        fila.insertAdjacentHTML("beforeend", "m");
        var colores = document.getElementById("ctx-color");
        COLORES.forEach(function (c) {
            var b = document.createElement("button");
            b.dataset.action = "color"; b.dataset.color = c.id; b.title = c.name;
            b.style.background = c.hex;
            colores.appendChild(b);
        });
        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 "color": targets.forEach(function(t) { ponerColor(t, btn.dataset.color); }); break;
                    case "dist": unidades(targets).forEach(function(u) { ponerDistancia(u, +btn.dataset.dist); }); break;
                    case "soporte": alternarSoporte(targets, ctxTarget); break;
                    case "mov": abrirMovimiento(unidades(targets)); break;
                    case "agrupar": agruparSeleccion(); break;
                    case "desagrupar": desagrupar(unidad(ctxTarget)); break;
                    case "guardar-bateria": pedirNombreBateria(unidad(ctxTarget)); break;
                    case "duplicate": unidades(targets).forEach(dupUnidad); 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 (!TIPO[el.dataset.type].cover) 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);
    }

    // Pinta un metal (poppers y platos) del color elegido; el resto de dianas no cambia.
    function ponerColor(el, color) {
        if (!TIPO[el.dataset.type].color) return;
        el.dataset.color = colorValido(color);
        el.querySelector("img").src = imgSrc(el.dataset.type, el.dataset.cover, el.dataset.color);
    }

    // Duplica una diana o una batería entera (con su soporte y movimiento) con un pequeño desplazamiento.
    function dupUnidad(u) {
        var gid = u.grupo ? "g" + genId() : null;
        if (gid) grupos[gid] = { id: gid, mov: clonar(u.grupo.mov), f: u.grupo.f };
        u.els.forEach(function (el) {
            var d = readTarget(el);
            d.id = genId(); d.x += 50; d.y += 50; d.grupo = gid; d.mov = clonar(d.mov);
            createTarget(d, false);
        });
    }

    // 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);
        limpiarGrupos();
        refrescar();
    }

    // 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 acercarlas o alejarlas.
                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();
                    distanciaSeleccion(e.key === "+" ? -1 : 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) {
        if (!selTargets.length) return;
        if (snapOn) {   // la primera se alinea a la rejilla y las demás se mueven lo mismo (las baterías no se deforman)
            var l0 = parseFloat(selTargets[0].style.left) || 0, t0 = parseFloat(selTargets[0].style.top) || 0;
            dx += Math.round(l0 / SNAP) * SNAP - l0; dy += Math.round(t0 / SNAP) * SNAP - t0;
        }
        selTargets.forEach(function (el) {
            el.style.left = ((parseFloat(el.style.left) || 0) + dx) + "px";
            el.style.top = ((parseFloat(el.style.top) || 0) + dy) + "px";
        });
        refrescar();
    }

    // Pone una diana o una batería (`u`, ver `unidad`) a `dist` metros: el tamaño cambia alrededor del centro
    // de cada tarjeta y, en la batería, las tarjetas se recolocan a su separación real.
    function ponerDistancia(u, dist) {
        u.els.forEach(function (el) { el.dataset.dist = distValida(dist); aplicarTam(el); });
        if (u.grupo) recolocarGrupo(u.id);
        refrescar();
    }

    // Acerca (`paso` = −1) o aleja (+1) la selección a la distancia anterior / siguiente de DISTANCIAS.
    function distanciaSeleccion(paso) {
        var us = unidades(selTargets);
        us.forEach(function (u) {
            var i = DISTANCIAS.indexOf(distValida(u.els[0].dataset.dist));
            ponerDistancia(u, DISTANCIAS[Math.max(0, Math.min(DISTANCIAS.length - 1, i + paso))]);
        });
        if (us.length === 1) toast("Distancia: " + us[0].els[0].dataset.dist + " m");
    }

    // ---- Calibración de la pantalla ----
    // El botón avisa (ámbar) mientras no se ha calibrado.
    function pintarCalibrar() {
        var b = document.getElementById("btn-calibrar");
        b.classList.toggle("warn", !calib);
        b.title = calib ? "Calibrar la pantalla (tamaño real de las dianas)" : "Pantalla sin calibrar: las dianas no salen a su tamaño real";
    }

    // Pide el ancho real (cm) de la zona de Dry Fire en la pantalla y la distancia del tirador; una barra
    // (de 50 a 5 cm, la mayor que quepa en el diálogo, que es ancho) sirve para comprobarlo con un metro.
    function abrirCalibracion() {
        var c = calibActual(), W = canvas.clientWidth || window.innerWidth;
        abrirModal("Calibrar la pantalla",
            '<p class="df-ayuda">Para que cada diana se vea del tamaño que tendría a su distancia (5, 8, 10, 15 o 20 m), ' +
            'Dry Fire necesita saber cuánto mide la pantalla y a qué distancia estás de ella. Pon el navegador a pantalla completa (F11) antes de medir.</p>' +
            '<label class="df-campo">Ancho de la imagen (de borde a borde), en cm<input class="input" id="df-cal-ancho" type="number" min="10" max="2000" step="0.5" value="' + (Math.round(c.cmPx * W * 10) / 10) + '"></label>' +
            '<label class="df-campo">Distancia del tirador a la pantalla, en m<input class="input" id="df-cal-dist" type="number" min="0.5" max="20" step="0.1" value="' + c.dist + '"></label>' +
            '<p class="df-ayuda">Comprobación: con un metro, esta barra debe medir <b id="df-cal-cm">50</b> cm.</p><div class="df-regla" id="df-cal-regla"></div>' +
            (calib ? '' : '<p class="df-ayuda">Ahora no está calibrada: se supone una pantalla de 120 cm de ancho a 3 m.</p>'),
            '<button class="btn" id="df-cal-cancelar">Cancelar</button><button class="btn active" id="df-cal-guardar"><i class="bi bi-check-lg"></i> Guardar</button>');
        modal.querySelector(".df-card").classList.add("ancha");
        var ancho = document.getElementById("df-cal-ancho"), dist = document.getElementById("df-cal-dist");
        var regla = function () {
            var a = parseFloat(ancho.value), pxCm = a > 0 ? W / a : 0;
            var max = document.getElementById("df-modal-body").clientWidth - 28;
            var cm = [50, 40, 30, 20, 10, 5].filter(function (x) { return x * pxCm <= max; })[0] || 5;
            document.getElementById("df-cal-cm").textContent = cm;
            document.getElementById("df-cal-regla").style.width = Math.min(cm * pxCm, max) + "px";
        };
        ancho.addEventListener("input", regla);
        regla();
        document.getElementById("df-cal-cancelar").addEventListener("click", cerrarModal);
        document.getElementById("df-cal-guardar").addEventListener("click", function () {
            var a = parseFloat(ancho.value), d = parseFloat(dist.value);
            if (!(a >= 10) || !(d >= 0.5)) { toast("Revisa el ancho y la distancia"); return; }
            calib = { cmPx: a / W, dist: d };
            try { localStorage.setItem(CALIB_LS_KEY, JSON.stringify(calib)); } catch (_) { /* sin almacenamiento: vale para esta visita */ }
            cerrarModal();
            pintarCalibrar();
            recalcularTamanos();
            toast("Pantalla calibrada");
        });
    }

    // ---- Baterías, soportes y dianas móviles ----
    // Una batería es un grupo de tarjetas (IPSC, mini y no-shoot) que se selecciona, se mueve, se pone a una
    // distancia y lleva movimiento como una sola diana. En el DOM cada tarjeta lleva data-grupo y el movimiento
    // de la batería está en `grupos`; el de una diana suelta, en `el.dfProps`. El soporte es de cada tarjeta
    // (`el.dfProps.soporte`): en una batería solo una lo lleva y las demás cuelgan de ella. La separación
    // entre las tarjetas es real (cm): al cambiar el tamaño (distancia, calibración, ventana) se recolocan
    // alrededor del centro de la batería (`recolocarGrupo`).
    var PAPEL = { classic: true, classicmini: true, ns: true };
    // Pueden moverse (movimiento y exposición): las tarjetas, las baterías y los metales (poppers y platos).
    var MOVIL = { classic: true, classicmini: true, ns: true, popper: true, minipopper: true, plate: true, plate30: true, square: true, square30: true };
    var grupos = {};              // id → { id, mov, f (unidades por cm con que se colocó) }
    var soportesLayer = document.getElementById("soportes-layer");
    var soporteEls = {};          // id de la unidad → elemento de su soporte
    var SOPORTE_BAJO = 90;        // cm de estaca bajo la tarjeta (su borde inferior, a 90 cm del suelo)
    var BASCULA_S = 0.35;         // segundos que tarda la báscula en subir o bajar
    var MOV_DEF = { tipo: "", recorrido: 60, pasada: 1.5, angulo0: 0, angulo1: 90, pivote: "centro", exposicion: 5, ocultacion: 2 };

    function clonar(o) { return o ? JSON.parse(JSON.stringify(o)) : null; }
    function miembros(gid) { return Array.prototype.filter.call(getAllTargets(), function (t) { return t.dataset.grupo === gid; }); }
    function centroEl(el) {
        return { x: (parseFloat(el.style.left) || 0) + (parseFloat(el.style.width) || 0) / 2,
                 y: (parseFloat(el.style.top) || 0) + (parseFloat(el.style.height) || 0) / 2 };
    }
    // Rectángulo (unidades de la escena) que ocupan unas dianas, sin contar su giro.
    function caja(els) {
        var b = { l: Infinity, t: Infinity, r: -Infinity, b: -Infinity };
        els.forEach(function (el) {
            var l = parseFloat(el.style.left) || 0, t = parseFloat(el.style.top) || 0;
            b.l = Math.min(b.l, l); b.t = Math.min(b.t, t);
            b.r = Math.max(b.r, l + (parseFloat(el.style.width) || 0)); b.b = Math.max(b.b, t + (parseFloat(el.style.height) || 0));
        });
        return b;
    }
    function centroDe(els) {
        var cs = els.map(centroEl), xs = cs.map(function (c) { return c.x; }), ys = cs.map(function (c) { return c.y; });
        return { x: (Math.min.apply(null, xs) + Math.max.apply(null, xs)) / 2, y: (Math.min.apply(null, ys) + Math.max.apply(null, ys)) / 2 };
    }
    function ponerCentro(el, x, y) {
        el.style.left = (x - (parseFloat(el.style.width) || 0) / 2) + "px";
        el.style.top = (y - (parseFloat(el.style.height) || 0) / 2) + "px";
    }

    // Unidad de una diana: su batería entera o ella sola ({ id, grupo, els }).
    function unidad(el) {
        var gid = el.dataset.grupo;
        if (gid && grupos[gid]) return { id: gid, grupo: grupos[gid], els: miembros(gid) };
        return { id: el.dataset.id, grupo: null, els: [el] };
    }
    function unidades(els) {
        var vistas = {}, out = [];
        Array.prototype.forEach.call(els, function (el) {
            var u = unidad(el);
            if (!vistas[u.id]) { vistas[u.id] = true; out.push(u); }
        });
        return out;
    }
    // Movimiento de una unidad: el de la batería o el de la diana suelta (`props(u).mov`).
    function props(u) { return u.grupo || u.els[0].dfProps; }

    // Recoloca las tarjetas de una batería a su separación real con el tamaño actual.
    function recolocarGrupo(gid) {
        var g = grupos[gid], els = miembros(gid);
        if (!g || !els.length) return;
        var f = factor(els[0].dataset.dist);
        if (g.f && Math.abs(g.f - f) > 1e-9) {
            var c = centroDe(els), k = f / g.f;
            els.forEach(function (el) { var p = centroEl(el); ponerCentro(el, c.x + (p.x - c.x) * k, c.y + (p.y - c.y) * k); });
        }
        g.f = f;
    }

    // Una batería sin tarjetas desaparece; con una sola, esa tarjeta queda suelta con el movimiento de la batería.
    function limpiarGrupos() {
        Object.keys(grupos).forEach(function (gid) {
            var els = miembros(gid);
            if (els.length > 1) return;
            if (els.length === 1) { els[0].dataset.grupo = ""; els[0].dfProps.mov = grupos[gid].mov; }
            delete grupos[gid];
        });
    }

    // En una batería solo una tarjeta lleva soporte: la primera que lo tenga (las demás se lo quitan).
    function unSoporte(els) {
        var con = els.filter(function (el) { return el.dfProps.soporte; })[0];
        els.forEach(function (el) { el.dfProps.soporte = el === con; });
    }

    // Agrupa las tarjetas seleccionadas (y las baterías a las que pertenecen) en una batería nueva, a la
    // distancia de la primera; el soporte se queda en la tarjeta que lo tenía (solo una).
    function agruparSeleccion() {
        var els = selTargets.filter(function (t) { return PAPEL[t.dataset.type]; });
        if (els.length < 2) { toast("Selecciona al menos 2 tarjetas (IPSC, mini o no-shoot)"); return; }
        var gid = "g" + genId(), dist = els[0].dataset.dist;
        els.forEach(function (el) {
            el.dataset.grupo = gid;
            el.dfProps.mov = null;
            if (el.dataset.dist !== dist) { el.dataset.dist = dist; aplicarTam(el); }
        });
        unSoporte(els);
        grupos[gid] = { id: gid, mov: null, f: factor(dist) };
        limpiarGrupos();
        select(els[0], false);
        refrescar();
        toast("Batería de " + els.length + " tarjetas");
    }

    // Deshace una batería: cada tarjeta queda suelta con el movimiento de la batería (y la del soporte, con él).
    function desagrupar(u) {
        if (!u.grupo) return;
        u.els.forEach(function (el) { el.dataset.grupo = ""; el.dfProps.mov = clonar(u.grupo.mov); });
        delete grupos[u.id];
        refrescar();
        toast("Batería deshecha");
    }

    // Pone o quita el soporte de la tarjeta del clic derecho; en una batería, al ponerlo en una se quita de las
    // demás (solo una lo lleva). Con varias dianas sueltas seleccionadas, a todas.
    function alternarSoporte(targets, el) {
        var u = unidad(el), poner = !el.dfProps.soporte;
        if (u.grupo) u.els.forEach(function (t) { t.dfProps.soporte = poner && t === el; });
        else unidades(targets).forEach(function (x) { if (!x.grupo && PAPEL[x.els[0].dataset.type]) x.els[0].dfProps.soporte = poner; });
        refrescar();
    }

    // ---- Dibujo: soportes y etiquetas ----
    var refrescoPendiente = false;
    function refrescar() {
        if (refrescoPendiente) return;
        refrescoPendiente = true;
        requestAnimationFrame(function () { refrescoPendiente = false; pintarUnidades(); });
    }

    // Etiqueta de cada unidad (solo editando): distancia, batería y movimiento.
    var MOV_TXT = { bascula: "báscula", vertical: "↕", horizontal: "↔", giro: "⟳" };
    function num(x) { return String(x).replace(".", ","); }
    function etiqueta(u) {
        var m = movDe(u), t = [u.els[0].dataset.dist + " m"];
        if (u.grupo) t.push("batería");
        if (m && m.tipo) t.push(MOV_TXT[m.tipo] + (m.tipo === "giro" ? " " + num(m.angulo0 || 0) + "–" + num(m.angulo1 || 0) + "°" : ""));
        if (m && ciclico(m)) t.push("⏱ " + num(m.exposicion) + " / " + num(m.ocultacion) + " s");
        return t.join(" · ");
    }

    function pintarUnidades() {
        soportesLayer.innerHTML = "";
        soporteEls = {};
        unidades(getAllTargets()).forEach(function (u) {
            u.els.forEach(function (el, i) { el.querySelector(".t-dist").classList.toggle("off", i > 0); });
            u.els[0].querySelector(".t-dist").textContent = etiqueta(u);
            var con = u.els.filter(function (el) { return el.dfProps.soporte && PAPEL[el.dataset.type]; })[0];
            if (con) soporteEls[u.id] = pintarSoporte(con);
        });
        aplicarPose();
    }

    // Soporte de una tarjeta: dos estacas de madera hasta el suelo (SOPORTE_BAJO cm bajo la tarjeta) sobre una
    // base. En una batería es el de la tarjeta que lo lleva; las demás cuelgan de ella.
    function pintarSoporte(el) {
        var f = factor(el.dataset.dist), b = caja([el]), M = 12;
        var W = (b.r - b.l) / f, H = (b.b - b.t) / f, E = SOPORTE_BAJO, alto = H + E;
        var madera = 'fill="#9b6b3d" stroke="#5c3d1e" stroke-width="0.6"';
        var estaca = function (x) { return '<rect x="' + x + '" y="' + (H * 0.3) + '" width="3" height="' + (alto - 4 - H * 0.3) + '" ' + madera + '/>'; };
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + (-M) + ' 0 ' + (W + 2 * M) + ' ' + alto + '" preserveAspectRatio="none">' +
            estaca(4) + estaca(W - 7) +
            '<rect x="-10" y="' + (alto - 5) + '" width="' + (W + 20) + '" height="5" rx="1" fill="#4a4d52"/></svg>';
        var d = document.createElement("div");
        d.className = "soporte";
        d.style.left = (b.l - M * f) + "px"; d.style.top = b.t + "px";
        d.style.width = (W + 2 * M) * f + "px"; d.style.height = alto * f + "px";
        d.innerHTML = svg;
        soportesLayer.appendChild(d);
        return d;
    }

    // ---- Movimiento y exposición ----
    // Cada unidad (tarjeta suelta o batería) puede llevar `mov`: báscula ascendente (sube girando desde abajo
    // al empezar cada exposición y baja al acabarla), vertical u horizontal (va y viene `recorrido` cm en
    // `pasada` s mientras se ve) y un ciclo de exposición y ocultación (p. ej. 5 s visible, 2 s oculta) que se
    // repite en bucle. Todo arranca al ocultar los menús laterales (modo práctica) y vuelve a su sitio al
    // abrir cualquiera de ellos (`practicaCambia`). Con «Empezar con la voz» activado, en cambio, espera quieto
    // al pitido de inicio y vuelve a su sitio con el pitido final o al parar (`beepStart` / `beepEnd`).
    var movT0 = null, movRAF = null;

    function ciclico(m) { return m.exposicion > 0 && m.ocultacion > 0; }
    function movDe(u) { var m = props(u).mov; return m && (m.tipo || ciclico(m)) ? m : null; }

    function iniciarMovimientos() {
        movT0 = performance.now();
        if (movRAF) cancelAnimationFrame(movRAF);
        (function paso() { aplicarPose(); movRAF = movT0 == null ? null : requestAnimationFrame(paso); })();
    }
    function pararMovimientos() {
        movT0 = null;
        if (movRAF) { cancelAnimationFrame(movRAF); movRAF = null; }
        aplicarPose();
    }
    // Con los dos menús laterales ocultos, las dianas móviles se mueven (con la voz, desde el pitido); con uno
    // abierto, quietas en su sitio.
    function practicaCambia() {
        var practica = document.getElementById("toolbar").classList.contains("off") && document.getElementById("toolbar-right").classList.contains("off");
        if (practica && movT0 == null && !voz.activa) iniciarMovimientos();
        else if (!practica && movT0 != null) pararMovimientos();
    }

    // Estado de una unidad móvil a los `t` s de empezar (−∞ = quieta): visible, giro de la báscula
    // (0 = arriba, 90 = abajo), desplazamiento en cm y giro en el plano (grados, horario).
    function estado(m, t) {
        var e = { visible: true, ang: 0, dx: 0, dy: 0, rot: 0 };
        if (t < 0) { if (m.tipo === "giro") e.rot = m.angulo0 || 0; return e; }
        var exp = m.exposicion, ciclo = ciclico(m) ? m.exposicion + m.ocultacion : 0, ph = ciclo ? t % ciclo : t;
        if (m.tipo === "bascula") {
            e.ang = !ciclo || ph < exp ? 90 * (1 - Math.min(1, ph / BASCULA_S)) : 90 * Math.min(1, (ph - exp) / BASCULA_S);
            e.visible = e.ang < 89.5;
            return e;
        }
        if (ciclo && ph >= exp) { e.visible = false; return e; }
        if (m.tipo === "vertical" || m.tipo === "horizontal" || m.tipo === "giro") {
            var P = Math.max(0.2, m.pasada || 1.5), q = (ph % (2 * P)) / P, s = q <= 1 ? q : 2 - q;
            if (m.tipo === "vertical") e.dy = -(m.recorrido || 0) * s;
            else if (m.tipo === "horizontal") e.dx = (m.recorrido || 0) * s;
            else e.rot = (m.angulo0 || 0) + ((m.angulo1 || 0) - (m.angulo0 || 0)) * s;   // va y viene entre los dos ángulos
        }
        return e;
    }

    function quitarPose(el) {
        el.style.visibility = ""; el.style.transformOrigin = "";
        el.style.transform = el.classList.contains("target") ? "rotate(" + (parseInt(el.dataset.rot) || 0) + "deg)" : "";
    }

    // Pone cada unidad móvil en su estado: quieta, en su sitio y visible mientras hay un menú lateral abierto;
    // en práctica, a los segundos de empezar. Las tarjetas y el soporte giran o se desplazan juntos
    // alrededor del pie de la unidad (el suelo, si lleva soporte); el giro en el plano, alrededor del centro
    // de la unidad o de su pie (`mov.pivote`).
    function aplicarPose() {
        var now = performance.now();
        unidades(getAllTargets()).forEach(function (u) {
            var m = movDe(u), sop = soporteEls[u.id], els = sop ? u.els.concat([sop]) : u.els;
            if (!m || movT0 == null) { els.forEach(quitarPose); return; }
            var e = estado(m, (now - movT0) / 1000);
            var f = factor(u.els[0].dataset.dist), b = caja(u.els);
            var px = (b.l + b.r) / 2, py = sop ? (parseFloat(sop.style.top) || 0) + (parseFloat(sop.style.height) || 0) : b.b;
            if (m.tipo === "giro" && m.pivote !== "pie") py = (b.t + b.b) / 2;
            els.forEach(function (el) {
                el.style.visibility = e.visible ? "" : "hidden";
                var l = parseFloat(el.style.left) || 0, tp = parseFloat(el.style.top) || 0;
                var cx = (parseFloat(el.style.width) || 0) / 2, cy = (parseFloat(el.style.height) || 0) / 2;
                var ox = px - l, oy = py - tp, r = parseInt(el.dataset.rot) || 0;
                el.style.transformOrigin = ox + "px " + oy + "px";
                el.style.transform = "translate(" + e.dx * f + "px," + e.dy * f + "px) rotate(" + e.rot + "deg) perspective(1500px) rotateX(" + e.ang + "deg) " +
                    "translate(" + (cx - ox) + "px," + (cy - oy) + "px) rotate(" + r + "deg) translate(" + (ox - cx) + "px," + (oy - cy) + "px)";
            });
        });
    }

    // Diálogo del movimiento y la exposición de las tarjetas o baterías elegidas.
    function abrirMovimiento(us) {
        us = us.filter(function (u) { return MOVIL[u.els[0].dataset.type]; });
        if (!us.length) { toast("El movimiento es para tarjetas, baterías y metales"); return; }
        var m = Object.assign({}, MOV_DEF, props(us[0]).mov || {});
        var titulo = us.length > 1 ? "Movimiento de " + us.length + " dianas" : us[0].grupo ? "Movimiento de la batería"
            : PAPEL[us[0].els[0].dataset.type] ? "Movimiento de la tarjeta" : "Movimiento del metal";
        var campo = function (id, v, min, paso) { return '<input class="input" id="' + id + '" type="number" step="' + paso + '"' + (min != null ? ' min="' + min + '"' : '') + ' value="' + v + '">'; };
        abrirModal(titulo,
            '<label class="df-campo">Movimiento<select class="select" id="df-mov-tipo">' +
                '<option value="">Fija</option><option value="bascula">Báscula ascendente</option>' +
                '<option value="vertical">Vertical (sube y baja)</option><option value="horizontal">Horizontal (va y viene)</option>' +
                '<option value="giro">Giro en el plano (de un ángulo a otro)</option></select></label>' +
            '<label class="df-campo" id="df-mov-fila-cm">Recorrido, en cm (negativo: hacia abajo o a la izquierda)' + campo("df-mov-cm", m.recorrido, null, 5) + '</label>' +
            '<div id="df-mov-fila-giro" style="display:flex; flex-direction:column; gap:10px">' +
                '<label class="df-campo">Ángulo inicial, en grados' + campo("df-mov-a0", m.angulo0, null, 5) + '</label>' +
                '<label class="df-campo">Ángulo final, en grados (positivo: sentido horario)' + campo("df-mov-a1", m.angulo1, null, 5) + '</label>' +
                '<label class="df-campo">Gira sobre<select class="select" id="df-mov-pivote"><option value="centro">Su centro</option><option value="pie">Su pie</option></select></label>' +
            '</div>' +
            '<label class="df-campo" id="df-mov-fila-pasada">Tiempo de cada pasada, en s' + campo("df-mov-pasada", m.pasada, 0.2, 0.1) + '</label>' +
            '<label class="df-campo">Tiempo de exposición, en s' + campo("df-mov-exp", m.exposicion, 0, 0.5) + '</label>' +
            '<label class="df-campo">Tiempo oculta, en s (0 = siempre visible)' + campo("df-mov-ocu", m.ocultacion, 0, 0.5) + '</label>' +
            '<p class="df-ayuda">Se repite en bucle: visible el tiempo de exposición (moviéndose, si tiene movimiento) y oculta el tiempo ' +
            'oculta. Empieza al ocultar los menús laterales y vuelve a su sitio al abrir cualquiera de ellos. La báscula sube al ' +
            'empezar cada exposición y baja al acabarla. El giro va del ángulo inicial al final y vuelve en cada pasada.</p>',
            '<button class="btn" id="df-mov-quitar">Quitar movimiento</button><button class="btn active" id="df-mov-ok"><i class="bi bi-check-lg"></i> Guardar</button>');
        var tipo = document.getElementById("df-mov-tipo");
        tipo.value = m.tipo || "";
        document.getElementById("df-mov-pivote").value = m.pivote === "pie" ? "pie" : "centro";
        var verRecorrido = function () {
            var lineal = tipo.value === "vertical" || tipo.value === "horizontal", giro = tipo.value === "giro";
            document.getElementById("df-mov-fila-cm").style.display = lineal ? "" : "none";
            document.getElementById("df-mov-fila-giro").style.display = giro ? "flex" : "none";
            document.getElementById("df-mov-fila-pasada").style.display = lineal || giro ? "" : "none";
        };
        tipo.addEventListener("change", verRecorrido);
        verRecorrido();
        var poner = function (mov) {
            us.forEach(function (u) { props(u).mov = clonar(mov); });
            cerrarModal();
            refrescar();
        };
        document.getElementById("df-mov-quitar").addEventListener("click", function () { poner(null); toast("Sin movimiento"); });
        document.getElementById("df-mov-ok").addEventListener("click", function () {
            var v = function (id, def) { var x = parseFloat(document.getElementById(id).value); return isFinite(x) ? x : def; };
            var mov = { tipo: tipo.value, recorrido: v("df-mov-cm", 60), pasada: Math.max(0.2, v("df-mov-pasada", 1.5)),
                        angulo0: v("df-mov-a0", 0), angulo1: v("df-mov-a1", 90), pivote: document.getElementById("df-mov-pivote").value,
                        exposicion: Math.max(0, v("df-mov-exp", 5)), ocultacion: Math.max(0, v("df-mov-ocu", 2)) };
            poner(mov.tipo || ciclico(mov) ? mov : null);
            toast("Movimiento guardado");
        });
    }

    // ---- Mis baterías: baterías guardadas como un elemento más de la paleta ----
    // Cada una: { uuid, name, mov, targets: [{ type, dx, dy (cm desde el centro), rot, cover, color, soporte }],
    // modificado }, en este navegador y, con sesión, en la cuenta (tipo «bateria»).
    var BAT_LS_KEY = "dryfire-baterias";
    var baterias = [];

    function leerBaterias() {
        try { baterias = JSON.parse(localStorage.getItem(BAT_LS_KEY)) || []; } catch (_) { baterias = []; }
        if (!Array.isArray(baterias)) baterias = [];
    }
    function persistBaterias() { lsSet(BAT_LS_KEY, JSON.stringify(baterias)); programarCuenta(); pintarBaterias(); }
    function bateriaPorUuid(u) { return baterias.filter(function (b) { return b.uuid === u; })[0] || null; }

    function pedirNombreBateria(u) {
        if (!u.grupo) return;
        abrirModal("Guardar batería en la paleta",
            '<div class="df-url"><input class="input" id="df-bat-nombre" maxlength="40" placeholder="Nombre de la batería" value="Batería ' + (baterias.length + 1) + '"></div>' +
            '<p class="df-ayuda">Se guarda con sus ' + u.els.length + ' tarjetas a su separación real, su soporte y su movimiento. Aparece en «Mis baterías» de la paleta' +
            (cuenta ? ' y en tu cuenta.' : '.') + '</p>',
            '<button class="btn active" id="df-bat-ok"><i class="bi bi-bookmark-plus"></i> Guardar</button>');
        var inp = document.getElementById("df-bat-nombre");
        inp.select();
        var ok = function () {
            var nombre = inp.value.trim() || "Batería";
            var c = centroDe(u.els), f = u.grupo.f || factor(u.els[0].dataset.dist);
            baterias.push({ uuid: genUUID(), name: nombre, mov: clonar(u.grupo.mov),
                targets: u.els.map(function (el) {
                    var p = centroEl(el);
                    return { type: el.dataset.type, dx: Math.round((p.x - c.x) / f * 10) / 10, dy: Math.round((p.y - c.y) / f * 10) / 10,
                             rot: parseInt(el.dataset.rot) || 0, cover: el.dataset.cover || "", color: el.dataset.color || "", soporte: !!el.dfProps.soporte };
                }), modificado: new Date().toISOString() });
            persistBaterias();
            cerrarModal();
            toast("Batería «" + nombre + "» guardada en la paleta");
        };
        document.getElementById("df-bat-ok").addEventListener("click", ok);
        inp.addEventListener("keydown", function (e) { if (e.key === "Enter") ok(); });
    }

    // Añade una batería guardada al lienzo, cerca del centro y a la distancia por defecto.
    function insertarBateria(b) {
        var gid = "g" + genId(), f = factor(DIST_DEF), off = (Math.random() - 0.5) * 120, primera = null;
        grupos[gid] = { id: gid, mov: clonar(b.mov), f: f };
        (b.targets || []).forEach(function (t, i) {
            var el = createTarget({ id: genId(), type: t.type, x: off + t.dx * f, y: ESCENA_H / 2 + off + t.dy * f, rot: t.rot || 0,
                                    cover: t.cover || "", color: t.color || "", dist: DIST_DEF, grupo: gid,
                                    soporte: t.soporte || (b.soporte && i === 0) }, false);   // b.soporte: formato anterior
            primera = primera || el;
        });
        unSoporte(miembros(gid));
        limpiarGrupos();
        if (primera) select(primera, false);
    }

    function importarBaterias(lista) {
        lista.forEach(function (b) {
            if (!b || !b.uuid || !Array.isArray(b.targets)) return;
            var i = baterias.findIndex(function (x) { return x.uuid === b.uuid; });
            if (i >= 0) baterias[i] = b; else baterias.push(b);
        });
        persistBaterias();
    }

    // Miniatura de una batería guardada: sus tarjetas a escala.
    function miniaturaBateria(b) {
        var ts = b.targets || [], x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
        ts.forEach(function (t) {
            var cm = (TIPO[t.type] || TIPO.classic).cm;
            x0 = Math.min(x0, t.dx - cm[0] / 2); x1 = Math.max(x1, t.dx + cm[0] / 2);
            y0 = Math.min(y0, t.dy - cm[1] / 2); y1 = Math.max(y1, t.dy + cm[1] / 2);
        });
        if (!ts.length) return "";
        return '<svg viewBox="' + x0 + ' ' + y0 + ' ' + (x1 - x0) + ' ' + (y1 - y0) + '">' + ts.map(function (t) {
            var cm = (TIPO[t.type] || TIPO.classic).cm;
            return '<image href="' + imgSrc(t.type, t.cover, t.color) + '" x="' + (t.dx - cm[0] / 2) + '" y="' + (t.dy - cm[1] / 2) + '" width="' + cm[0] +
                '" height="' + cm[1] + '" transform="rotate(' + (t.rot || 0) + ' ' + t.dx + ' ' + t.dy + ')"/>';
        }).join("") + '</svg>';
    }

    function pintarBaterias() {
        var p = document.getElementById("bat-palette");
        p.hidden = !baterias.length;
        p.innerHTML = '<span class="tb-sub">Mis baterías</span>';
        baterias.forEach(function (b) {
            var btn = document.createElement("button");
            btn.className = "palette-item";
            btn.title = b.name + " (" + (b.targets || []).length + " tarjetas)";
            btn.innerHTML = miniaturaBateria(b) + '<span>' + esc(b.name) + '</span><i class="bi bi-x-lg bat-x" title="Quitar de la paleta"></i>';
            btn.addEventListener("click", function (e) {
                if (e.target.classList.contains("bat-x")) {
                    if (!confirm("¿Quitar la batería «" + b.name + "» de la paleta? En tu cuenta no se borra.")) return;
                    baterias = baterias.filter(function (x) { return x !== b; });
                    persistBaterias();
                    return;
                }
                insertarBateria(b);
            });
            p.appendChild(btn);
        });
    }

    // 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 != null) 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();
        btnRecordToggle.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 || seqRunning) { detener(); return; }
            // Al iniciar se ocultan las barras: la galería queda despejada y el timer flotante a la vista.
            if (modo === "stage" || seqItems.length) {
                document.getElementById("toolbar").classList.add("off");
                document.getElementById("toolbar-right").classList.add("off");
            }
            iniciar(false);
        });
    }

    // 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();
    }

    // Pitido de un timer de tiro: el zumbador piezoeléctrico da un tono agudo (≈ 2,7 kHz) a volumen constante
    // todo el pitido (onda cuadrada suavizada con un paso bajo), con ataque y final muy cortos.
    function beep(durMs, delayMs) {
        ensureAudio();
        var t0 = audioCtx.currentTime + (delayMs || 0) / 1000, t1 = t0 + durMs / 1000;
        var osc = audioCtx.createOscillator(), filtro = audioCtx.createBiquadFilter(), gain = audioCtx.createGain();
        osc.type = "square";
        osc.frequency.value = 2700;
        filtro.type = "lowpass";
        filtro.frequency.value = 6000;
        gain.gain.setValueAtTime(0, t0);
        gain.gain.linearRampToValueAtTime(0.3, t0 + 0.005);
        gain.gain.setValueAtTime(0.3, t1 - 0.01);
        gain.gain.linearRampToValueAtTime(0, t1);
        osc.connect(filtro); filtro.connect(gain); gain.connect(beepBus);
        osc.start(t0);
        osc.stop(t1 + 0.02);
    }

    // Inicio: un pitido de 0,5 s («piiiii»); con la voz, las dianas móviles empiezan a moverse.
    function beepStart() { beep(500); if (voz.activa) iniciarMovimientos(); }
    // Final: dos pitidos seguidos («piiiii piiiii»); con la voz, las móviles vuelven a su sitio.
    function beepEnd() { beep(500); beep(500, 650); if (voz.activa) pararMovimientos(); }

    // 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 el temporizador (con la grabación, si está activada); `porVoz`: tras «Listo», con «Stand by».
    function iniciarTimer(porVoz) {
        if (seqRunning) stopSeqPlayback();
        var ir = function () { startSequence(porVoz); };
        if (shouldStartRecording()) startRecording().then(ir, ir); else ir();
    }

    // Arranca la secuencia de repeticiones del temporizador de tiro (0 repeticiones = sin fin). Por voz, en
    // vez de la pausa inicial, «Stand by» y a los 3 s el pitido.
    function startSequence(porVoz) {
        var t = timerActual();
        timerDuration = t.duration; timerRepsTotal = t.reps;
        timerDurationInp.value = t.duration; timerRepsInp.value = t.reps; timerGapInp.value = t.gap;
        guardarTimer();

        timerRunning = true;
        timerRepsDone = 0;
        pintarBotonInicio(true);
        timerRepEl.textContent = serieTxt(1);
        scheduleRecordingStart(porVoz ? STANDBY_S : t.gap);
        vozActualizar();
        if (porVoz) standby(nextRep); else pauseThen(nextRep);
    }

    // «Serie 2 / 5» (o «Serie 2» sin fin; nada con una sola).
    function serieTxt(n) { return timerRepsTotal === 1 ? "" : "Serie " + n + (timerRepsTotal ? " / " + timerRepsTotal : ""); }

    // Botón Iniciar / Detener según haya algo en marcha; con la práctica en marcha no se cambia de modo.
    function pintarBotonInicio(enMarcha) {
        btnTimerStart.classList.toggle("running", enMarcha);
        btnTimerStart.innerHTML = enMarcha ? '<i class="bi bi-stop-fill"></i>' : '<i class="bi bi-play-fill"></i>';
        btnTimerStart.title = enMarcha ? "Detener" : "Iniciar";
        setModoDisabled(enMarcha);
    }

    // Display en reposo.
    function pintarPreparado() {
        timerStateEl.textContent = "Preparado";
        timerStateEl.className = "";
        timerRepEl.textContent = "";
        timerNumEl.textContent = "0.00";
    }

    // 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 = serieTxt(timerRepsDone);
        runCountdown(timerDuration, function () {
            if (!timerRunning) return;
            if (timerRepsTotal === 0 || timerRepsDone < timerRepsTotal) {
                if (voz.activa) esperarVozSerie(function () { standby(nextRep); }); else pauseThen(nextRep);   // con la voz, cada serie empieza con «Listo»
            } 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; }
        pintarPreparado();
        pintarBotonInicio(false);
        cancelarStandby();
        if (voz.activa) pararMovimientos();
        if (seqRunning) stopSeqPlayback();
        stopRecording();
        vozActualizar();
    }

    /* --- Voz y timer flotante ---
       Con «Empezar con la voz», el micrófono escucha (Web Speech API del navegador: Chrome y Edge, con
       conexión) mientras no hay nada en marcha o el temporizador espera la siguiente serie. Al oír «Listo» o
       «Ready» se oye «Stand by» por el altavoz y a los STANDBY_S segundos el pitido: empieza lo del modo
       elegido (el stage actual o la secuencia), o la siguiente serie / vuelta. El timer flotante copia el
       temporizador en un recuadro sobre la galería, en el borde elegido o donde lo deje el tirador
       arrastrándolo. */
    var STANDBY_S = 3;
    var VOZ_LS_KEY = "dryfire-voz";
    var FLOT_LS_KEY = "dryfire-flotante", FLOT_POS_LS_KEY = "dryfire-flotante-pos";
    var RE_LISTO = /\b(listo|lista|listos|ready|redi|reddy|rady|rede)\b/i;
    var Reconocedor = window.SpeechRecognition || window.webkitSpeechRecognition;
    var voz = { activa: false, rec: null, esperandoSerie: false, reanudar: null, standby: false, standbyTO: null, error: "" };

    function initVoz() {
        voz.activa = !!Reconocedor && lsGet(VOZ_LS_KEY) === "1";
        document.getElementById("btn-voz").addEventListener("click", function () {
            if (!Reconocedor) { toast("Este navegador no reconoce la voz (usa Chrome o Edge)"); return; }
            voz.activa = !voz.activa; voz.error = "";
            lsSet(VOZ_LS_KEY, voz.activa ? "1" : "0");
            if (voz.activa) decir("");   // desbloquea la voz del navegador con el clic
            if (voz.activa) pararMovimientos(); else practicaCambia();   // con la voz, las móviles esperan al pitido
            vozActualizar();
        });
        initFlotante();
        if (voz.activa) pararMovimientos();   // con la voz, las móviles esperan al pitido
        vozActualizar();
    }

    // Escucha si está activada, no hay «Stand by» en curso y no hay nada en marcha (o se espera la serie).
    function vozDebeEscuchar() { return voz.activa && !voz.standby && (voz.esperandoSerie || (!timerRunning && !seqRunning)); }
    function vozActualizar() {
        if (vozDebeEscuchar()) vozEscuchar(); else vozParar();
        pintarVoz();
    }
    function vozEscuchar() {
        if (!Reconocedor || voz.rec) return;
        var r = new Reconocedor();
        r.lang = "es-ES"; r.continuous = true; r.interimResults = true; r.maxAlternatives = 3;
        r.onresult = function (e) {
            for (var i = e.resultIndex; i < e.results.length; i++) {
                for (var a = 0; a < e.results[i].length; a++) {
                    if (RE_LISTO.test(e.results[i][a].transcript)) { vozOida(); return; }
                }
            }
        };
        r.onerror = function (e) {
            if (e.error === "not-allowed" || e.error === "service-not-allowed") {
                voz.activa = false; lsSet(VOZ_LS_KEY, "0");
                toast("Sin permiso para usar el micrófono");
            } else if (e.error === "network") voz.error = "el reconocimiento de voz necesita conexión";
        };
        r.onend = function () {   // el navegador corta tras un rato de silencio: se vuelve a escuchar
            if (voz.rec !== r) return;
            voz.rec = null;
            if (vozDebeEscuchar()) setTimeout(vozActualizar, voz.error ? 3000 : 250); else pintarVoz();
        };
        voz.rec = r;
        try { r.start(); voz.error = ""; } catch (_) { voz.rec = null; }
    }
    function vozParar() {
        if (!voz.rec) return;
        var r = voz.rec;
        voz.rec = null;
        try { r.abort(); } catch (_) { /* ya parado */ }
    }

    // «Listo» / «Ready»: la siguiente serie o vuelta, o empezar lo del modo elegido.
    function vozOida() {
        if (voz.standby) return;
        vozParar();
        if (voz.esperandoSerie) { var fn = voz.reanudar; voz.esperandoSerie = false; voz.reanudar = null; fn(); return; }
        if (timerRunning || seqRunning) return;
        iniciar(true);
    }

    // Entre series (o vueltas de la secuencia), con la voz: se espera a oír «Listo» y luego `reanudar`.
    function esperarVozSerie(reanudar) {
        voz.esperandoSerie = true;
        voz.reanudar = reanudar;
        timerStateEl.textContent = "Di «Listo»";
        timerStateEl.className = "pause";
        timerNumEl.textContent = formatTimerNum(0, 2);
        vozActualizar();
    }

    // «Stand by» por el altavoz y, a los STANDBY_S segundos, `cb` (que da el pitido de inicio).
    function standby(cb) {
        voz.standby = true;
        vozActualizar();
        decir("Stand by");
        if (timerRunning || seqRunning) { timerStateEl.textContent = "Stand by"; timerStateEl.className = "pause"; }
        voz.standbyTO = setTimeout(function () {
            voz.standbyTO = null; voz.standby = false;
            cb();
            vozActualizar();
        }, STANDBY_S * 1000);
    }
    function cancelarStandby() {
        if (voz.standbyTO) clearTimeout(voz.standbyTO);
        voz.standbyTO = null; voz.standby = false; voz.esperandoSerie = false; voz.reanudar = null;
    }

    // Voz del navegador (en inglés, como en la galería). Vacío: solo la prepara.
    function decir(txt) {
        if (!window.speechSynthesis) return;
        speechSynthesis.cancel();
        var u = new SpeechSynthesisUtterance(txt);
        u.lang = "en-US"; u.rate = 0.9; u.volume = txt ? 1 : 0;
        var v = speechSynthesis.getVoices().filter(function (x) { return /^en(-|_)/i.test(x.lang); })[0];
        if (v) u.voice = v;
        speechSynthesis.speak(u);
    }

    function pintarVoz() {
        var b = document.getElementById("btn-voz"), est = document.getElementById("df-voz-estado"), escucha = !!voz.rec;
        b.classList.toggle("active", voz.activa);
        b.innerHTML = '<i class="bi ' + (voz.activa ? "bi-mic-fill" : "bi-mic-mute") + '"></i>';
        b.title = "Empezar al decir «Listo» o «Ready»: " + (voz.activa ? "activado" : "desactivado");
        est.classList.toggle("on", escucha);
        est.textContent = !Reconocedor ? "Este navegador no reconoce la voz (usa Chrome o Edge)."
            : !voz.activa ? "" : voz.standby ? "Stand by…" : escucha ? "Escuchando: di «Listo» o «Ready»."
            : voz.error ? "No se puede escuchar: " + voz.error + "." : "En marcha: se escucha al acabar.";
        document.getElementById("dff-mic").hidden = !escucha;
    }

    // ---- Timer flotante ----
    function initFlotante() {
        var el = document.getElementById("df-flotante"), sel = document.getElementById("df-flotante-pos");
        var pos = lsGet(FLOT_LS_KEY);
        sel.value = pos === null ? "arriba" : pos;
        var poner = function () {
            ["arriba", "abajo", "izquierda", "derecha"].forEach(function (x) { el.classList.toggle("pos-" + x, sel.value === x); });
            ["left", "top", "right", "bottom", "transform"].forEach(function (k) { el.style[k] = ""; });
        };
        poner();
        try {   // posición libre (arrastrado)
            var libre = JSON.parse(lsGet(FLOT_POS_LS_KEY) || "null");
            if (libre && sel.value) { el.style.transform = "none"; el.style.right = el.style.bottom = "auto"; el.style.left = libre.left + "px"; el.style.top = libre.top + "px"; }
        } catch (_) { /* posición no válida: la del borde */ }
        sel.addEventListener("change", function () {
            lsSet(FLOT_LS_KEY, sel.value);
            try { localStorage.removeItem(FLOT_POS_LS_KEY); } catch (_) { /* sin almacenamiento */ }
            poner();
            pintarFlotante();
        });
        makeDraggable(el, el, FLOT_POS_LS_KEY);
        window.addEventListener("resize", function () { clampPos(el); });
        // Copia del temporizador (también en la secuencia): cada vez que cambian sus textos.
        new MutationObserver(pintarFlotante).observe(document.getElementById("timer-display"),
            { childList: true, characterData: true, subtree: true, attributes: true });
        new MutationObserver(pintarFlotante).observe(document.getElementById("toolbar-right"), { attributes: true, attributeFilter: ["class"] });
        pintarFlotante();
    }
    // Visible si no está «Oculto» y el panel derecho (que ya lo muestra) está cerrado.
    function pintarFlotante() {
        var el = document.getElementById("df-flotante");
        el.hidden = !document.getElementById("df-flotante-pos").value || !document.getElementById("toolbar-right").classList.contains("off");
        if (el.hidden) return;
        var est = document.getElementById("dff-estado");
        est.textContent = timerStateEl.textContent;
        est.className = "dff-estado " + timerStateEl.className;
        document.getElementById("dff-num").textContent = timerNumEl.textContent;
        document.getElementById("dff-info").textContent = timerRepEl.textContent;
    }

    /* --- 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 () {
                detener();
            });
            /* 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.
    // Descarga la grabación como MP4 H.264 + AAC (el que aceptan WhatsApp, iPhone y QuickTime): Chrome graba
    // casi siempre VP9 + Opus (WebM, o incluso en un .mp4 que WhatsApp rechaza), así que se convierte en el
    // navegador con mediabunny (`convertirMp4`). Si no se puede, se descarga el original con su extensión real.
    async function finalizeRecording() {
        if (!recordedChunks.length) return;
        var type = recordedChunks[0].type || "video/webm";
        var blob = new Blob(recordedChunks, { type: type });
        recordedChunks = [];
        var ext = /mp4/.test(type) ? "mp4" : "webm";
        if (window.VideoEncoder) {
            try {
                toast("Convirtiendo la grabación a MP4…");
                blob = await convertirMp4(blob, function (f) { toast("Convirtiendo a MP4… " + Math.round(f * 100) + " %"); });
                ext = "mp4";
            } catch (e) {
                console.warn("No se pudo convertir la grabación a MP4:", e);
                toast("No se pudo convertir a MP4: se descarga como " + ext.toUpperCase());
            }
        }
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = buildRecordingFilename(ext);
        document.body.appendChild(a);
        a.click();
        a.remove();
        setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
        toast("Grabación descargada (" + ext.toUpperCase() + ")");
    }

    // Convierte una grabación a MP4 H.264 + AAC, sin fragmentar y con el índice al principio, a 30 fps
    // constantes y con lados pares (H.264). Si ya es H.264 + AAC, solo se reempaqueta. Donde el navegador no
    // codifica AAC (Chrome en Linux), con el AAC en WebAssembly de Video (`mediabunny-aac-encoder`).
    var AAC_ENCODER_URL = "/static/video/vendor/mediabunny-aac-encoder.min.mjs";
    var aacListo = null;
    async function convertirMp4(blob, progreso) {
        var mb = await import("mediabunny");
        if (!aacListo) {
            aacListo = mb.canEncodeAudio("aac", { numberOfChannels: 2, sampleRate: 48000, bitrate: 160000 }).catch(function () { return false; })
                .then(function (propio) { return propio || import(AAC_ENCODER_URL).then(function (m) { m.registerAacEncoder(); }); });
        }
        await aacListo;
        var input = new mb.Input({ source: new mb.BlobSource(blob), formats: mb.ALL_FORMATS });
        try {
            var vt = await input.getPrimaryVideoTrack();
            var video = { codec: "avc", bitrate: mb.QUALITY_HIGH, frameRate: 30 };
            if (vt && (vt.displayWidth % 2 || vt.displayHeight % 2)) {
                video.width = vt.displayWidth - vt.displayWidth % 2; video.height = vt.displayHeight - vt.displayHeight % 2; video.fit = "fill";
            }
            var output = new mb.Output({ format: new mb.Mp4OutputFormat({ fastStart: "in-memory" }), target: new mb.BufferTarget() });
            var conv = await mb.Conversion.init({ input: input, output: output, video: video, audio: { codec: "aac", bitrate: 160000 } });
            if (!conv.isValid) throw new Error("pistas descartadas: " + conv.discardedTracks.map(function (d) { return d.reason; }).join(", "));
            if (progreso) conv.onProgress = progreso;
            await conv.execute();
            return new Blob([output.target.buffer], { type: "video/mp4" });
        } finally {
            input.dispose();
        }
    }

    // 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 mimeType de la grabación: MP4 solo si es H.264 + AAC (así basta reempaquetarlo); un «video/mp4»
       sin códecs no vale, porque Chrome mete ahí VP9 + Opus (WhatsApp lo rechaza). Si no, WebM, que al
       terminar se convierte a MP4 H.264 + AAC (`finalizeRecording`). */
    function pickMimeType() {
        if (!window.MediaRecorder || !MediaRecorder.isTypeSupported) return "";
        var candidates = [
            'video/mp4;codecs="avc1.42E01E,mp4a.40.2"',
            "video/mp4;codecs=avc1,mp4a.40.2",
            "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
        btnCamToggle.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 su botón.
    function updateRecordToggleBtn() {
        btnRecordToggle.innerHTML = recordEnabled ? '<i class="bi bi-record-circle-fill"></i>' : '<i class="bi bi-record-circle"></i>';
        btnRecordToggle.title = recordEnabled ? "Grabar al iniciar: activado" : "Grabar al iniciar: desactivado";
        btnRecordToggle.classList.toggle("active", recordEnabled);
    }

    // Refleja la visibilidad de la(s) cámara(s) flotante(s) en el icono y el título de su botón.
    function updateCamToggleBtns() {
        btnCamToggle.innerHTML = camVisible ? '<i class="bi bi-camera-video-fill"></i>' : '<i class="bi bi-camera-video-off"></i>';
        btnCamToggle.title = camVisible ? "Mostrar/ocultar cámara: visible" : "Mostrar/ocultar cámara: oculta";
        btnCamToggle.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()) {
            detener();
        }
    }

    // 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 (0 repeticiones = sin fin).
    function timerActual() {
        var gap = parseFloat(timerGapInp.value), reps = parseInt(timerRepsInp.value, 10);
        return { duration: Math.max(0.1, parseFloat(timerDurationInp.value) || 4), reps: reps >= 0 ? Math.min(reps, 50) : 1,
                 gap: gap >= 0 ? gap : 6, countUp: !!timerCountUp };
    }

    function aplicarTimer(t) {
        if (!t) return;
        if (t.duration) timerDurationInp.value = t.duration;
        if (t.reps != null) 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 || [], grupos: st.grupos || [], 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). Las vueltas y
    // la pausa van en el temporizador; endMode / loopGap / countUp se derivan de él para las versiones
    // anteriores de Dry Fire (las que tenían la barra inferior).
    function secuenciaActual() {
        var t = timerActual();
        return {
            items: seqItems.map(function (it) { var st = stagePorId(it.stageId); return st ? { stageUuid: st.uuid, seconds: it.seconds } : null; })
                .filter(Boolean),
            endMode: t.reps === 0 ? "loop" : "stop", loopGap: t.gap, countUp: t.countUp
        };
    }

    // Se aplica después del temporizador: una secuencia «en bucle» (de las versiones anteriores, o con 0
    // repeticiones) deja el temporizador sin fin. La pausa propia de cada ítem de antes se ignora.
    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 } : null;
        }).filter(Boolean);
        if (sec.endMode === "loop" && timerActual().reps !== 0) { timerRepsInp.value = 0; guardarTimer(); }
        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.grupos = src.grupos || []; 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, grupos: src.grupos || [], 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.querySelector(".df-card").classList.remove("ancha");
        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);
            setModo("secuencia");
            document.getElementById("toolbar-right").classList.remove("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);
            setModo("stage");
            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) });
        baterias.forEach(function (b) { out.push({ uuid: b.uuid, tipo: "bateria", datos: b, h: huella(JSON.stringify(b)) }); });
        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.tipo === "bateria" ? !!bateriaPorUuid(x.uuid) : x.uuid === configUuid();
            var info = x.tipo === "stage" ? x.resumen.dianas + " dianas" : x.tipo === "bateria" ? x.resumen.dianas + " tarjetas" : 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"; });
        var bats = items.filter(function (x) { return x.tipo === "bateria"; });
        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>' : '') +
            (bats.length ? '<b>Baterías</b><div class="df-lista">' + bats.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, tus baterías y el temporizador + secuencia se guardan solos en tu cuenta. «Recuperar» los trae a este navegador (los stages y baterías 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];
        var bats = res.items.filter(function (x) { return x.tipo === "bateria"; }).map(function (x) { return x.datos; });
        if (cfg && seqItems.length && !confirm("¿Sustituir tu temporizador y secuencia por los de tu cuenta?")) cfg = null;
        importarStages(sts);
        if (bats.length) importarBaterias(bats);
        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") +
              (bats.length ? ", " + bats.length + " batería" + (bats.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 de su sentido de la cuenta: también se guardan en la cuenta.
        [timerDurationInp, timerRepsInp, timerGapInp].forEach(function (i) { i.addEventListener("change", guardarTimer); });
        btnTimerDirection.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>