/* ═══════════════════════════════════════════════════════════
   ENAUTO® Ventas — hereda el sistema de diseño de enauto.com.gt
   Paleta: #191917 #FF495C #256EFF #19F490 #FCFCFC
   Se usa en la pantalla de PIN, el 403 y el chrome del dashboard.
═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Morton';src:url('/assets/fonts/Morton-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'Morton';src:url('/assets/fonts/Morton-ExtraBold.otf') format('opentype');font-weight:800;font-display:swap}
@font-face{font-family:'Morton';src:url('/assets/fonts/Morton-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Morton';src:url('/assets/fonts/Morton-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Morton';src:url('/assets/fonts/Morton-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Karla';src:url('/assets/fonts/Karla-VariableFont_wght.ttf') format('truetype');font-display:swap}

:root{
  --black:#191917; --red:#FF495C; --blue:#256EFF;
  --green:#19F490; --white:#FCFCFC; --gray:#2e2e2b; --gray2:#252523;
  --muted:#8a8a85; --border:rgba(255,255,255,.08);
}

.vx-reset *,.vx-reset *::before,.vx-reset *::after{box-sizing:border-box;margin:0;padding:0}
.vx-page{
  font-family:'Karla',system-ui,sans-serif;
  background:var(--black); color:var(--white);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.vx-page::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(37,110,255,.13), transparent 62%),
    radial-gradient(560px 400px at 92% 8%, rgba(255,73,92,.08), transparent 60%);
}
.vx-wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:56px 22px;text-align:center}
.vx-logo{height:40px;width:auto;margin:0 auto 28px}
.vx-eyebrow{font-family:'Morton',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:11px}
.vx-wrap h1{font-family:'Morton',sans-serif;font-weight:900;
  font-size:clamp(24px,4.4vw,38px);line-height:1.06;letter-spacing:-.02em;text-transform:uppercase}
.vx-wrap h1 .accent{color:var(--blue)}
.vx-wrap p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(252,252,252,.55);max-width:440px}
.vx-line{width:48px;height:2.5px;background:linear-gradient(90deg,var(--blue),var(--red));margin:20px auto 0}

.vx-card{
  width:100%;max-width:392px;margin-top:34px;background:var(--gray2);
  border:1px solid var(--border);border-top:2px solid var(--red);
  border-radius:10px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.45);text-align:left;
}
.vx-card h3{font-family:'Morton',sans-serif;font-weight:900;font-size:18px;text-transform:uppercase;letter-spacing:-.01em}
.vx-card .who{margin-top:8px;font-size:13px;color:rgba(252,252,252,.6)}
.vx-card .who b{color:var(--white)}

.pin-row{display:flex;gap:9px;margin:22px 0 4px;justify-content:space-between}
.pin-box{
  width:100%;height:56px;text-align:center;
  font-family:'Morton',sans-serif;font-size:23px;font-weight:800;color:var(--white);
  background:rgba(0,0,0,.28);border:1.5px solid rgba(255,255,255,.14);
  border-radius:7px;transition:border-color .18s,background .18s;
  -webkit-text-security:disc;text-security:disc;
}
.pin-box:focus{outline:none;border-color:var(--blue);background:rgba(37,110,255,.07)}
.pin-box.err{border-color:var(--red);animation:vxshake .32s}
@keyframes vxshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.vx-msg{min-height:19px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--red)}
.vx-msg.ok{color:var(--green)}
.vx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-size:13px;font-weight:700;letter-spacing:.05em;
  padding:13px 22px;border-radius:5px;border:none;cursor:pointer;transition:all .22s;
  background:var(--blue);color:var(--white);margin-top:16px;font-family:'Karla',sans-serif;
}
.vx-btn:hover{background:#1a5de8;box-shadow:0 0 18px rgba(37,110,255,.35)}
.vx-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.vx-link{display:inline-block;margin-top:20px;font-size:12.5px;color:var(--muted);border-bottom:1px solid transparent}
.vx-link:hover{color:var(--white);border-bottom-color:var(--muted)}
.vx-note{margin-top:16px;font-size:11.5px;line-height:1.55;color:var(--muted)}