/* Registro del guardia · misma imagen del tablero: tinta, papel y un solo acento; los colores de estado van siempre con texto. */
:root {
  --tinta:#141414; --tenue:#59605d; --filete:#d9dcda; --papel:#f4f5f4; --blanco:#fff; --acento:#0f4c5c;
  --ok:#1b6e45; --ok-f:#e4f1ea; --mal:#b3261e; --mal-f:#fbe9e7;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papel); color:var(--tinta); font:16px/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }

.barra { display:flex; align-items:center; gap:14px; background:var(--tinta); color:#fff; padding:14px 16px; padding-top:max(14px, env(safe-area-inset-top)); }
.barra img { height:18px; filter:brightness(0) invert(1); display:block; }
.producto { font-size:12px; letter-spacing:.09em; text-transform:uppercase; border-left:1px solid #5a5f5d; padding-left:14px; }
.aviso-demo { margin:0; background:#e7ecec; color:var(--acento); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; }

main { max-width:520px; margin:0 auto; padding:22px 16px 40px; }
.etq { margin:0; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--tenue); }
h1 { margin:4px 0 16px; font-size:26px; line-height:1.15; letter-spacing:-.01em; }
h1.ok { color:var(--ok); }
h1.mal { color:var(--mal); }
.msg { margin:0 0 16px; padding:12px 14px; background:var(--blanco); border-left:3px solid var(--acento); }
.msg.mal { border-color:var(--mal); background:var(--mal-f); }
.nota { margin:8px 0 16px; font-size:14px; color:var(--tenue); }

.btn { display:block; width:100%; min-height:52px; margin:0 0 10px; padding:14px 16px; border:0; background:var(--tinta); color:#fff; font-size:17px; font-weight:600; text-align:center; }
.btn.sec { background:transparent; color:var(--tinta); border:1px solid var(--tinta); }
.btn:disabled { opacity:.45; cursor:default; }
label.btn { cursor:pointer; }

.ficha { background:var(--blanco); border-top:2px solid var(--tinta); margin:0 0 12px; }
.ficha div { display:flex; justify-content:space-between; gap:16px; padding:11px 14px; border-bottom:1px solid var(--filete); font-size:15px; }
.ficha span { color:var(--tenue); }
.ficha strong { text-align:right; }

.texto-legal { background:var(--blanco); padding:4px 16px; margin:0 0 14px; font-size:14px; max-height:46vh; overflow:auto; border:1px solid var(--filete); }
.texto-legal.fuerte { max-height:none; border-left:3px solid var(--acento); }

.visor { position:relative; aspect-ratio:3/4; width:min(100%, 39vh); background:#000; overflow:hidden; margin:0 auto 8px; }
.visor video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:block; }
.guia { position:absolute; inset:12% 18% 16%; border:3px solid rgba(255,255,255,.85); border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.25); }