/* Ingreso y registro del personal — misma estética que el sitio (web.css) */
@font-face{font-family:"Big Shoulders";src:url(../assets/fonts/bigshoulders-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Boldonse";src:url(../assets/fonts/boldonse.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../assets/fonts/instrumentsans-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../assets/fonts/instrumentsans-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../assets/fonts/jetbrainsmono-regular.woff) format("woff");font-weight:400;font-display:swap}

:root{
  --paper:#F3EDE1; --ink:#1D150D; --ink-2:#3B2C1C; --muted:rgb(29 21 13 / .58); --line:#D9CEBA;
  --soil:#17110B; --cream:#F7F1E3; --cream-muted:rgb(247 241 227 / .7); --cream-faint:rgb(247 241 227 / .42);
  --sun:#F6B52A; --sun-hi:#FBD24A; --sun-deep:#E5891A; --leaf:#4E8A2A; --danger:#B42318;
  --f-display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --f-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,0,0,1); --ease-plate:cubic-bezier(.33,0,0,1);
  --spring:cubic-bezier(.2,.9,.25,1.05); --spring-dur:900ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sun-deep);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh;min-height:100svh}
.auth>*{min-width:0}

/* ---- Lado del video ---- */
.side{position:relative;overflow:hidden;background:var(--soil);color:var(--cream);display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:max(28px,env(safe-area-inset-top)) clamp(24px,3vw,44px) 32px max(clamp(24px,3vw,44px),env(safe-area-inset-left));isolation:isolate}
.side-media{position:absolute;inset:0;z-index:-2;background:#2a1c10 center/cover no-repeat}
.side-media video{width:100%;height:100%;object-fit:cover;animation:sideIn 2.4s var(--ease) both}
@keyframes sideIn{from{transform:scale(1.12);filter:brightness(.4)}to{transform:none;filter:none}}
.side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(to bottom,rgb(14 10 6 / .62) 0%,rgb(14 10 6 / 0) 26%),
  linear-gradient(to top,rgb(14 10 6 / .86) 0%,rgb(14 10 6 / .25) 45%,rgb(14 10 6 / 0) 70%)}
.side-logo img{height:38px;width:auto}
.side-copy{display:flex;flex-direction:column;gap:18px;max-width:560px}
.side h1{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(56px,7vw,112px);line-height:.88;color:var(--sun);display:flex;flex-direction:column}
.side h1 em{font-style:normal;color:var(--cream)}
.side-copy p{font-size:clamp(16px,1.3vw,19px);color:var(--cream-muted);max-width:38ch}
.side-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;line-height:1.45}
.side-foot .mono span{color:var(--cream-faint)}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side .eyebrow{color:var(--cream-muted)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgb(246 181 42 / .2)}

/* ---- Lado del formulario ---- */
.form-col{position:relative;display:flex;align-items:center;justify-content:center;padding:48px max(24px,env(safe-area-inset-right)) 48px max(24px,env(safe-area-inset-left));overflow:hidden;isolation:isolate}
.contours{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.card{width:100%;max-width:430px;display:flex;flex-direction:column;gap:24px}
.card.enter>*{animation:cardIn 800ms var(--ease) both;animation-delay:calc(var(--k,0) * 60ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}}
.card h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(46px,4.6vw,68px);line-height:.9;color:var(--ink)}
.card h2 em{font-style:normal;color:var(--sun-deep)}
.card .sub{color:var(--ink-2);font-size:15.5px;max-width:40ch}
.fields{display:flex;flex-direction:column;gap:20px}
.field{position:relative;display:flex;flex-direction:column;gap:4px}
.field label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:18px;padding:10px 0 12px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);outline:none;width:100%}
.field input::placeholder{color:rgb(29 21 13 / .32)}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--ease-plate)}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label{color:var(--ink)}
.pw{position:relative}
.pw input{padding-right:80px}
.pw button{position:absolute;right:0;bottom:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:6px 0 6px 10px}
.pw button:hover{color:var(--sun-deep)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.link{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background-image:linear-gradient(var(--sun-deep),var(--sun-deep));background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:3px;transition:color 150ms var(--ease),background-size 300ms var(--ease)}
.link:hover{color:var(--sun-deep)}

.btn-chamfer{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;height:58px;padding:0 24px;color:var(--sun);font-size:15px;letter-spacing:.07em;text-transform:uppercase;line-height:.9;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.btn-chamfer::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--soil)}
.btn-chamfer .flood{position:absolute;inset:0;z-index:-1;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease-plate)}
.btn-chamfer .arr{width:14px;height:11px;transition:transform 160ms var(--ease)}
.btn-chamfer .lbl,.btn-chamfer .arr{transition:color 280ms var(--ease),transform 160ms var(--ease)}
.btn-chamfer:hover .flood,.btn-chamfer:focus-visible .flood{transform:scaleX(1)}
.btn-chamfer:hover .lbl,.btn-chamfer:hover .arr{color:var(--soil)}
.btn-chamfer:hover .arr{transform:translateX(4px)}
.btn-chamfer[disabled]{cursor:progress}
.btn-chamfer[disabled] .flood{transform:scaleX(1);animation:busy 1.2s var(--ease) infinite}
.btn-chamfer[disabled] .lbl,.btn-chamfer[disabled] .arr{color:var(--soil)}
@keyframes busy{0%{transform-origin:left;transform:scaleX(0)}50%{transform-origin:left;transform:scaleX(1)}50.01%{transform-origin:right}100%{transform-origin:right;transform:scaleX(0)}}
.btn-chamfer.sun::before{background:var(--sun)}
.btn-chamfer.sun{color:var(--soil)}
.btn-chamfer.sun .flood{background:var(--soil)}
.btn-chamfer.sun:hover .lbl,.btn-chamfer.sun:hover .arr{color:var(--sun)}

.alert{padding:12px 14px;font-size:14.5px;line-height:1.45;border-left:3px solid var(--danger);background:rgb(180 35 24 / .07);animation:cardIn 500ms var(--ease) both}
.alert.ok{border-left-color:var(--leaf);background:rgb(78 138 42 / .09)}
.demo{border:1px dashed var(--line);padding:16px 18px;font-size:14.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:12px}
.demo b{color:var(--ink)}
.back{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transition:color 150ms}
.back:hover{color:var(--ink)}

/* Revelado de palabras */
[data-split]{display:flex;flex-wrap:wrap;column-gap:.24em}
.u{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity 700ms var(--ease) var(--d,0ms),transform var(--spring-dur) var(--spring) var(--d,0ms)}
.in .u{opacity:1;transform:none}

@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .side{min-height:48svh;gap:24px}
  .side h1{font-size:clamp(48px,14vw,72px)}
  .side-foot{display:none}
  .form-col{align-items:flex-start;padding-top:40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms!important;transition-duration:1ms!important}
}