:root {
  --fondo: #f3f6f9; --superficie: #ffffff; --texto: #13212e; --suave: #5b6b7a; --borde: #d6dee6;
  --primario: #0f3d5e; --entrada: #13795b; --salida: #b3471d; --error: #c0262d; --aviso: #8a5a00;
  --radio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0d1620; --superficie: #16222e; --texto: #e7eef5; --suave: #9aabbb; --borde: #2a3947;
          --primario: #4ea3d8; --entrada: #2fb88a; --salida: #e0713f; --error: #ff6b70; --aviso: #f0b64b; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       display: flex; flex-direction: column; user-select: none; }
.oculto { display: none !important; }
.barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
         padding-top: max(10px, env(safe-area-inset-top)); background: var(--primario); color: #fff; }
@media (prefers-color-scheme: dark) { .barra { background: #0b2a40; } }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.marca img { width: 30px; height: 30px; border-radius: 8px; }
.estado { display: flex; gap: 6px; }
.chip { font-size: 13px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.18); }
.chip.off { background: #c0262d; }
main { flex: 1; display: flex; padding: 16px; }
.vista { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; width: 100%; }
h1, h2 { margin: 6px 0; text-align: center; }
.centro { margin: auto; text-align: center; color: var(--suave); }
.spinner { width: 42px; height: 42px; border: 4px solid var(--borde); border-top-color: var(--primario); border-radius: 50%;
           animation: giro 1s linear infinite; margin: 0 auto 12px; }
@keyframes giro { to { transform: rotate(360deg); } }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; width: 100%;
           display: flex; flex-direction: column; gap: 10px; }
.tarjeta p { margin: 0; color: var(--suave); }
input { font: inherit; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--texto); width: 100%; }
.btn { font: inherit; font-weight: 600; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
       padding: 12px 18px; border-radius: 12px; cursor: pointer; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.enlace { border: none; background: none; color: var(--suave); text-decoration: underline; }
.btn:disabled { opacity: .5; }
.pestanas { display: flex; gap: 6px; width: 100%; }
.pestana { flex: 1; font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); }
.pestana.activa { background: var(--primario); color: #fff; border-color: var(--primario); }
.error { color: var(--error); min-height: 1.2em; text-align: center; margin: 0; }
.aviso { color: var(--aviso); text-align: center; font-size: 14px; }
.reloj { text-align: center; margin-top: 4vh; }
#hora { font-size: clamp(56px, 16vw, 110px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
#fecha { color: var(--suave); font-size: 18px; }
.saludo { font-size: 20px; font-weight: 600; }
.botones { display: flex; gap: 14px; width: 100%; margin-top: 3vh; }
.btn.grande { flex: 1; font-size: clamp(22px, 5vw, 30px); padding: 34px 10px; border: none; color: #fff; border-radius: 20px; }
.btn.entrada { background: var(--entrada); }
.btn.salida { background: var(--salida); }
.dni { font-size: 34px; text-align: center; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.teclado button { font: inherit; font-size: 28px; font-weight: 600; padding: 18px 0; border-radius: 14px; border: 1px solid var(--borde);
                  background: var(--superficie); color: var(--texto); }
.teclado button.ok { background: var(--primario); color: #fff; border-color: var(--primario); }
.camara { position: relative; width: 100%; max-width: 420px; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; background: #000; }
.camara video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.guia { position: absolute; inset: 12% 16%; border: 4px dashed rgba(255,255,255,.55); border-radius: 50%; transition: border-color .2s; }
.guia.bien { border-color: #2fb88a; border-style: solid; }
.instruccion { font-size: 20px; font-weight: 600; text-align: center; margin: 0; }
.res-icono { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 64px; color: #fff;
             background: var(--entrada); margin-top: 4vh; }
.res-icono.mal { background: var(--salida); }
#resDetalle { color: var(--suave); text-align: center; margin: 0; }
.mensaje { background: var(--superficie); border-left: 4px solid var(--primario); border-radius: 8px; padding: 10px 12px; width: 100%; }
.mensaje small { color: var(--suave); display: block; }
.legal { font-size: 14px; max-height: 50vh; overflow: auto; user-select: text; }
.lista { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fila { display: flex; justify-content: space-between; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.fila .e { color: var(--entrada); font-weight: 600; } .fila .s { color: var(--salida); font-weight: 600; }