@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;--color-primario:#1457a8;--color-primario-hover:#0f4689;--color-primario-suave:#e7f0fb;
  --color-acento:#23afcf;--color-acento-suave:#e3f6fa;--color-exito:#1e9e62;--color-exito-suave:#e4f5ec;
  --color-aviso:#e8962e;--color-aviso-suave:#fdf1e2;--color-error:#d64545;--color-error-suave:#fbe8e8;
  --color-proceso:#7357d6;--color-proceso-suave:#efebfb;--fondo-app:#f3f6fa;--fondo-lateral:#eef2f7;
  --fondo-columna:#ebeff5;--superficie:#fff;--borde:#dde3ec;--texto:#1b2433;--texto-secundario:#5b6677;
  --texto-tenue:#657186;--radio-sm:6px;--radio-md:10px;--radio-lg:14px;
  --sombra-tarjeta:0 1px 2px rgba(20,40,80,.06),0 1px 3px rgba(20,40,80,.05);
  --sombra-flotante:0 8px 24px rgba(20,40,80,.12);
  --tinta-azul:#1457a8;--tinta-exito:#14653e;--tinta-aviso:#79480b;--tinta-error:#a0272f;--sobre-primario:#fff;
}
[data-tema="oscuro"]{
  color-scheme:dark;--color-primario:#1457a8;--color-primario-hover:#0f4689;--color-primario-suave:#1b3556;
  --color-acento:#5ecfe8;--color-acento-suave:#193b49;--color-exito-suave:#163a2d;--color-aviso-suave:#432f19;
  --color-error-suave:#43252c;--color-proceso-suave:#31284f;--fondo-app:#101722;--fondo-lateral:#141e2b;
  --fondo-columna:#1d293a;--superficie:#192434;--borde:#3a4c63;--texto:#f3f6fc;--texto-secundario:#bdc9d9;
  --texto-tenue:#acbad1;--tinta-azul:#9fcaff;--tinta-exito:#a0e8bf;--tinta-aviso:#ffd291;--tinta-error:#ffb1b7;
  --sombra-tarjeta:0 1px 2px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.15);
  --sombra-flotante:0 8px 24px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo-app);color:var(--texto);font:400 16px/1.5 Inter,"Segoe UI",system-ui,sans-serif}
button,input{font:inherit} a{color:var(--tinta-azul);text-underline-offset:.2em}
::selection{background:var(--color-primario-suave);color:var(--texto)}
:focus-visible{outline:3px solid var(--tinta-azul);outline-offset:3px}
[hidden]{display:none!important}
.shell{max-width:480px;margin:auto;min-height:100dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-actions{display:flex;align-items:center;gap:8px}
.top-actions .icon-button{width:48px;height:48px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--texto);font-weight:700;line-height:1.25;min-height:48px}
.brand img{border-radius:var(--radio-lg)} .product{display:block;color:var(--texto-secundario);font-size:14px;font-weight:500}
main{flex:1;display:flex;flex-direction:column;min-width:0}
h1,h2,p{margin:0} h1{font-size:24px;line-height:1.22;font-weight:700;letter-spacing:-.025em;text-wrap:balance} h2{font-size:18px}
.intro,.muted{color:var(--texto-secundario)} .intro{margin-top:8px}
.card{border-radius:var(--radio-lg);background:var(--superficie);box-shadow:var(--sombra-tarjeta);padding:24px}
.account{margin-block:auto;display:grid;gap:24px}.stack{display:grid;gap:16px}.field{display:grid;gap:8px;color:var(--texto-secundario);font-size:14px;font-weight:600}
input:not([type=checkbox]){min-height:48px;width:100%;font-size:16px;padding:8px 12px;border:1px solid var(--borde);border-radius:var(--radio-md);background:var(--superficie);color:var(--texto)}
.field select{min-height:48px;width:100%;font:400 16px Inter,"Segoe UI",sans-serif;padding:8px 12px;border:1px solid var(--borde);border-radius:var(--radio-md);background:var(--superficie);color:var(--texto)}
.password-control{position:relative}
.password-control input{padding-right:56px}
.password-eye{position:absolute;right:0;top:0;width:48px;height:48px;border-color:transparent;background:transparent}
.button,.icon-button{display:inline-flex;min-height:48px;min-width:48px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--borde);border-radius:var(--radio-md);background:var(--superficie);color:var(--texto);padding:8px 16px;font-weight:600;text-decoration:none;cursor:pointer}
.icon-button{padding:12px}.button.primary{background:var(--color-primario);border-color:var(--color-primario);color:var(--sobre-primario)}
.button.primary:hover{background:var(--color-primario-hover)}.button:disabled{cursor:default;opacity:.64}
.button.link{border-color:transparent;background:transparent;color:var(--tinta-azul)}
.check{width:100%;min-height:56px;border-radius:14px;font-size:18px}
.button svg,.icon-button svg,.notice svg{width:20px;height:20px;flex:none}.check svg{width:24px;height:24px}
.punch{flex:1;display:flex;flex-direction:column;gap:16px;padding-bottom:88px}
@media(min-width:600px){
  .shell{max-width:512px}
  .punch{flex:0 1 auto;background:var(--superficie);border-radius:var(--radio-lg);box-shadow:var(--sombra-tarjeta);padding:24px}
  .punch .action{position:static;transform:none;width:auto;padding:0;background:none}
}
.hello{display:flex;justify-content:space-between;align-items:start;gap:8px}.hello>div{min-width:0;overflow-wrap:anywhere}
.server-clock{display:grid;gap:8px}
.server-clock time{font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.camera{min-height:300px;position:relative;overflow:hidden;border-radius:var(--radio-lg);background:var(--fondo-columna);display:grid;place-items:center}
.camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-empty{z-index:1;padding:24px;display:grid;justify-items:center;text-align:center;gap:12px}
.camera-empty svg{width:32px;height:32px;color:var(--tinta-azul)}
.location,.notice{border-radius:var(--radio-md);padding:12px;display:flex;align-items:start;gap:8px;background:var(--color-primario-suave);color:var(--tinta-azul)}
.location svg{width:20px;height:20px;flex:none}.ok{background:var(--color-exito-suave);color:var(--tinta-exito)}.warning{background:var(--color-aviso-suave);color:var(--tinta-aviso)}.error{background:var(--color-error-suave);color:var(--tinta-error)}
.action{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--fondo-app)}
.result{position:fixed;inset:0;z-index:5;background:var(--fondo-app);padding:24px;display:grid;place-items:center}
.result article{width:min(100%,390px);display:grid;justify-items:center;text-align:center;gap:16px;padding-block:32px}
.result .button{width:100%}.result time{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.result-progress{width:100%;height:8px;border-radius:var(--radio-sm);overflow:hidden;background:var(--fondo-columna)}
.result-progress span{display:block;width:100%;height:100%;background:var(--tinta-azul);transform-origin:left;animation:result-countdown 5s linear forwards}
@keyframes result-countdown{to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.result-progress span{animation-timing-function:steps(5,end)}}
.symbol{width:72px;height:72px;border-radius:50%;display:grid;place-items:center}.symbol svg{width:32px;height:32px}
.skeleton{min-height:320px;border-radius:var(--radio-lg);background:var(--fondo-columna);margin-block:auto}
.skeleton::before,.skeleton::after{content:"";display:block;border-radius:var(--radio-md);margin:24px;height:48px;background:var(--superficie)}
.privacy-copy{display:grid;gap:12px}.privacy-copy p{color:var(--texto-secundario)}