:root{
    --navy:#03082D; --navy2:#070E3A; --acento:#EF8800; --sobre-acento:#1C1000;
    --cyan:#19DFEB; --ok:#3FBE72; --alerta:#FF7373; --aviso:#F0B446;
    --tinta:#FFFFFF; --tenue:#A6B0D6; --borde:rgba(255,255,255,.14);
    --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%}
  body{
    background:var(--navy); color:var(--tinta);
    font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    padding:calc(var(--e4) + env(safe-area-inset-top)) var(--e4)
            calc(var(--e4) + env(safe-area-inset-bottom));
    -webkit-text-size-adjust:100%;
    max-width:480px; margin:0 auto;
  }
  h1{font-size:1.5rem;margin:0 0 var(--e2);letter-spacing:-.02em}
  .estacion{color:var(--cyan);font-weight:700;font-size:.85rem;
    text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--e3)}
  .tenue{color:var(--tenue);font-size:.95rem;margin:0 0 var(--e4)}
  .cifra{font-variant-numeric:tabular-nums}
  button{font:inherit;cursor:pointer;border:0;border-radius:12px}
  .principal{
    width:100%;min-height:64px;background:var(--acento);color:var(--sobre-acento);
    font-weight:700;font-size:1.1rem;margin-top:var(--e4);
  }
  .principal:disabled{background:transparent;color:var(--tenue);
    border:1px solid var(--borde);cursor:default}
  .secundaria{
    width:100%;min-height:56px;background:transparent;color:var(--acento);
    border:1px solid var(--borde);font-weight:600;margin-top:var(--e3);
  }
  .secundaria:disabled{color:var(--tenue);cursor:default}
  .teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);margin-top:var(--e4)}
  .tecla{min-height:64px;background:var(--navy2);color:var(--tinta);
    font-size:1.4rem;font-weight:600;border:1px solid var(--borde)}
  .tecla:active{transform:scale(.97)}
  .puntos{display:flex;gap:var(--e3);justify-content:center;margin:var(--e5) 0 var(--e3)}
  .punto{width:18px;height:18px;border-radius:50%;border:2px solid var(--borde)}
  .punto.lleno{background:var(--acento);border-color:var(--acento)}
  .aviso{padding:var(--e3) var(--e4);border-radius:12px;margin:var(--e3) 0 0;
    font-weight:600;font-size:.95rem}
  .aviso.mal{background:rgba(255,115,115,.14);color:var(--alerta)}
  .aviso.bien{background:rgba(63,190,114,.14);color:var(--ok)}
  .aviso.espera{background:rgba(240,180,70,.14);color:var(--aviso)}
  .quien{font-size:2rem;font-weight:800;margin:var(--e4) 0 var(--e2);letter-spacing:-.02em}
  .bloque{background:var(--navy2);border:1px solid var(--borde);border-radius:14px;
    padding:var(--e4);margin-top:var(--e4)}
  .bloque h2{font-size:1rem;margin:0 0 var(--e3)}
  .contador{display:grid;gap:4px;margin-bottom:var(--e3)}
  .contador label{font-weight:600}
  .contador small{color:var(--tenue)}
  .contador input{
    width:100%;min-height:56px;font:inherit;font-size:1.3rem;padding:0 var(--e3);
    background:var(--navy);color:var(--tinta);border:1px solid var(--borde);
    border-radius:10px;font-variant-numeric:tabular-nums;
  }
  .contador input[aria-invalid="true"]{border-color:var(--alerta)}
  .camara{position:relative;border-radius:12px;overflow:hidden;background:#000;
    aspect-ratio:3/4}
  .camara video,.camara img{width:100%;height:100%;object-fit:cover;display:block}
  /* El video del frente se ve como un espejo, que es lo que la gente espera.
     La foto que se guarda NO va al revés: se dibuja sin voltear. */
  .camara video{transform:scaleX(-1)}
  .oculto{display:none !important}
  .marca{color:var(--tenue);font-size:.75rem;text-align:center;margin-top:var(--e5)}
  .grande{font-size:1.15rem}
  .sin-margen{margin:0}