/* Code Blue — pantalla grande.
 *
 * Todo dimensionado en vw/vh, sin un solo px fijo en el layout: la misma
 * pagina tiene que verse igual en la tele 1080p del stand, en un 4K prestado
 * y en el notebook donde se hace la demo. En una feria no hay tiempo de
 * recalibrar nada.
 */

:root {
  --bg: #04070c;
  --panel: #0a1018;
  --line: #16212e;
  --ink: #dceaf5;
  --dim: #5d7185;
  --green: #2fff8f;
  --red: #ff3b5c;
  --amber: #ffd23f;
  --cyan: #35d6ff;
  --orange: #ff9f2f;
  --mono: "SF Mono", "Roboto Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* Grilla de fondo tipo papel milimetrado de ECG. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(47,255,143,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,255,143,.045) 1px, transparent 1px);
  background-size: 2.1vh 2.1vh;
}
/* Scanlines: lo que separa "pantalla de hospital" de "pagina web". */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode: multiply;
}

/* dvh en vez de height:100%: en los navegadores de TV y en modo kiosco la
   cadena html/body 100% se rompe seguido, y el stand no tiene a nadie para
   arreglarlo. */
/* vh primero, dvh después: el navegador viejo se queda con el que entiende y
   el nuevo pisa con el mejor. Los browsers de Smart TV suelen ir años atrasados
   y no se puede asumir soporte de dvh. */
#stage {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── header ─────────────────────────────────────────────────────────── */
#header {
  display: flex; align-items: center; gap: 2vw;
  padding: 1.4vh 2vw;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0a1220, #060a11);
}
.hdr-block { display: flex; flex-direction: column; gap: .3vh; }
.hdr-label { font-size: 1.05vh; letter-spacing: .32em; color: var(--dim); }
.hdr-value { font-size: 2.5vh; font-weight: 700; letter-spacing: .04em; }
#patient-name { color: #fff; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#patient-status { color: var(--red); }
#patient-status.ok { color: var(--green); }

.hdr-spacer { flex: 1; }

#clock {
  font-size: 5.2vh; font-weight: 700; letter-spacing: .06em;
  color: var(--amber); min-width: 5.4ch; text-align: right;
  text-shadow: 0 0 2.2vh rgba(255,210,63,.4);
}
#clock.urgent { color: var(--red); text-shadow: 0 0 2.4vh rgba(255,59,92,.6); animation: pulse .5s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

#progress { display: flex; gap: .5vw; }
#progress i {
  display: block; width: 2.4vw; height: .7vh; border-radius: .35vh;
  background: #1b2a3a;
}
#progress i.done { background: var(--green); }
#progress i.now { background: var(--amber); animation: pulse .8s infinite; }

/* ── cuerpo ─────────────────────────────────────────────────────────── */
#body { flex: 1; display: grid; grid-template-columns: 1fr 34vw; min-height: 0; }

#vitals { display: flex; flex-direction: column; padding: .8vh 0 .8vh 1.4vw; min-height: 0; }

/* align-items:stretch (no center) para que la lane del canvas ocupe exactamente
 * el alto de su fila. Con center, el canvas aporta su alto intrinseco de 150px,
 * desborda la grilla y las trazas se superponen entre si. */
.vital-row {
  flex: 1 1 0; display: grid; grid-template-columns: 13vw 1fr 9vw;
  align-items: stretch; gap: 1vw;
  border-bottom: 1px solid rgba(22,33,46,.75);
  min-height: 0; position: relative; overflow: hidden;
  transition: background .25s;
}
.vital-row:last-child { border-bottom: 0; }
.vital-row.hit-up { background: rgba(47,255,143,.055); }
.vital-row.hit-down { background: rgba(255,59,92,.07); }
.vital-row.flat { opacity: .55; }

.vital-tag { display: flex; align-items: center; align-self: center; gap: .7vw; min-width: 0; }
.vital-glyph {
  width: 3.4vh; height: 3.4vh; flex: 0 0 auto;
  background: var(--vc); opacity: .9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Iconos inline como mascaras: sin requests, sin dependencia de fuente. */
.vital-glyph[data-glyph="heart"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 16.1 12 21 12 21z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 16.1 12 21 12 21z'/></svg>"); }
.vital-glyph[data-glyph="lungs"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2v9M8.5 11C6 11 4 13.5 4 17v3h4.5c1.4 0 2.5-1.1 2.5-2.5V13a2 2 0 0 0-2.5-2zM15.5 11c2.5 0 4.5 2.5 4.5 6v3h-4.5A2.5 2.5 0 0 1 13 17.5V13a2 2 0 0 1 2.5-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2v9M8.5 11C6 11 4 13.5 4 17v3h4.5c1.4 0 2.5-1.1 2.5-2.5V13a2 2 0 0 0-2.5-2zM15.5 11c2.5 0 4.5 2.5 4.5 6v3h-4.5A2.5 2.5 0 0 1 13 17.5V13a2 2 0 0 1 2.5-2z'/></svg>"); }
.vital-glyph[data-glyph="brain"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3a3 3 0 0 0-3 3 3 3 0 0 0-2 5.2A3 3 0 0 0 5 17a3 3 0 0 0 4 4V3zM15 3a3 3 0 0 1 3 3 3 3 0 0 1 2 5.2A3 3 0 0 1 19 17a3 3 0 0 1-4 4V3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3a3 3 0 0 0-3 3 3 3 0 0 0-2 5.2A3 3 0 0 0 5 17a3 3 0 0 0 4 4V3zM15 3a3 3 0 0 1 3 3 3 3 0 0 1 2 5.2A3 3 0 0 1 19 17a3 3 0 0 1-4 4V3z'/></svg>"); }
.vital-glyph[data-glyph="blood"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2s6 7.2 6 11.2A6 6 0 0 1 6 13.2C6 9.2 12 2 12 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2s6 7.2 6 11.2A6 6 0 0 1 6 13.2C6 9.2 12 2 12 2z'/></svg>"); }
.vital-glyph[data-glyph="bolt"] { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>"); }

.vital-name { font-size: 1.5vh; letter-spacing: .2em; color: var(--vc); font-weight: 700; }

/* El canvas va absoluto para no aportar alto intrinseco a la grilla. */
.vital-canvas-wrap { position: relative; min-width: 0; min-height: 0; }
.vital-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vital-delta {
  position: absolute; right: 1.5vw; top: 50%; transform: translateY(-50%) scale(.7);
  font-size: 3.4vh; font-weight: 700; opacity: 0;
  transition: opacity .2s, transform .3s; pointer-events: none;
}
.vital-delta.show { opacity: 1; transform: translateY(-50%) scale(1); }
.vital-delta.up { color: var(--green); text-shadow: 0 0 2vh rgba(47,255,143,.7); }
.vital-delta.down { color: var(--red); text-shadow: 0 0 2vh rgba(255,59,92,.7); }

.vital-box {
  text-align: right; padding-right: 1.2vw;
  display: flex; flex-direction: column; align-items: flex-end;
  align-self: center;
}
.vital-num {
  font-size: 4.4vh; font-weight: 700; line-height: 1; color: var(--vc);
  /* color-mix es reciente (Chrome 111 / Safari 16.2). El currentColor de abajo
     da el mismo resplandor en cualquier navegador; el color-mix solo lo afina.
     Un monitor sin glow se ve apagado, pero se ve. */
  text-shadow: 0 0 2vh currentColor;
  text-shadow: 0 0 2vh color-mix(in srgb, var(--vc) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.vital-row.critical .vital-num { animation: pulse .7s infinite; }
.vital-row.flat .vital-num { color: var(--red); }
.vital-unit { font-size: 1.15vh; color: var(--dim); letter-spacing: .16em; }

/* ── panel derecho ──────────────────────────────────────────────────── */
#side {
  border-left: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; padding: 2vh 1.6vw; gap: 1.4vh;
  min-height: 0;
}

#doc-line {
  display: flex; align-items: flex-start; gap: .8vw;
  min-height: 7vh; padding: 1.2vh 1vw;
  background: rgba(53,214,255,.06); border-left: .35vw solid var(--cyan);
  border-radius: .4vh;
}
#doc-line .who { font-size: 1vh; letter-spacing: .28em; color: var(--cyan); }
#doc-line .what { font-size: 2vh; line-height: 1.35; color: #cfe8f5; font-style: italic; }
#doc-line.speaking { box-shadow: 0 0 3vh rgba(53,214,255,.25) inset; }

#event-index { font-size: 1.1vh; letter-spacing: .3em; color: var(--dim); }
#event-headline { font-size: 3.5vh; font-weight: 700; line-height: 1.15; color: #fff; }
#event-sub { font-size: 1.9vh; color: var(--dim); line-height: 1.4; }

#options { display: flex; flex-direction: column; gap: 1vh; margin-top: .6vh; }
.opt {
  display: flex; align-items: flex-start; gap: .9vw;
  padding: 1.3vh 1vw; border: 1px solid var(--line); border-radius: .5vh;
  background: #0d1622; transition: all .25s;
}
.opt .key {
  flex: 0 0 auto; width: 3.4vh; height: 3.4vh; border-radius: .4vh;
  background: #1a2836; color: var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: 1.8vh;
}
.opt .txt { font-size: 1.85vh; line-height: 1.3; }
.opt.picked { border-color: var(--amber); background: rgba(255,210,63,.10); }
.opt.picked .key { background: var(--amber); color: #111; }
.opt.best { border-color: var(--green); background: rgba(47,255,143,.12); }
.opt.best .key { background: var(--green); color: #062; }
.opt.miss { opacity: .32; }

#verdict {
  margin-top: auto; padding: 1.4vh 1.1vw; border-radius: .5vh;
  font-size: 1.9vh; line-height: 1.4; display: none;
}
#verdict.show { display: block; }
#verdict.good { background: rgba(47,255,143,.10); border-left: .35vw solid var(--green); }
#verdict.bad { background: rgba(255,59,92,.10); border-left: .35vw solid var(--red); }
#verdict .tag { display: block; font-size: 1.1vh; letter-spacing: .28em; margin-bottom: .5vh; }
#verdict.good .tag { color: var(--green); }
#verdict.bad .tag { color: var(--red); }

/* ── footer ─────────────────────────────────────────────────────────── */
#footer {
  display: flex; align-items: center; gap: 2.5vw;
  padding: 1.1vh 2vw; border-top: 1px solid var(--line);
  background: #060a11; font-size: 1.4vh;
}
#lives { display: flex; align-items: baseline; gap: .7vw; }
#lives .n { font-size: 3vh; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
#lives .l { font-size: 1.15vh; letter-spacing: .24em; color: var(--dim); }
#tops { display: flex; gap: 1.6vw; overflow: hidden; flex: 1; }
#tops .d { display: flex; align-items: baseline; gap: .45vw; white-space: nowrap; }
#tops .d .p { color: var(--dim); font-size: 1.1vh; }
#tops .d .n { color: var(--ink); }
#tops .d .r { color: var(--green); font-weight: 700; }
#brand { font-size: 1.2vh; letter-spacing: .24em; color: var(--dim); white-space: nowrap; }

/* ── overlays ───────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #071019 0%, #02040a 75%);
  text-align: center; padding: 4vh 4vw;
}
.overlay.show { display: flex; }

/* attract */
#attract .big { font-size: 13vh; font-weight: 800; letter-spacing: .1em; color: var(--red);
  text-shadow: 0 0 6vh rgba(255,59,92,.55); line-height: 1; }
#attract .sub { font-size: 3vh; color: var(--ink); margin-top: 1.6vh; opacity: .9; }
#attract .qrbox {
  margin-top: 4vh; padding: 1.8vh; background: #fff; border-radius: 1vh;
  box-shadow: 0 0 8vh rgba(47,255,143,.28);
}
#attract .qrbox img { display: block; width: 26vh; height: 26vh; }
#attract .cta { margin-top: 2.4vh; font-size: 2.6vh; font-weight: 700; letter-spacing: .16em; color: var(--green); }
#attract .hint { margin-top: .8vh; font-size: 1.6vh; color: var(--dim); }
#attract .stats { margin-top: 4vh; display: flex; gap: 5vw; align-items: flex-start; }
#attract .stat .n { font-size: 7vh; font-weight: 800; color: var(--green); line-height: 1; }
#attract .stat .l { font-size: 1.3vh; letter-spacing: .26em; color: var(--dim); margin-top: .8vh; }
#attract .board { text-align: left; }
#attract .board h4 { font-size: 1.3vh; letter-spacing: .26em; color: var(--dim); font-weight: 400; margin-bottom: 1.2vh; }
#attract .board li { list-style: none; font-size: 2vh; display: flex; gap: 1vw; margin-bottom: .7vh; }
#attract .board li .p { color: var(--dim); width: 2ch; }
#attract .board li .r { color: var(--green); font-weight: 700; margin-left: auto; }

/* ── escalón 1: alguien pasó cerca ──────────────────────────────────
 * Objetivo: que gire la cabeza. Se juega en el BORDE de la pantalla a
 * propósito — la visión periférica detecta movimiento y color mucho antes
 * que detalle, así que un pulso rojo en los bordes gana más miradas desde el
 * pasillo que cualquier cosa en el centro.
 */
#hail {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 16vh 5vh rgba(255,59,92,.8);
}
#attract.hail #hail { animation: hailpulse 1.7s ease-out; }
@keyframes hailpulse {
  0%, 100% { opacity: 0; }
  12%      { opacity: 1; }
  38%      { opacity: .18; }
  58%      { opacity: .95; }
  80%      { opacity: .12; }
}

#hail-line {
  position: absolute; top: 8vh; left: 50%; transform: translateX(-50%) translateY(-2vh);
  font-size: 1.9vh; letter-spacing: .38em; color: var(--red);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
#attract.hail #hail-line { animation: haildrop 1.7s ease-out; }
@keyframes haildrop {
  0%       { opacity: 0; transform: translateX(-50%) translateY(-2vh); }
  14%      { opacity: 1; transform: translateX(-50%) translateY(0); }
  74%      { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(0); }
}

#attract.hail .big { animation: jolt .42s ease-out 2; }
@keyframes jolt {
  0%, 100% { transform: scale(1) translateX(0); }
  20%      { transform: scale(1.045) translateX(-.5vw); }
  55%      { transform: scale(.985) translateX(.4vw); }
}

/* El flash rojo que dispara la camara cuando alguien mira. */
#attract.alarm { animation: alarmflash 1.9s ease-out; }
@keyframes alarmflash {
  0%, 100% { background: radial-gradient(ellipse at center, #071019 0%, #02040a 75%); }
  10%, 30%, 50% { background: radial-gradient(ellipse at center, #4a0a16 0%, #12020a 75%); }
}
#attract.alarm .big { animation: shake .12s 8; }
@keyframes shake { 50% { transform: translateX(-.6vw); } }

/* admitted */
#admitted .stamp {
  font-size: 2.2vh; letter-spacing: .4em; color: var(--red); margin-bottom: 2vh;
}
/* font-size lo pone fitCompany() en monitor.js segun el largo del nombre. */
#admitted .co {
  font-size: 9vh; font-weight: 800; color: #fff; line-height: 1.05;
  max-width: 88vw; text-shadow: 0 0 5vh rgba(255,255,255,.18);
  overflow-wrap: break-word; hyphens: auto;
}
#admitted .st { margin-top: 2.6vh; font-size: 4vh; font-weight: 700; color: var(--red);
  letter-spacing: .18em; animation: pulse .9s infinite; }
#admitted .who { margin-top: 3.6vh; font-size: 2vh; color: var(--dim); letter-spacing: .2em; }

/* outcome */
#outcome .verdict-big { font-size: 8.5vh; font-weight: 800; line-height: 1; letter-spacing: .04em; }
#outcome.saved .verdict-big { color: var(--green); text-shadow: 0 0 6vh rgba(47,255,143,.5); }
#outcome.stable .verdict-big { color: var(--amber); text-shadow: 0 0 6vh rgba(255,210,63,.45); }
#outcome.critical .verdict-big { color: var(--orange); }
#outcome.flatline .verdict-big { color: var(--red); text-shadow: 0 0 6vh rgba(255,59,92,.5); }
#outcome .who { font-size: 2.4vh; color: var(--dim); margin-top: 1.4vh; letter-spacing: .1em; }

#outcome .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin-top: 4vh;
  width: 84vw; text-align: left; }
#outcome h4 { font-size: 1.3vh; letter-spacing: .3em; color: var(--dim); font-weight: 400;
  margin-bottom: 1.4vh; }
#outcome .dx { display: flex; align-items: baseline; gap: .9vw; margin-bottom: 1.4vh; }
#outcome .dx .dot { width: 1.4vh; height: 1.4vh; border-radius: 50%; flex: 0 0 auto; }
#outcome .dx.critical .dot { background: var(--red); box-shadow: 0 0 2vh var(--red); }
#outcome .dx.watch .dot { background: var(--amber); }
#outcome .dx.stable .dot { background: var(--green); }
#outcome .dx .name { font-size: 2.6vh; font-weight: 700; color: #fff; }
#outcome .dx .sev { font-size: 1.2vh; letter-spacing: .2em; color: var(--dim); margin-left: auto; }
#outcome .rx li { list-style: none; font-size: 2.2vh; margin-bottom: 1.1vh; color: #cfe8f5; }
#outcome .rx li::before { content: "✔"; color: var(--green); margin-right: .7vw; }

#outcome .score { display: flex; gap: 5vw; justify-content: center; margin-top: 3.4vh; }
#outcome .score .n { font-size: 6vh; font-weight: 800; color: var(--green); line-height: 1; }
#outcome .score .l { font-size: 1.2vh; letter-spacing: .26em; color: var(--dim); margin-top: .6vh; }
#outcome .phone-note { margin-top: 3vh; font-size: 2.2vh; color: var(--amber); letter-spacing: .06em; }

/* Aviso de sonido. Vive arriba de todo (incluida la barra de staff) porque si
 * no se ve, el visitante mira el clip mudo y se pierde justo lo que lo vende. */
#sound-gate {
  position: fixed; z-index: 75; left: 50%; bottom: 3vh; transform: translateX(-50%);
  font-size: 1.5vh; letter-spacing: .22em; color: #04070c;
  background: var(--amber); padding: 1.1vh 2vw; border-radius: 3vh;
  font-weight: 700; box-shadow: 0 0 4vh rgba(255,210,63,.45);
  animation: pulse 1.6s infinite;
}
#sound-gate.hidden { display: none; }

/* Flash a blanco. z-index 68: por encima del clip (65) y de las scanlines
 * (60), por debajo de la barra de staff (70). El cambio de pantalla se hace
 * en el pico del blanco, asi el corte queda escondido adentro del flash. */
#flash {
  position: fixed; inset: 0; z-index: 68; background: #fff;
  opacity: 0; pointer-events: none;
}
#flash.on { animation: whiteflash 440ms ease-out; }
@keyframes whiteflash {
  0%   { opacity: 0; }
  17%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── el médico ──────────────────────────────────────────────────────
 * z-index 65: por encima de las scanlines (60) a proposito. Las scanlines
 * venden la ilusion de monitor en el resto de la pantalla, pero encima de
 * imagen real solo ensucian. Debajo de la barra de staff (70).
 */
#doctorvid {
  z-index: 65; padding: 0; background: #000;
  align-items: stretch; justify-content: stretch;
}
#doctorvid video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* El QR entra a los pocos segundos: quien ya se enganchó no tiene por qué
   esperar a que termine el clip para poder escanear. */
#dv-qr {
  position: absolute; right: 3vw; bottom: 4vh;
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  padding: 1.6vh; border-radius: 1vh; background: rgba(4,7,12,.82);
  border: 1px solid rgba(47,255,143,.35);
  box-shadow: 0 0 6vh rgba(0,0,0,.6);
  opacity: 0; transform: translateY(2vh); transition: opacity .5s, transform .5s;
}
#dv-qr.show { opacity: 1; transform: translateY(0); }
#dv-qr img { width: 17vh; height: 17vh; display: block; background: #fff;
             padding: .8vh; border-radius: .6vh; }
#dv-qr span { font-size: 1.35vh; letter-spacing: .16em; color: var(--green); font-weight: 700; }

/* Si el navegador bloquea el autoplay con sonido, el clip igual corre en
   silencio y este cartel le dice al staff que un click lo arregla. */
#dv-muted {
  position: absolute; left: 3vw; bottom: 4vh;
  font-size: 1.4vh; letter-spacing: .2em; color: var(--dim);
  padding: 1vh 1.4vw; border: 1px solid var(--line); border-radius: .5vh;
  background: rgba(4,7,12,.8); display: none;
}
#dv-muted.show { display: block; }

/* ── staff bar (aparece al mover el mouse) ──────────────────────────── */
#staff {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: flex; gap: .8vw; justify-content: center; padding: 1vh;
  background: rgba(4,7,12,.94); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .22s; cursor: default;
}
#staff.show { transform: translateY(0); }
#staff button {
  font-family: var(--mono); font-size: 1.4vh; letter-spacing: .18em;
  padding: 1vh 1.6vw; border: 1px solid var(--line); border-radius: .4vh;
  background: #101a26; color: var(--ink); cursor: pointer;
}
#staff button:hover { border-color: var(--green); color: var(--green); }
#staff button.on { border-color: var(--green); color: var(--green); }
#staff .status { font-size: 1.2vh; color: var(--dim); align-self: center; margin-left: 1vw; }

/* El video crudo queda invisible pero SI renderizado: con display:none algunos
   navegadores dejan de producir frames y MediaPipe se queda sin nada que leer.
   La vista previa del panel se dibuja aparte, en un canvas. */
#cam { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── diagnóstico de cámara (tecla C) ────────────────────────────────── */
#cam-debug {
  position: fixed; z-index: 80; left: 2vw; top: 2vh; display: none;
  background: rgba(4,7,12,.96); border: 1px solid var(--line);
  border-radius: .8vh; padding: 1.4vh 1.2vw; width: 26vw; min-width: 300px;
  box-shadow: 0 0 6vh rgba(0,0,0,.7);
}
#cam-debug.show { display: block; }
#cam-canvas {
  width: 100%; height: auto; display: block; border-radius: .5vh;
  background: #000; transform: scaleX(-1);   /* espejado: mirarse es más natural */
}
#cam-verdict {
  margin-top: 1.2vh; font-size: 1.9vh; font-weight: 700; letter-spacing: .06em;
  color: var(--amber);
}
#cam-verdict.ok { color: var(--green); }
#cam-verdict.bad { color: var(--red); }
#cam-read { margin-top: .9vh; font-size: 1.25vh; line-height: 1.65; color: var(--dim); }
#cam-read b { color: var(--ink); font-weight: 400; }
#cam-read .ok { color: var(--green); }
#cam-read .no { color: var(--red); }
#cam-hint {
  margin-top: 1vh; font-size: 1.2vh; line-height: 1.5; color: var(--amber);
}

/* Chip de estado. Chico y en una esquina, pero SIEMPRE visible en attract:
   una cámara caída no puede pasar desapercibida durante ocho horas de feria. */
#cam-chip {
  position: fixed; z-index: 45; right: 1.6vw; top: 1.6vh;
  display: none; align-items: center; gap: .6vw;
  font-size: 1.15vh; letter-spacing: .18em; color: var(--dim);
  background: rgba(4,7,12,.7); padding: .7vh 1vw; border-radius: 2vh;
}
#cam-chip.show { display: flex; }
#cam-chip i { width: .9vh; height: .9vh; border-radius: 50%; background: var(--dim); }
#cam-chip.live i { background: var(--green); box-shadow: 0 0 1.4vh var(--green); }
#cam-chip.seeing i { background: var(--green); animation: pulse .6s infinite; }
#cam-chip.down i { background: var(--red); box-shadow: 0 0 1.4vh var(--red); }
#cam-chip.down { color: var(--red); }