:root{
  --fondo:#0f1115; --tarjeta:#171a21; --linea:#262b35;
  --tinta:#e8eaee; --tinta-suave:#a8b0bd; --tinta-tenue:#6f7889;
  --acento:#4fb3a5; --acento-f:#14312e;
  --alerta:#e0675d; --alerta-f:#33201e;
  --bien:#5bbd7a; --bien-f:#1b2f22;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--tinta);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:0 16px 56px;
}
.marco{max-width:560px;margin:0 auto}

header{padding:18px 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
header h1{margin:0;font-size:19px;letter-spacing:-.01em}
header .quien{margin-left:auto;font-size:12.5px;color:var(--tinta-tenue)}
header .quien a{color:var(--tinta-suave)}

.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:8px;
  padding:16px;margin:0 0 14px}
.tarjeta h2{margin:0 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-tenue);font-weight:600}

label{display:block;font-size:12.5px;color:var(--tinta-suave);margin:0 0 5px}
input[type=text],input[type=password],input[type=date],select{
  width:100%;padding:11px 12px;background:#0d1016;color:var(--tinta);
  border:1px solid var(--linea);border-radius:6px;font-size:16px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--acento)}
.campo{margin:0 0 13px}
.campo:last-child{margin-bottom:0}
.pista{font-size:12px;color:var(--tinta-tenue);margin:5px 0 0}

button,.boton{
  display:inline-block;width:100%;padding:12px 14px;border-radius:6px;border:1px solid transparent;
  background:var(--acento);color:#06231f;font:600 15px/1.2 inherit;cursor:pointer;
  text-align:center;text-decoration:none}
button:hover,.boton:hover{filter:brightness(1.08)}
button.secundario,.boton.secundario{background:transparent;color:var(--tinta-suave);border-color:var(--linea)}
button.peligro{background:var(--alerta);color:#2a0f0c}

.dos-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.dos-botones button{padding:11px 8px;font-size:14px}

.productos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
.productos button{padding:14px 6px;font-size:14px}

.aviso{border-radius:6px;padding:12px 14px;margin:0 0 14px;font-size:14px;border:1px solid}
.aviso.mal{background:var(--alerta-f);border-color:var(--alerta);color:#f3a89f}
.aviso.bien{background:var(--bien-f);border-color:var(--bien);color:#a5dcb6}

.resumen{list-style:none;margin:0;padding:0;font-size:14px}
.resumen li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--linea)}
.resumen li:last-child{border-bottom:0}
.resumen .etiqueta{color:var(--tinta-tenue)}
.resumen .valor{font-variant-numeric:tabular-nums;text-align:right;word-break:break-all}
.resumen .valor.ok{color:var(--bien)}
.resumen .valor.no{color:var(--alerta)}

#lector{width:100%;border-radius:6px;overflow:hidden;margin:12px 0 0}
#lector:empty{display:none}

.pie{margin:18px 0 0;font-size:12px;color:var(--tinta-tenue);text-align:center}
.pie a{color:var(--tinta-suave)}

@media (max-width:420px){
  .productos{grid-template-columns:1fr}
}

/* Velo de proceso: el equivalente al ProgressDialog del APK. Una generacion
   son dos llamadas remotas y dos subidas por FTP, varios segundos sin nada
   que mirar si no se avisa. */
.velo{position:fixed;inset:0;z-index:50;padding:24px;
  background:rgba(8,10,14,.84);
  display:flex;align-items:center;justify-content:center}
.velo[hidden]{display:none}
.velo-caja{width:100%;max-width:300px;text-align:center;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:26px 28px}
.giro{width:38px;height:38px;margin:0 auto 15px;border-radius:50%;
  border:3px solid var(--linea);border-top-color:var(--acento);
  animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.velo-titulo{margin:0;font-size:16px;font-weight:600}
.velo-nota{margin:6px 0 0;font-size:12.5px;color:var(--tinta-tenue)}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:2.6s}}