:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background-color:#151719;background-image:radial-gradient(circle at 38px 32px,#34383b 0 7px,#101214 8px 10px,transparent 11px),linear-gradient(135deg,#24282a 25%,transparent 25%) 0 0/76px 64px,linear-gradient(225deg,#202426 25%,transparent 25%) 0 0/76px 64px,linear-gradient(315deg,#151719 25%,transparent 25%) 38px 32px/76px 64px,linear-gradient(45deg,#151719 25%,transparent 25%) 38px 32px/76px 64px;color:#fff}.login-screen{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(420px,1.25fr) minmax(420px,.9fr);align-items:center;gap:7vw;padding:5vh 7vw;background:linear-gradient(160deg,transparent 48%,#0004 48% 70%,transparent 70%)}.credentials{align-self:start;padding-top:2vh}.login-logo{display:block;width:min(310px,45vw);height:125px;margin:0 0 7vh 2vw;object-fit:contain;object-position:left center}.credentials h1{margin:30px 0 9vh 2vw;color:#dff300;font-size:50px}.credentials form{display:grid;gap:42px}.credentials label{display:block}.credentials input{width:100%;height:130px;padding:20px 68px;border:5px solid #f4aa35;border-radius:18px;background:#12223bd9;color:#fff;font-size:clamp(30px,3vw,54px);outline:0;box-shadow:inset 0 0 30px #0003}.credentials label:nth-child(2) input{border-color:#a758dc}.credentials input:focus{box-shadow:0 0 0 5px #fff2,inset 0 0 30px #0003}.credentials input::placeholder{color:#fff;opacity:.95}.login-error{min-height:24px;margin:-20px 8px 0;color:#ff8585;font-size:17px}.keypad{display:grid;gap:28px}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.keypad button{min-height:130px;border:0;border-radius:16px;background:linear-gradient(#3da66c,#10482d 55%,#32945c);box-shadow:0 5px 0 #163b29,0 7px 18px #0007;color:#fff;font-size:clamp(44px,5vw,78px);font-weight:700;cursor:pointer;touch-action:manipulation}.keypad button:active{transform:translateY(3px);box-shadow:0 2px 0 #163b29}.keypad .enter-button{min-height:130px;background:linear-gradient(#ffba39,#f18a34);box-shadow:0 5px 0 #9b5921,0 10px 24px #0008;font-size:clamp(34px,4vw,58px);font-weight:400}.keypad button:focus-visible{outline:4px solid #fff;outline-offset:3px}.keypad button:disabled{opacity:.65;cursor:wait}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.login-screen{grid-template-columns:1fr;gap:24px;padding:22px}.credentials{padding:0}.login-logo{width:min(240px,70vw);height:76px;margin:0 auto 18px}.credentials h1{text-align:center;margin:14px 0 24px;font-size:38px}.credentials form{gap:14px}.credentials input{height:68px;padding:12px 22px;border-width:3px;border-radius:12px;font-size:27px}.login-error{margin:0;min-height:20px}.keypad{width:min(520px,100%);margin:auto;gap:15px}.keypad-grid{gap:11px}.keypad button,.keypad .enter-button{min-height:68px;border-radius:11px;font-size:34px}.keypad .enter-button{font-size:28px}}@media(max-width:480px){.login-screen{align-content:start;gap:17px;padding:16px 14px 22px}.login-logo{width:min(190px,62vw);height:58px;margin-bottom:10px}.credentials h1{margin:8px 0 18px;font-size:28px}.credentials input{height:58px;padding:10px 16px;border-width:3px;font-size:22px}.credentials form{gap:11px}.login-error{font-size:13px}.keypad{gap:12px}.keypad-grid{gap:9px}.keypad button,.keypad .enter-button{min-height:56px;font-size:29px}.keypad .enter-button{font-size:24px}}@media(max-height:600px) and (orientation:landscape){.login-screen{grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr);gap:24px;padding:12px 22px}.login-logo{width:150px;height:45px;margin:0 0 8px}.credentials h1{display:none}.credentials form{gap:10px}.credentials input{height:52px;padding:8px 16px;border-width:3px;font-size:22px}.login-error{margin:0;font-size:12px}.keypad{gap:9px}.keypad-grid{gap:7px}.keypad button,.keypad .enter-button{min-height:43px;border-radius:8px;font-size:24px}.keypad .enter-button{font-size:21px}}

@media(min-width:901px){
  body{background-color:#17191a;background-image:radial-gradient(circle at 46px 43px,#3d3f40 0 5px,#090a0b 6px 9px,transparent 10px),linear-gradient(135deg,transparent 46%,#0b0c0d 47% 52%,transparent 53%) 0 0/92px 86px,linear-gradient(45deg,#252829 25%,transparent 25%) 0 0/92px 86px,linear-gradient(315deg,#111314 25%,transparent 25%) 46px 43px/92px 86px,linear-gradient(225deg,#202324 25%,transparent 25%) 46px 43px/92px 86px}
  .login-screen{width:100%;margin:0;grid-template-columns:minmax(420px,46%) minmax(380px,35%);justify-content:space-between;gap:0;padding:5vh 6vw;background:linear-gradient(160deg,transparent 47%,#0005 47% 70%,transparent 70%)}
  .credentials{align-self:start;padding-top:2vh}
  .login-logo{width:min(320px,45%);height:126px;margin:0 0 clamp(48px,7vh,78px) 2vw}
  .credentials form{gap:clamp(38px,7vh,72px)}
  .credentials input{height:clamp(94px,13.7vh,132px);padding:18px clamp(28px,4vw,70px);border-width:5px;border-radius:18px;font-size:clamp(34px,3vw,54px)}
  .login-error{min-height:22px;margin:-22px 8px 0;font-size:16px}
  .keypad{width:100%;gap:clamp(17px,2.8vh,28px)}
  .keypad-grid{gap:clamp(17px,2.8vh,28px)}
  .keypad button{min-height:clamp(92px,14vh,134px);border-radius:16px;font-size:clamp(45px,4.6vw,74px)}
  .keypad .enter-button{min-height:clamp(96px,14.3vh,138px);font-size:clamp(34px,3.5vw,58px)}
}

@media(min-width:901px) and (max-height:720px){
  .login-screen{padding-top:3vh;padding-bottom:3vh}.credentials{padding-top:0}.login-logo{height:80px;margin-bottom:24px}.credentials form{gap:20px}.credentials input{height:72px;border-width:3px;font-size:30px}.keypad,.keypad-grid{gap:10px}.keypad button{min-height:65px;font-size:32px}.keypad .enter-button{min-height:68px;font-size:28px}
}

/* En teléfonos se usa el teclado numérico nativo del dispositivo. */
@media(max-width:760px){
  .login-screen{display:flex;min-height:100dvh;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:20px clamp(20px,7vw,31px) 36px;background:linear-gradient(160deg,transparent 48%,#0004 48% 70%,transparent 70%)}
  .credentials{width:100%;padding:0}.login-logo{width:min(190px,50vw);height:64px;margin:0 auto 17px;object-position:center}
  .credentials form{display:grid;gap:26px}.credentials input{height:78px;padding:12px 20px;border-width:3px;border-radius:11px;font-size:27px;text-align:center}
  .login-error{min-height:0;margin:-10px 4px 0;font-size:13px}.login-error:empty{display:none}
  .keypad{display:block;width:100%;margin:24px 0 0}.keypad-grid{display:none}
  .keypad .enter-button{display:block;width:100%;min-height:80px;border-radius:11px;font-size:34px}
}

@media(max-width:390px){
  .login-screen{padding-right:20px;padding-left:20px}.login-logo{height:58px;margin-bottom:14px}.credentials form{gap:20px}.credentials input{height:68px;font-size:23px}.keypad{margin-top:20px}.keypad .enter-button{min-height:70px;font-size:30px}
}