/* escaner.css — el escáner ACR dentro de la landing: el campo, el modal y el adelanto.
   Usa los tokens del sitio (styles.css). El modal vive en el tema oscuro, como el resto de la
   página, y la consola de peticiones baja al fondo más oscuro para que se lea como lo que es. */

/* ===== el campo: es el llamado a la acción, no un formulario al final ===== */
.esc-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0 0;max-width:640px}
.esc-form input[type=text]{flex:1 1 300px;min-width:0;background:var(--surface);color:var(--t1);
  border:1px solid var(--line-2);border-radius:100px;padding:15px 22px;font:400 16px/1 var(--sans)}
.esc-form input[type=text]::placeholder{color:var(--t3)}
.esc-form input[type=text]:focus{outline:2px solid var(--blue-bright);outline-offset:1px}
.hero-light .esc-form input[type=text]{background:var(--lt-card);color:var(--lt-ink);border-color:var(--lt-line2)}
.hero-light .esc-form input[type=text]::placeholder{color:var(--lt-3)}
.esc-nota{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--t3);margin:12px 0 0}
.hero-light .esc-nota{color:var(--lt-3)}
.esc-aviso{display:none;margin:14px 0 0;padding:12px 16px;border:1px solid rgba(255,138,138,.28);
  border-radius:12px;background:rgba(255,138,138,.07);color:var(--t1);font-size:14.5px;max-width:640px}
.esc-aviso.puesto{display:block}
.esc-aviso button{margin-top:10px}

/* ===== modal ===== */
.esc-telon{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,8,11,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.esc-telon.abierto{display:flex}
.esc-modal{position:relative;width:min(1080px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.esc-cab{padding:22px 28px 16px;border-bottom:1px solid var(--line)}
.esc-cab-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.esc-sitio{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;color:var(--blue-bright)}
.esc-pulso{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);animation:esc-late 1.6s ease-in-out infinite}
@keyframes esc-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
.esc-reloj{font-family:var(--mono);font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums}
.esc-modal h2{margin:10px 0 2px;font-size:26px;line-height:1.15;color:var(--t1)}
.esc-sub{margin:0;font-size:14.5px;color:var(--t2);max-width:72ch}
/* El campo del escaner dentro del bloque morado del CTA. Ahi el boton primario es morado sobre
   morado y desaparece: se ve el texto flotando, sin forma de boton. Se invierte, como hacia el
   formulario viejo que vivia en ese mismo bloque. */
.est-cta .esc-form{max-width:640px}
.est-cta .esc-form input[type=text]{background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:14px 16px}
.est-cta .esc-form input[type=text]::placeholder{color:rgba(255,255,255,.55)}
.est-cta .esc-form input[type=text]:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.16)}
.est-cta .esc-form .btn-primary{background:#fff;color:var(--blue);border:none;font-weight:700}
.est-cta .esc-form .btn-primary:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.18)}
/* El aviso de privacidad va pegado al boton: es lo unico que queda de la letra chica y funciona
   como su pie, no como una linea aparte. Pequeno, pero con contraste suficiente: es justo el
   enlace que no debe costar trabajo leer. */
.est-cta .esc-form + .est-note{margin-top:8px;font-size:11.5px;color:rgba(255,255,255,.78)}
.esc-boletin{color:var(--t2);font-size:13.5px}
.esc-medido{margin:10px 0 0;font-size:12.5px;color:var(--t2);max-width:72ch;
  padding-left:10px;border-left:2px solid var(--line-2)}
.esc-barra{position:relative;height:2px;margin-top:16px;background:var(--line-2);overflow:hidden;border-radius:2px}
.esc-barra i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue-bright);transition:width .5s ease}
.esc-cuerpo{padding:16px 28px 22px;overflow:auto}
.esc-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 28px 18px;border-top:1px solid var(--line)}
.esc-cuenta{font-family:var(--mono);font-size:13px;color:var(--t2);margin:0}
.esc-cuenta b{font-size:20px;color:var(--t1)}

/* ===== tablero: qué se revisa | qué se pide ===== */
.esc-tablero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:22px;align-items:start}
.esc-tablero.solo{grid-template-columns:1fr}
.esc-panel{display:flex;flex-direction:column;max-height:46vh;min-height:0}
.esc-rotulo{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;padding-bottom:7px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.esc-rollo{overflow:auto;min-height:0}

.esc-pasos{list-style:none;margin:0;padding:0}
.esc-pasos li{padding:9px 0;border-bottom:1px solid var(--line)}
.esc-pasos li:last-child{border-bottom:0}
.esc-paso{display:flex;gap:11px;align-items:baseline}
.esc-marca{flex:0 0 18px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--t3)}
.esc-etiqueta{font-size:15.5px;color:var(--t3)}
.esc-pasos li.en_curso .esc-etiqueta,.esc-pasos li.hecho .esc-etiqueta{color:var(--t1)}
.esc-pasos li.en_curso .esc-marca{color:var(--blue-bright)}
.esc-pasos li.hecho .esc-marca{color:var(--blue-bright)}
.esc-pasos li.fallo .esc-marca,.esc-pasos li.fallo .esc-etiqueta{color:#ff8a8a}
.esc-giro{display:inline-block;width:9px;height:9px;border:2px solid var(--blue-bright);
  border-right-color:transparent;border-radius:50%;animation:esc-gira .8s linear infinite}
@keyframes esc-gira{to{transform:rotate(360deg)}}
.esc-controles{list-style:none;margin:5px 0 0 29px;padding:0}
.esc-controles li{border:0;padding:2px 0;display:flex;gap:8px;font-size:13.5px;color:var(--t2);
  opacity:0;transform:translateY(-3px);transition:opacity .28s ease,transform .28s ease}
.esc-controles li.visible{opacity:1;transform:none}
.esc-controles li .ok{color:var(--blue-bright)}
.esc-controles li.fuera{color:var(--t3)}
.esc-controles li .sello{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:100px;padding:1px 7px;align-self:center;white-space:nowrap}

/* ===== consola de peticiones ===== */
.esc-consola{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font:400 12px/1.7 var(--mono)}
.esc-consola .esc-rotulo{border-bottom-color:var(--line)}
.esc-lineas{list-style:none;margin:0;padding:0}
.esc-lineas li{display:flex;gap:10px;white-space:nowrap;animation:esc-entra .2s ease-out}
@keyframes esc-entra{from{opacity:0}to{opacity:1}}
.esc-lineas .t{color:var(--t3);font-variant-numeric:tabular-nums}
.esc-lineas .m{color:var(--blue-bright)}
.esc-lineas .u{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.esc-lineas .s{min-width:3.5ch;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--t1)}
.esc-lineas .s.tibio{color:var(--t3)}
.esc-lineas .s.mal{color:#ff8a8a}
.esc-lineas .d{min-width:12ch;text-align:right;color:var(--t3);font-variant-numeric:tabular-nums}
.esc-lineas .quien{color:var(--blue-bright);border:1px solid var(--line-2);border-radius:100px;padding:0 7px;font-size:10px}
.esc-cursor{display:inline-block;width:6px;height:12px;background:var(--blue-bright);vertical-align:-1px;
  animation:esc-parpadea 1.1s steps(1) infinite}
@keyframes esc-parpadea{0%,50%{opacity:1}51%,100%{opacity:0}}
.esc-consola .pie{margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line);color:var(--t3);
  font-size:10.5px;line-height:1.5;white-space:normal}

/* ===== adelanto ===== */
.esc-prueba{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 20px;padding:11px 16px;
  border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-size:12px;color:var(--t2)}
.esc-prueba b{color:var(--t1);font-weight:500}
.esc-prueba button{font-family:var(--mono);font-size:11px;padding:6px 12px}
.esc-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 24px}
.esc-tarjeta{border:1px solid var(--line-2);border-radius:14px;padding:15px 17px;background:var(--surface)}
.esc-tarjeta span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.esc-tarjeta b{display:block;font-family:var(--mono);font-weight:500;font-size:34px;line-height:1;color:var(--t1)}
.esc-tarjeta b.corto{font-size:22px}
.esc-tarjeta em{display:block;font-style:normal;font-size:12.5px;color:var(--t3);margin-top:7px}
.esc-h3{font-size:15px;margin:0 0 9px;color:var(--t1)}
.esc-tabla{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
.esc-tabla th{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line-2);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t3);font-weight:400}
.esc-tabla td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);color:var(--t1)}
.esc-tabla td.suave{color:var(--t3)}
.esc-pista{position:relative;height:5px;min-width:80px;background:var(--line-2);border-radius:4px}
.esc-pista i{position:absolute;inset:0 auto 0 0;background:var(--blue-bright);border-radius:4px}
.esc-sev{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.esc-sev.high{color:#ff8a8a}.esc-sev.medium{color:#ffcc80}.esc-sev.low{color:var(--t3)}

/* ===== formulario del reporte ===== */
.esc-datos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.esc-campo.ancho{grid-column:1/-1}
.esc-campo label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.esc-campo input[type=text],.esc-campo input[type=email]{width:100%;background:var(--surface);color:var(--t1);
  border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font:400 15px/1 var(--sans)}
.esc-campo input:focus{outline:2px solid var(--blue-bright);outline-offset:1px}
.esc-campo .err{display:none;margin:6px 0 0;font-size:12.5px;color:#ff8a8a}
.esc-campo.mal input{border-color:#ff8a8a}
.esc-campo.mal .err{display:block}
.esc-consiente{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--t2);line-height:1.5}
.esc-consiente input{margin-top:3px;flex:0 0 auto}

/* ===== acuse ===== */
.esc-acuse-telon{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  padding:26px;background:rgba(8,8,11,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.esc-acuse{max-width:560px;background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--blue-bright);
  border-radius:16px;padding:24px 26px}
.esc-acuse.ojo{border-left-color:#ffcc80}
.esc-acuse.frio{border-left-color:var(--t3)}
.esc-acuse .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 7px}
.esc-acuse.ojo .kicker{color:#ffcc80}
.esc-acuse.frio .kicker{color:var(--t3)}
.esc-acuse h3{margin:0 0 10px;font-size:22px;line-height:1.2;color:var(--t1)}
.esc-acuse p{margin:0 0 11px;font-size:14.5px;color:var(--t2)}
.esc-acuse .correo{font-family:var(--mono);font-size:13px;color:var(--t1)}
.esc-acuse .botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.esc-oculto{display:none !important}

@media(max-width:900px){
  .esc-tablero{grid-template-columns:1fr;gap:16px}
  .esc-panel{max-height:30vh}
  .esc-consola{font-size:11px}
  .esc-lineas .d,.esc-lineas .quien{display:none}
}
@media(max-width:620px){
  .esc-datos{grid-template-columns:1fr}
  .esc-cab,.esc-cuerpo,.esc-pie{padding-left:18px;padding-right:18px}
  .esc-modal{border-radius:14px}
}