/* ---------- HUD cinematográfico ----------
   Base oscura; el bloque [data-tema="claro"] del final la convierte en plano técnico.
   Reutiliza los tokens de css/sala.css (--acento, --borde) para no inventar otra paleta. */
:root {
  --hud-linea: color-mix(in srgb, var(--acento) 85%, #fff);
  --hud-glow: drop-shadow(0 0 3px color-mix(in srgb, var(--acento) 70%, transparent));
  --hud-tinta: #cfeaff;
  --hud-caja: rgba(6, 14, 28, .72);
}

#hudCapa, #hudSvg { position: fixed; inset: 0; pointer-events: none; }
/* El SVG es un elemento reemplazado: con inset:0 y width:auto se queda en su
   tamaño intrínseco (300x150) y recorta todo lo demás. Necesita medidas explícitas. */
#hudSvg { width: 100%; height: 100%; }
#hudCapa { display: none; z-index: 15; }
body.hud-on #hudCapa { display: block; }

/* Nota: la viñeta, el barrido y el grano ya los aporta index.html
   (.atm-viñeta, .atm-scan, .atm-ruido). Aqui no se duplican. */

#hudSvg text {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--hud-tinta);
}

/* ---------- Lock-on sobre la región enfocada ---------- */
#hudSvg .lock-corchete { fill: none; stroke: var(--hud-linea); stroke-width: 2; filter: var(--hud-glow); }
#hudSvg .lock-guia { stroke: var(--hud-linea); stroke-width: 1; opacity: .55; stroke-dasharray: 3 3; }
#hudSvg .lock-caja { fill: var(--hud-caja); stroke: var(--hud-linea); stroke-width: 1; opacity: .95; }
#hudSvg .lock-titulo { font-size: 12px; letter-spacing: .1em; fill: var(--hud-tinta); }
#hudSvg .lock-dato { fill: color-mix(in srgb, var(--hud-tinta) 70%, transparent); }
#hudSvg .lock-valor { fill: var(--hud-linea); font-size: 13px; }
@keyframes hud-cerrar { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
#hudSvg .lock-grupo { animation: hud-cerrar .45s cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }

/* Subtítulo del reconocimiento de voz */
#hudSub {
  position: absolute; left: 50%; bottom: 148px; transform: translateX(-50%);
  max-width: 70vw; padding: 10px 18px; border-radius: 999px;
  background: var(--hud-caja); border: 1px solid var(--hud-linea);
  color: var(--hud-tinta); font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .06em; text-align: center;
  opacity: .7; filter: var(--hud-glow);
}
#hudSub.definitivo { opacity: 1; }

/* ---------- Tema claro: plano técnico, sin glow ---------- */
[data-tema="claro"] {
  --hud-linea: #1e4e7a;
  --hud-glow: none;
  --hud-tinta: #0f172a;
  --hud-caja: rgba(255, 255, 255, .92);
}
[data-tema="claro"] #hudSvg .lock-corchete { stroke-width: 1.5; }

/* ---------- Control por gestos ----------
   Capa propia, no dentro de #hudCapa: el retículo tiene que verse aunque la
   tecla H haya apagado el HUD. Comparte los tokens --hud-* de arriba. */
/* Por encima de las barras laterales (z-index 20) y por debajo del tooltip (45):
   el panel se colocaba detras del lateral derecho y no se veia. */
#gestoCapa { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#gestoSvg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Sin mano en cuadro el retículo se apaga en vez de quedarse clavado mintiendo */
#gestoCapa.sin-mano #gestoSvg { opacity: .25; transition: opacity .3s; }

/* Miniatura de la cámara: aviso visible de que está encendida, y calibración */
#gestoVideo {
  /* right lo fija colocar(), igual que el panel */
  position: absolute; right: 24px; bottom: 150px; width: 176px;
  border-radius: 10px; border: 1px solid var(--hud-linea);
  /* Sin scaleX(-1): la camara del usuario ya entrega la imagen en espejo (medido) */
  opacity: .85; background: #000;
}

@media (max-width: 900px) { #gestoVideo { width: 120px; bottom: 120px; } }

/* Lectura en vivo del reconocedor, bajo la miniatura de la cámara */
#gestoDiag {
  position: absolute; right: 24px; bottom: 96px; width: 176px;
  padding: 7px 9px; border-radius: 8px; white-space: pre-line;
  background: var(--hud-caja); border: 1px solid var(--hud-linea); color: var(--hud-tinta);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; line-height: 1.5; letter-spacing: .06em; opacity: .9;
}

/* Estela de la palma mientras corre y flecha al aceptar el barrido */
#gestoSvg .gesto-estela {
  fill: none; stroke: var(--hud-linea); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; filter: var(--hud-glow);
}
#gestoFlecha {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 140px; line-height: 1; color: var(--hud-linea); opacity: 0;
  filter: var(--hud-glow); font-family: "JetBrains Mono", ui-monospace, monospace;
}
@keyframes gesto-derecha { 0% { opacity: 0; transform: translate(-80%, -50%) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(0%, -50%) scale(1.1); } }
@keyframes gesto-izquierda { 0% { opacity: 0; transform: translate(-20%, -50%) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-100%, -50%) scale(1.1); } }
#gestoFlecha.gesto-derecha { animation: gesto-derecha .7s cubic-bezier(.2,.8,.2,1) both; }
#gestoFlecha.gesto-izquierda { animation: gesto-izquierda .7s cubic-bezier(.2,.8,.2,1) both; }