/* H-GO · Captura de clientes */
@font-face{
  font-family:"Skratch Punk";
  src:url("assets/Skratch_Punk.ttf") format("truetype");
  font-display:swap;
}
:root{
  --fondo:#f5f5f7;
  --tarjeta:#ffffff;
  --texto:#1d1d1f;
  --suave:#6e6e73;
  --linea:#d2d2d7;
  --acento:#0071e3;
  --acento-suave:#e8f2fe;
  --ok:#1d8b45;
  --ok-suave:#e7f6ec;
  --alerta:#b25000;
  --alerta-suave:#fff4e5;
  --error:#c0392b;
  --error-suave:#fdecea;
  --amarilla:#e0a800;
  --radio:16px;
  --sombra:0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#000; --tarjeta:#1c1c1e; --texto:#f5f5f7; --suave:#98989d;
    --linea:#38383a; --acento:#0a84ff; --acento-suave:#0b2545;
    --ok:#32d573; --ok-suave:#0f2e1b; --alerta:#ffb459; --alerta-suave:#3a2a10;
    --error:#ff6b5e; --error-suave:#3a1512; --amarilla:#ffcc33;
    --sombra:0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fondo);color:var(--texto);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.envoltura{max-width:1120px;margin:0 auto;padding:24px 18px 90px}
.oculto{display:none !important}

header{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
header img{height:34px;width:auto;display:block}
header .titulo{font-family:"Skratch Punk",-apple-system,"Segoe UI",sans-serif;
  font-size:27px;line-height:1.1;letter-spacing:.5px;margin:0}
header .sub{color:var(--suave);font-size:13px;margin:2px 0 0}
header .derecha{margin-left:auto;display:flex;gap:8px;align-items:center}

.tarjeta{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:22px;margin-bottom:18px}
h2{font-size:17px;margin:0 0 14px;font-weight:600}
label{display:block;font-size:13px;color:var(--suave);margin:0 0 6px;font-weight:500}

input[type=text],input[type=password],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;
  background:var(--fondo);color:var(--texto);font:inherit;font-size:15px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:transparent}
.campo{margin-bottom:14px}
.pista{font-size:12px;color:var(--suave);margin-top:5px}

.boton{background:var(--acento);color:#fff;border:0;border-radius:999px;
  padding:12px 26px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.boton:hover{opacity:.88}
.boton:disabled{opacity:.4;cursor:default}
.boton.secundario{background:transparent;color:var(--acento);border:1px solid var(--linea);
  padding:9px 18px;font-size:14px}
.boton.chico{padding:7px 14px;font-size:13px}
.boton.verde{background:var(--ok)}

.opciones{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.opcion{border:1px solid var(--linea);background:transparent;color:var(--texto);
  padding:9px 16px;border-radius:999px;font-size:14px;cursor:pointer;font-family:inherit}
.opcion:hover{border-color:var(--acento)}
.opcion[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#fff}

/* ---------- zona de fotos ---------- */
#zona{border:2px dashed var(--linea);border-radius:var(--radio);padding:30px 18px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
#zona:hover,#zona.encima{border-color:var(--acento);background:var(--acento-suave)}
#zona .grande{font-size:16px;font-weight:600;margin-bottom:5px}
#zona .chico{color:var(--suave);font-size:13px}

/* ---------- grupos por cliente ---------- */
.grupos{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.grupo{border:1px solid var(--linea);border-radius:12px;padding:10px;width:172px;position:relative}
.grupo .num{font-size:12px;color:var(--suave);margin-bottom:7px;font-weight:600}
.grupo .fotos{display:flex;gap:6px}
.grupo .fotos img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--linea)}
.grupo .quitar{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;cursor:pointer}

/* ---------- progreso ---------- */
.barra{height:6px;background:var(--linea);border-radius:99px;overflow:hidden;margin:12px 0}
.barra i{display:block;height:100%;background:var(--acento);width:0;transition:width .3s}

/* ---------- lista de resultados ---------- */
.lista{display:flex;flex-direction:column;gap:10px}
.reng{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--linea);
  border-radius:12px;cursor:pointer;background:var(--tarjeta)}
.reng:hover{border-color:var(--acento)}
.reng img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.reng .datos{flex:1;min-width:0}
.reng .nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reng .sub{font-size:13px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;flex:none;text-transform:uppercase;letter-spacing:.3px}
.marca.pendiente{background:var(--alerta-suave);color:var(--alerta)}
.marca.revisado{background:var(--ok-suave);color:var(--ok)}
.marca.enviado{background:var(--acento-suave);color:var(--acento)}
.marca.error{background:var(--error-suave);color:var(--error)}
.marca.baja{background:var(--error-suave);color:var(--error)}
.marca.media{background:var(--alerta-suave);color:var(--alerta)}

/* ---------- cotejo ---------- */
#cotejo{position:fixed;inset:0;background:var(--fondo);z-index:50;display:flex;flex-direction:column}
#cotejo .barraSup{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--linea);background:var(--tarjeta);flex-wrap:wrap}
#cotejo .barraSup .cuenta{font-weight:600}
#cotejo .barraSup .derecha{margin-left:auto;display:flex;gap:8px;align-items:center}
#cotejo .cuerpo{flex:1;display:flex;min-height:0}
#cotejo .fotos{flex:1.15;background:#111;overflow:auto;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:12px}
#cotejo .fotos img{max-width:100%;cursor:zoom-in;border-radius:8px;display:block}
#cotejo .fotos img.zoom{max-width:none;width:190%;cursor:zoom-out}
#cotejo .campos{flex:1;overflow:auto;padding:18px;min-width:330px}
@media (max-width:820px){
  #cotejo .cuerpo{flex-direction:column}
  #cotejo .campos{min-width:0}
}
.campoGrande input{font-size:17px;padding:13px}
.campoGrande.principal input{font-weight:600}
.origen{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--amarilla);color:#3a2a00;margin-left:8px}
.otros{border-top:1px solid var(--linea);margin-top:16px;padding-top:14px}
.otros .par{display:flex;gap:10px;margin-bottom:8px;font-size:14px}
.otros .par b{flex:none;min-width:150px;color:var(--suave);font-weight:600}

.aviso{background:var(--alerta-suave);border-left:3px solid var(--alerta);padding:12px 14px;
  border-radius:10px;margin:14px 0;font-size:14px}
.aviso b{display:block;margin-bottom:5px;color:var(--alerta)}
.aviso ul{margin:0;padding-left:19px}
.aviso.rojo{background:var(--error-suave);border-left-color:var(--error)}
.aviso.rojo b{color:var(--error)}
.error{background:var(--error-suave);border-left:3px solid var(--error);padding:12px 14px;
  border-radius:10px;color:var(--error);margin-bottom:16px;font-size:14px}

.rueda{width:26px;height:26px;border:3px solid var(--linea);border-top-color:var(--acento);
  border-radius:50%;animation:giro .8s linear infinite;margin:0 auto 12px}
@keyframes giro{to{transform:rotate(360deg)}}

.pie{color:var(--suave);font-size:12px;text-align:center;margin-top:26px;line-height:1.7}
.entrar{max-width:400px;margin:12vh auto 0}