:root{color-scheme:dark;--night:#07110e;--panel:#0c1915;--line:#263a33;--mint:#8effc6;--soft:#b8cbc3;--white:#f5fbf8;--danger:#ff8779}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.pin-login-page{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 50% 28%,#143a2c 0,#0a1c16 25%,var(--night) 62%);color:var(--white)}
.pin-login-page:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#b9ffdc08 1px,transparent 1px),linear-gradient(90deg,#b9ffdc08 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#0008,transparent 78%)}
.ambient{position:fixed;width:38vw;height:38vw;border-radius:50%;filter:blur(90px);opacity:.14;pointer-events:none}
.ambient-one{left:-18vw;top:12vh;background:#35ff9e}
.ambient-two{right:-20vw;bottom:-14vw;background:#2a8e68}
.pin-shell{position:relative;z-index:1;width:min(1180px,100%);min-height:100vh;margin:auto;padding:32px 42px;display:flex;flex-direction:column}
.pin-brand{display:flex;align-items:center;gap:12px}
.pin-brand>span{width:44px;height:44px;display:grid;place-items:center;border:1px solid #8effc655;border-radius:14px;color:var(--mint);font:24px Georgia,serif;box-shadow:inset 0 0 24px #8effc611}
.pin-brand b{display:block;letter-spacing:.25em;font-size:13px}
.pin-brand small{display:block;margin-top:4px;color:#718d81;font-size:8px;letter-spacing:.22em}
.access-stage{flex:1;display:grid;grid-template-columns:1fr minmax(280px,420px) 1fr;align-items:center;gap:36px;padding:35px 0}
.access-copy p,.admin-access>p{margin:0 0 14px;color:var(--mint);font-size:10px;font-weight:900;letter-spacing:.24em}
.access-copy h1,.admin-access h1{margin:0;font-size:clamp(42px,5vw,70px);line-height:.94;letter-spacing:-.055em}
.access-copy h1 em{color:var(--mint);font-style:normal}
.access-copy>span,.admin-access>span{display:block;max-width:390px;margin-top:24px;color:#8ca49a;line-height:1.65;font-size:14px}
.access-core{position:absolute;left:50%;top:40%;width:280px;height:280px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.core-frame{position:relative;width:126px;height:126px;border:1px solid #8effc666;border-radius:38px;display:grid;place-items:center;background:linear-gradient(145deg,#153b2d,#07110e);box-shadow:0 0 32px #55ffa533,0 0 100px #55ffa51a,inset 0 0 45px #55ffa51f;animation:core-float 3.5s ease-in-out infinite}
.core-frame:before,.core-frame:after{content:"";position:absolute;border:1px solid #8effc633;border-radius:48px;inset:-18px;animation:ring-pulse 2.5s ease-out infinite}
.core-frame:after{inset:-38px;animation-delay:1.25s}
.core-frame b{font:42px Georgia,serif;color:var(--mint);text-shadow:0 0 26px #8effc6}
.core-frame span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px #8effc6}
.core-frame span:first-child{left:13px;top:13px}
.core-frame span:nth-child(2){right:13px;bottom:13px}
.orbit{position:absolute;border:1px solid #8effc629;border-radius:50%;animation:spin 9s linear infinite}
.orbit:after{content:"";position:absolute;top:50%;left:-4px;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px #8effc6}
.orbit-a{inset:28px}
.orbit-b{inset:8px;animation-duration:13s;animation-direction:reverse;transform:rotate(35deg)}
.orbit-c{inset:-12px;animation-duration:17s;transform:rotate(68deg)}
.pin-panel{grid-column:3;width:min(330px,100%);justify-self:end;padding:26px;border:1px solid var(--line);border-radius:28px;background:#091510cc;backdrop-filter:blur(24px);box-shadow:0 30px 80px #0008}
.pin-panel>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pin-status{text-align:center}
.pin-status small{color:#779186;font-size:9px;font-weight:900;letter-spacing:.22em}
.pin-dots{display:flex;justify-content:center;gap:16px;margin:21px 0}
.pin-dots i{width:14px;height:14px;border:1px solid #60756c;border-radius:50%;transition:.22s ease}
.pin-dots i.filled{border-color:var(--mint);background:var(--mint);box-shadow:0 0 18px #8effc688;transform:scale(1.12)}
.pin-status p{min-height:32px;margin:0;color:#6f887e;font-size:11px;line-height:1.4}
.pin-status p.error{color:var(--danger)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.pin-keypad button{height:59px;border:1px solid #2a4138;border-radius:17px;background:linear-gradient(145deg,#14251f,#0b1713);color:var(--white);font-size:19px;cursor:pointer;transition:.14s ease;box-shadow:inset 0 1px #ffffff08}
.pin-keypad button:hover{border-color:#62b88f;transform:translateY(-2px);background:#173328}
.pin-keypad button:active{transform:scale(.94);background:#245340}
.pin-keypad .blank{visibility:hidden}
.pin-panel.checking .pin-dots i{animation:dot-scan .55s ease-in-out infinite alternate}
.pin-panel.success{border-color:var(--mint);box-shadow:0 0 70px #51ffa42b}
.pin-panel.success .pin-dots i{background:var(--mint);border-color:var(--mint);box-shadow:0 0 24px #8effc6}
.pin-panel.error{animation:shake .45s ease}
.pin-panel.error .pin-dots i{border-color:var(--danger)}
.access-granted .core-frame{animation:grant .8s ease forwards}
.login-footer{display:flex;justify-content:space-between;align-items:center;color:#637b71;font-size:9px;font-weight:800;letter-spacing:.14em}
.login-footer span{display:flex;align-items:center;gap:8px}
.login-footer i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.login-footer a,.back-link{color:#8da79b;text-decoration:none}
.admin-access{width:min(500px,100%);margin:auto;padding:38px;border:1px solid var(--line);border-radius:28px;background:#0a1713dd;box-shadow:0 30px 90px #0008}
.admin-access h1{font-size:48px}
.admin-access form{display:grid;gap:15px;margin-top:30px}
.admin-access label{display:grid;gap:7px;color:#8ca49a;font-size:10px;font-weight:800;letter-spacing:.08em}
.admin-access input{width:100%;padding:15px;border:1px solid #2a4138;border-radius:12px;background:#07110e;color:#fff}
.admin-access button{padding:16px;border:0;border-radius:12px;background:var(--mint);color:#092017;font-weight:900}
.back-link{display:inline-block;margin-bottom:34px}
.admin-error{margin-top:20px;padding:12px;border:1px solid #ff877955;border-radius:10px;color:var(--danger);background:#ff87790c}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes core-float{50%{transform:translateY(-8px);box-shadow:0 0 45px #55ffa544,0 0 120px #55ffa522,inset 0 0 55px #55ffa52a}
}
@keyframes ring-pulse{0%{opacity:.85;transform:scale(.82)}
100%{opacity:0;transform:scale(1.22)}
}
@keyframes dot-scan{to{transform:translateY(-4px);background:var(--mint)}
}
@keyframes shake{20%,60%{transform:translateX(-9px)}
40%,80%{transform:translateX(9px)}
}
@keyframes grant{45%{transform:scale(1.18);box-shadow:0 0 120px #8effc688}
100%{transform:scale(18);opacity:0}
}
@media(max-width:920px){.access-stage{grid-template-columns:1fr;justify-items:center;padding-top:30px}
.access-copy{text-align:center}
.access-copy>span{margin:18px auto}
.access-core{position:relative;left:auto;top:auto;transform:none;width:230px;height:230px}
.pin-panel{grid-column:auto;justify-self:center}
.pin-shell{padding:24px}
.login-footer{margin-top:25px}
}
@media(max-width:520px){.pin-shell{padding:20px 16px}
.access-stage{gap:12px}
.access-copy h1{font-size:42px}
.access-copy>span{font-size:12px}
.access-core{height:185px}
.core-frame{width:104px;height:104px;border-radius:30px}
.pin-panel{padding:20px;border-radius:23px}
.pin-keypad button{height:55px}
.admin-access{padding:25px}
.admin-access h1{font-size:38px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Acceso por PIN: cuatro piezas que se integran y confirman la entrada. */
.pin-panel{position:relative;overflow:hidden;min-height:452px;transition:border-color .35s ease,box-shadow .35s ease,background .35s ease}
.pin-dots{height:54px;align-items:center}
.pin-dots i{position:relative;width:48px;height:52px;flex:0 0 48px;border:1px solid #60756c;border-radius:15px;background:linear-gradient(145deg,#14221d,#0b1512);box-shadow:inset 0 1px #ffffff0a;transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease}
.pin-dots i:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:transparent;transform:translate(-50%,-50%) scale(.4);transition:.22s ease}
.pin-dots i.filled{border-color:#9ce3c3;background:linear-gradient(145deg,#1d352b,#101e19);box-shadow:0 0 0 3px #bbf8dc12,0 0 20px #8effc625;transform:translateY(-2px)}
.pin-dots i.filled:after{background:var(--mint);box-shadow:0 0 18px #8effc6;transform:translate(-50%,-50%) scale(1)}
.access-celebration{position:absolute;inset:72px 20px 24px;display:grid;align-content:center;justify-items:center;text-align:center;opacity:0;visibility:hidden;pointer-events:none;z-index:5}
.access-celebration strong{max-width:270px;margin-top:22px;color:var(--mint);font-size:clamp(20px,2.3vw,27px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.access-celebration>p{margin:11px 0 0;color:#a5bbb2;font-size:13px}
.success-symbol{position:relative;width:106px;height:106px;display:grid;place-items:center;border:1px solid #74ffbc73;border-radius:31px;background:linear-gradient(145deg,#163e2f,#0a1914);box-shadow:0 0 0 18px #70ffb90a,0 0 0 36px #70ffb908,0 0 55px #51ffa43b,inset 0 0 35px #54ffa51c}
.success-symbol:before,.success-symbol:after{content:"";position:absolute;inset:-17px;border:1px solid #79ffc02e;border-radius:39px;animation:success-ring 1.7s ease-out infinite}
.success-symbol:after{inset:-34px;border-radius:48px;animation-delay:.35s}
.success-symbol span{position:relative;z-index:2;width:49px;height:49px;display:grid;place-items:center;border:1px solid var(--mint);border-radius:15px;color:var(--mint);font-size:25px;font-weight:900;background:#0c2119;box-shadow:0 0 24px #6affb85c}
.success-symbol i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #8effc6;animation:particle-drift 1.55s ease-in-out infinite alternate}
.success-symbol i:nth-of-type(1){left:-29px;top:10px}.success-symbol i:nth-of-type(2){right:-24px;top:22px;animation-delay:.15s}.success-symbol i:nth-of-type(3){right:-39px;bottom:23px;animation-delay:.3s}.success-symbol i:nth-of-type(4){left:-35px;bottom:15px;animation-delay:.45s}.success-symbol i:nth-of-type(5){left:20px;top:-36px;animation-delay:.6s}.success-symbol i:nth-of-type(6){right:14px;bottom:-34px;animation-delay:.75s}.success-symbol i:nth-of-type(7){left:-8px;top:41px;animation-delay:.2s}.success-symbol i:nth-of-type(8){right:-7px;bottom:46px;animation-delay:.5s}.success-symbol i:nth-of-type(9){left:47px;top:-23px;animation-delay:.65s}.success-symbol i:nth-of-type(10){right:42px;bottom:-21px;animation-delay:.35s}
.pin-panel.success{border-color:#71f9b4;background:#081711f2;box-shadow:0 0 0 1px #71f9b430,0 0 80px #51ffa433;min-height:452px}
.pin-panel.success .pin-status small,.pin-panel.success .pin-status p{animation:fade-away .28s ease both}
.pin-panel.success .pin-keypad{animation:fade-away .34s ease .08s both;pointer-events:none}
.pin-panel.success .pin-dots{position:absolute;left:50%;top:128px;width:182px;height:182px;margin:0;transform:translateX(-50%);z-index:6}
.pin-panel.success .pin-dots i{position:absolute;left:67px;top:65px;margin:0;--start:0deg;--finish:255deg;animation:slot-orbit 1.12s cubic-bezier(.42,0,.18,1) both}
.pin-panel.success .pin-dots i:nth-child(2){--start:90deg;--finish:345deg;animation-delay:.04s}.pin-panel.success .pin-dots i:nth-child(3){--start:180deg;--finish:435deg;animation-delay:.08s}.pin-panel.success .pin-dots i:nth-child(4){--start:270deg;--finish:525deg;animation-delay:.12s}
.pin-panel.success .access-celebration{visibility:visible;animation:celebration-in 1.65s cubic-bezier(.2,.75,.2,1) .88s both}
.access-granted .access-copy,.access-granted .access-core,.access-granted .pin-brand,.access-granted .login-footer{transition:opacity .55s ease,filter .55s ease;opacity:.24;filter:blur(2px)}
.access-granted:after{content:"";position:fixed;left:50%;top:50%;width:10px;height:10px;border-radius:50%;pointer-events:none;background:#71ffb7;box-shadow:0 0 80px 38px #71ffb71f;animation:page-glow 2.5s ease-out both}
@keyframes slot-orbit{0%{opacity:1;transform:rotate(var(--start)) translateX(0) scale(1)}42%{transform:rotate(var(--start)) translateX(67px) scale(.93)}76%{opacity:1;transform:rotate(var(--finish)) translateX(56px) scale(.78);border-color:var(--mint);box-shadow:0 0 24px #8effc65c}100%{opacity:0;transform:rotate(var(--finish)) translateX(0) scale(.15)}}
@keyframes celebration-in{0%{opacity:0;transform:scale(.58)}22%{opacity:0;transform:scale(.7)}48%{opacity:1;transform:scale(1.07)}68%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes fade-away{to{opacity:0;transform:translateY(-8px);visibility:hidden}}
@keyframes success-ring{0%{opacity:.8;transform:scale(.82)}100%{opacity:0;transform:scale(1.2)}}
@keyframes particle-drift{to{opacity:.3;transform:translate(5px,-7px) scale(.55)}}
@keyframes page-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(38)}}
@media(max-width:520px){.pin-panel{min-height:420px}.pin-panel.success{min-height:420px}.pin-dots{gap:11px}.pin-dots i{width:43px;height:47px;flex-basis:43px}.pin-panel.success .pin-dots{top:116px}.access-celebration{inset:58px 12px 18px}.success-symbol{width:92px;height:92px;border-radius:27px}.access-celebration strong{font-size:22px}}
html,body{touch-action:manipulation}