<!--
========================================================================
  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, sin
backend ni base de datos — todo el estado (stages, secuencia, config del
temporizador, cámaras, preferencias) se guarda en localStorage del
navegador. La vista (`dryfire/views.py`) solo sirve esta plantilla.

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

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

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

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

------------------------------------------------------------------------
BARRA IZQUIERDA — editor del stage
------------------------------------------------------------------------
  - Paleta: click para añadir una diana (IPSC, Popper, 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, duplicar, frente/fondo, eliminar).
  - 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").

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

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

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

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

------------------------------------------------------------------------
ATAJOS DE TECLADO (con el foco fuera de inputs/selects)
------------------------------------------------------------------------
  Supr/Backspace  Eliminar diana(s) seleccionada(s)
  Escape          Deseleccionar, cerrar menú contextual y detener
                  temporizador/secuencia si están en marcha
  Ctrl/Cmd+S      Guardar stage
  Ctrl/Cmd+N      Nuevo stage
  Ctrl/Cmd+A      Seleccionar todas las dianas
  T               Mostrar/ocultar la barra izquierda

------------------------------------------------------------------------
PERSISTENCIA (localStorage, prefijo "dryfire-")
------------------------------------------------------------------------
  dryfire-v5              Lista de stages guardados (nombre + dianas)
  dryfire-seq-cfg         Secuencia (ítems, modo al terminar, pausa)
  dryfire-timer-cfg       Duración / repeticiones / pausa del temporizador
  dryfire-record-enabled  Estado del interruptor "Grabar al iniciar"
  dryfire-timer-count-up  Sentido de la cuenta del temporizador (atrás/adelante)
  dryfire-seq-count-up    Sentido de la cuenta de la secuencia (atrás/adelante)
  dryfire-cam-device      Dispositivo de la cámara principal
  dryfire-cam-panels-extra  Cámaras adicionales añadidas
  dryfire-cam-pos         Posición arrastrada de la cámara principal (y
                          dryfire-cam-pos-<uid> para cada cámara extra)
  dryfire-cam-visible     Estado de "Mostrar/ocultar cámara"
========================================================================
-->
<!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>
    <link rel="icon" type="image/png" sizes="32x32" href="/static/dryfire/img/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/dryfire/img/favicon-16.png">
    <link rel="shortcut icon" href="/static/dryfire/img/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden; height: 100dvh; width: 100vw;
    user-select: none; -webkit-user-select: none;
    background: #1a1a2e url('/static/dryfire/img/galeria-bg.png') center/cover 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; }
.targets-layer { position: absolute; inset: 0; }

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

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

/* Barra derecha: temporizador + cámaras, ancladas (sin arrastre) */
.toolbar-right {
    left: auto; right: 0; width: var(--toolbar-right-w);
    border-right: none; border-left: 1px solid rgba(255,255,255,0.08);
}
.toolbar-right.off { transform: translateX(var(--toolbar-right-w)); }
.tb-toggle-right {
    left: auto; right: calc(var(--toolbar-right-w) + 8px);
    transition: right 0.25s ease, background 0.15s;
}
#toolbar-right.off ~ #tb-toggle-right { right: 8px; }
.tbr-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }
.tb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tb-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; }
.sel-row .btn-sml { width: 28px; height: 28px; font-size: 12px; }

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

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

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

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

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

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

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

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

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

<div class="toolbar off" id="toolbar">
    <div class="tb-header">
        <a href="/" class="tb-home"><img src="/static/dryfire/img/ciar-logo.webp" alt="CIAR"> TIROPRACTICO</a>
        <button class="btn btn-ico active" id="btn-snap" title="Toggle grid snap"><i class="bi bi-grid-3x3-gap-fill"></i></button>
    </div>
    <div class="palette" id="target-palette"></div>
    <div class="stage-ctrl">
        <input type="text" id="stage-name" class="input" placeholder="Nombre del stage..." maxlength="60">
        <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>
    </div>
</div>

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

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

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

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

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

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

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

<div class="ctx-menu" id="ctx-menu">
    <button data-action="rotate-cw"><i class="bi bi-arrow-clockwise"></i> Rotar +15&deg;</button>
    <button data-action="rotate-ccw"><i class="bi bi-arrow-counterclockwise"></i> Rotar -15&deg;</button>
    <button data-action="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>

<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;
    var snapOn = true;
    var stages = [];
    var activeId = null;
    var selTargets = [];
    var dragging = null;
    var ctxTarget = null;
    var toastTimer;

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

    /* Timer */
    var timerPanel = document.getElementById("timer-panel");
    var timerDurationInp = document.getElementById("timer-duration");
    var timerRepsInp = document.getElementById("timer-reps");
    var timerGapInp = document.getElementById("timer-gap");
    var btnTimerStart = document.getElementById("btn-timer-start");
    var recordEnabled = false;
    var recordToggleBtns = [document.getElementById("btn-record-toggle"), document.getElementById("btn-seq-record-toggle")];
    var camVisible = true;
    var camToggleBtns = [document.getElementById("btn-cam-toggle"), document.getElementById("btn-seq-cam-toggle")];
    var btnTimerDirection = document.getElementById("btn-timer-direction");
    var timerCountUp = false;
    var timerStateEl = document.getElementById("timer-state");
    var timerNumEl = document.getElementById("timer-num");
    var timerRepEl = document.getElementById("timer-rep");
    var timerDuration = 4;
    var timerRunning = false;
    var timerRepsDone = 0;
    var timerRepsTotal = 1;
    var timerRAF = null;
    var timerGapTO = null;
    var audioCtx = null;
    var beepBus = null;
    var recBadge = document.getElementById("rec-badge");
    var mediaRecorder = null;
    var recordedChunks = [];
    var screenStream = null;
    var isRecording = false;
    var recordingStartTO = null;
    var REC_LEAD_MS = 1000;
    var recAudioDest = null;
    var recMicSources = [];
    var recScreenAudioSource = null;

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

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

    var IMG_BASE = "/static/dryfire/img/";
    var IMG = {
        classic: IMG_BASE + "tarjeta-ipsc.webp",
        popper: IMG_BASE + "popper-ipsc.webp",
        ns: IMG_BASE + "nonshoot.webp"
    };

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

    var SIZE = {
        classic: [63, 80],
        popper: [24, 83],
        ns: [62, 78]
    };

    // Punto de entrada: carga los stages guardados, monta la paleta y arranca todos los widgets.
    function init() {
        loadAll();
        buildPalette();
        btnSnap.addEventListener("click", togSnap);
        btnSnap.classList.toggle("active", snapOn);

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

    // Carga los stages guardados desde localStorage y refresca el selector.
    function loadAll() {
        try { var r = localStorage.getItem(LS_KEY); stages = r ? JSON.parse(r) : []; } catch(_) { stages = []; }
        refreshSel();
    }
    // Guarda el array de stages en localStorage.
    function persist() { localStorage.setItem(LS_KEY, JSON.stringify(stages)); }

    // 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, name: "", targets: [] });
        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();
        persist(); refreshSel();
        toast("Stage guardado");
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        return el;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    // Añade una diana nueva del tipo elegido cerca del centro del lienzo.
    function addTarget(type) {
        var r = canvas.getBoundingClientRect();
        var cx = r.width / 2, cy = r.height * 0.5, off = (Math.random() - 0.5) * 120;
        createTarget({ id: genId(), type: type, x: cx + off, y: cy + 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) {
        var scale = d.scale || 1;
        var el = document.createElement("div");
        el.className = "target pop";
        el.dataset.id = d.id; el.dataset.type = d.type; el.dataset.rot = d.rot || 0;
        el.dataset.scale = scale;
        var w = SIZE[d.type][0] * scale, h = SIZE[d.type][1] * scale;
        el.style.left = (d.x - w/2) + "px";
        el.style.top = (d.y - h/2) + "px";
        el.style.width = w + "px";
        el.style.height = h + "px";
        el.style.zIndex = d.z || 1;
        el.style.transform = "rotate(" + (d.rot || 0) + "deg)";
        el.innerHTML = '<img src="' + IMG[d.type] + '" alt="' + d.type + '"><div class="rsz-handle"></div>';
        el.addEventListener("pointerdown", targetDown);
        el.addEventListener("wheel", targetWheel, { passive: false });
        el.addEventListener("contextmenu", targetCtx);
        tLayer.appendChild(el);
        if (autoSelect !== false) select(el, false);
        return el;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        resizing = {
            el: el,
            cx: cr.left + centerX,
            cy: cr.top + centerY,
            baseW: baseW, baseH: baseH,
            pid: e.pointerId
        };

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

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

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

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

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

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

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

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

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

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

    // Enlaza los atajos de teclado (borrar, escape, guardar, nuevo, seleccionar todo, ocultar barra).
    function bindKeys() {
        document.addEventListener("keydown", function(e) {
            if (e.target.tagName === "INPUT" || e.target.tagName === "SELECT") return;
            switch (e.key) {
                case "Delete": case "Backspace":
                    selTargets.slice().forEach(function(t) { delTarget(t); });
                    break;
                case "Escape": deselect(); hideCtx(); if (timerRunning) stopSequence(); if (seqRunning) stopSeqPlayback(); break;
                case "s": case "S": if (e.ctrlKey || e.metaKey) { e.preventDefault(); saveStage(); } break;
                case "n": case "N": if (e.ctrlKey || e.metaKey) { e.preventDefault(); newStage(); } break;
                case "a": case "A":
                    if (e.ctrlKey || e.metaKey) {
                        e.preventDefault();
                        deselect();
                        getAllTargets().forEach(function(t) { t.classList.add("sel"); selTargets.push(t); });
                    }
                    break;
                case "t": case "T": if (!e.ctrlKey && !e.metaKey) { document.getElementById("toolbar").classList.toggle("off"); } break;
            }
        });
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        camPanelsLayer.appendChild(panel.el);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    init();
})();
</script>
</body>
</html>