/* Pantalla de acceso, estilo "Negro": negro total, minimalista tipo Apple.
   Detalles: trazo de luz que sigue el cursor, chispas al escribir y pulso de radar (sonar) al dar clic. */
@property --ent-giro{syntax:"<angle>";inherits:true;initial-value:0deg}
.ent{--e-tinta:#f5f5f7;--e-gris:#a1a1a6;--e-gris2:#86868b;--e-linea:#424245;--e-campo:#0b0b0c;--e-azul:#2997ff;
  --e-sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;isolation:isolate;color-scheme:dark;background:#000;color:var(--e-tinta);font-family:var(--e-sf);-webkit-font-smoothing:antialiased}
.ent-lienzo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.ent-centro{width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:max(40px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ent-caja{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;animation:ent-entra .7s cubic-bezier(.2,.8,.2,1) both}
.ent-candado{width:46px;height:46px;margin-bottom:22px;color:var(--e-tinta)}.ent-candado svg{width:100%;height:100%;display:block}
.ent-caja h1{margin:0;font-size:clamp(28px,6vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.ent-sub{margin:10px 0 0;font-size:17px;line-height:1.47;color:var(--e-gris);letter-spacing:-.01em;text-wrap:balance}
.ent-frm{width:100%;display:grid;gap:16px;margin-top:30px;text-align:left}
.ent-ic{display:block}

/* campos con etiqueta flotante */
.ent-campo{display:grid;gap:6px}
.ent-campo small{font-size:12.5px;color:var(--e-gris2);padding-left:4px}
.ent-f,.ent-grupo{position:relative;border-radius:14px;background:var(--e-campo);box-shadow:0 0 0 1px var(--e-linea);transition:box-shadow .2s}
.ent-f:focus-within{box-shadow:0 0 0 1px var(--e-azul),0 0 0 4px rgba(41,151,255,.18)}
.ent-grupo{box-shadow:none}
.ent-grupo:focus-within{box-shadow:0 0 0 4px rgba(41,151,255,.16)}
/* hilo de luz que recorre el borde */
.ent-grupo::before{content:"";position:absolute;inset:-1px;border-radius:15px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ent-giro),rgba(255,255,255,.12),rgba(255,255,255,.55),rgba(255,255,255,.12) 30%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.4) 80%,rgba(255,255,255,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ent-gira 7s linear infinite}
.ent-grupo:focus-within::before{animation-duration:2.5s;background:conic-gradient(from var(--ent-giro),rgba(41,151,255,.25),#fff,rgba(41,151,255,.25) 30%,rgba(41,151,255,.25) 60%,#9fd0ff 80%,rgba(41,151,255,.25))}
.ent-f,.ent-fila{height:58px}
.ent-fila{position:relative}
.ent-fila+.ent-fila{border-top:1px solid var(--e-linea)}
.ent-f input,.ent-fila input{position:absolute;inset:0;width:100%;box-sizing:border-box;padding:22px 56px 6px 16px;border:0;border-radius:14px;background:transparent;color:var(--e-tinta);font:inherit;font-size:17px;letter-spacing:-.01em}
.ent-f input:focus,.ent-fila input:focus{outline:none}
.ent-f label,.ent-fila label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--e-gris2);pointer-events:none;transition:top .18s,font-size .18s,transform .18s}
.ent-f input:focus+label,.ent-f input:not(:placeholder-shown)+label,.ent-fila input:focus+label,.ent-fila input:not(:placeholder-shown)+label{top:15px;transform:none;font-size:12px}
.ent-f input:-webkit-autofill,.ent-fila input:-webkit-autofill{-webkit-text-fill-color:var(--e-tinta);-webkit-box-shadow:0 0 0 40px var(--e-campo) inset;caret-color:var(--e-tinta)}
.ent-flecha{position:absolute;z-index:2;right:12px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--e-gris2);background:none;color:var(--e-gris);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s,opacity .2s}
.ent-flecha .ent-ic{width:16px;height:16px}
.ent-fila input:not(:placeholder-shown)~.ent-flecha{border-color:var(--e-tinta);color:var(--e-tinta)}
.ent-flecha:hover{background:rgba(255,255,255,.07)}
.ent-flecha:focus-visible{outline:2px solid var(--e-azul);outline-offset:2px}
.ent-flecha.cargando{color:transparent!important;border-color:transparent}.ent-flecha.cargando .ent-ic{opacity:0}
.ent-flecha.cargando::after{content:"";position:absolute;box-sizing:border-box;width:16px;height:16px;left:50%;top:50%;margin:-8px 0 0 -8px;border:2px solid var(--e-tinta);border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite}
.ent-clave{height:0;overflow:hidden;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.ent-grupo:not(.ent-paso2) .ent-clave{border-top-color:transparent}
.ent-grupo.ent-paso2 .ent-clave{height:58px}
.ent-grupo.ent-paso2 .ent-uno .ent-flecha{opacity:0;pointer-events:none;transform:scale(.6)}
.ent-ver{position:absolute;z-index:2;right:10px;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:var(--e-gris);cursor:pointer}
.ent-ver:hover,.ent-ver.on{color:var(--e-tinta);background:rgba(255,255,255,.07)}.ent-ver .ent-ic{width:18px;height:18px}
.ent-rec{display:flex;justify-content:center;gap:8px;align-items:center;font-size:14px;color:var(--e-gris);cursor:pointer}.ent-rec input{width:16px;height:16px;margin:0;accent-color:var(--e-azul)}

/* botones */
.ent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border:0;border-radius:12px;background:#f5f5f7;color:#000;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .15s,transform .12s}
.ent-btn:hover{background:#fff}.ent-btn:active{transform:scale(.99)}
.ent-btn .ent-ic{width:17px;height:17px}
.ent-btn:focus-visible{outline:2px solid var(--e-azul);outline-offset:3px}
.ent-btn.sec{background:#1c1c1e;color:var(--e-tinta);box-shadow:inset 0 0 0 1px var(--e-linea)}.ent-btn.sec:hover{background:#2c2c2e}
.ent-btn:disabled{opacity:.7;cursor:wait}.ent-btn.cargando{color:transparent!important}.ent-btn.cargando .ent-ic{opacity:0}
.ent-btn.cargando::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #000;border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite}
.ent-btn.sec.cargando::after{border-color:var(--e-tinta);border-right-color:transparent}
.ent-dos{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:22px;width:100%}

/* textos y pasos */
.ent-txt{margin:20px 0 0;font-size:15px;line-height:1.55;color:var(--e-tinta);text-align:left;width:100%}
.ent-nota{margin:0;font-size:14px;color:var(--e-gris);text-align:center}
.ent-link{border:0;background:none;padding:0;font:inherit;color:var(--e-azul);cursor:pointer}.ent-link:hover{text-decoration:underline}
.ent-pasos{margin:24px 0 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:10px;text-align:left;width:100%}
.ent-pasos li{counter-increment:p;display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--e-tinta)}
.ent-pasos li::before{content:counter(p);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:#1c1c1e;box-shadow:inset 0 0 0 1px var(--e-linea);color:var(--e-tinta)}
.ent-qr{width:180px;height:180px;margin:20px auto 8px;padding:10px;border-radius:16px;background:#fff}.ent-qr svg{width:100%;height:100%}
.ent-manual{font-size:13.5px;color:var(--e-gris);text-align:center}.ent-manual summary{cursor:pointer;color:var(--e-azul)}
.ent-manual code{display:inline-block;margin-top:6px;padding:6px 10px;border-radius:8px;background:#1c1c1e;border:1px solid var(--e-linea);word-break:break-all;color:var(--e-tinta);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ent-cod{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ent-cod input{width:100%;min-width:0;box-sizing:border-box;height:58px;border:0;border-radius:12px;background:var(--e-campo);box-shadow:0 0 0 1px var(--e-linea);color:var(--e-tinta);text-align:center;font:inherit;font-size:26px;font-weight:600;transition:box-shadow .15s,transform .15s}
.ent-cod input:nth-child(3){margin-right:8px}
.ent-cod input:focus{outline:none;box-shadow:0 0 0 1px var(--e-azul),0 0 0 4px rgba(41,151,255,.2);transform:translateY(-2px)}
.ent-resp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;width:100%}
.ent-resp code{padding:10px;border-radius:10px;text-align:center;font-size:15px;letter-spacing:.06em;background:#0b0b0c;border:1px dashed var(--e-linea);color:var(--e-tinta);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ent-seg{display:flex;align-items:center;gap:6px;justify-content:center;margin:30px 0 0;font-size:12px;color:var(--e-gris2)}.ent-seg .ent-ic{width:12px;height:12px}
.ent-mal{animation:ent-tiembla .4s}
@keyframes ent-gira{to{--ent-giro:360deg}}
@keyframes ent-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ent-tiembla{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
@media (max-width:480px){.ent-sub{font-size:16px}.ent-cod{gap:6px}.ent-cod input{height:52px;font-size:22px}.ent-cod input:nth-child(3){margin-right:4px}}
@media (prefers-reduced-motion:reduce){.ent-caja,.ent-grupo::before{animation:none}.ent-clave{transition:none}}