nav img { display:block; width:28px; height:28px; object-fit:contain; }

.login-logo { display:block; width:116px; height:116px; margin:-2px auto 13px; filter:drop-shadow(0 9px 17px rgba(3,15,27,.4)); }
.theme-logo .radar-beam { transform-box:view-box; transform-origin:60px 60px; animation:radar-sweep 3.2s linear infinite; }
@keyframes radar-sweep { to { transform:rotate(360deg); } }

.login-overlay { background:linear-gradient(180deg,rgba(23,42,60,.25),rgba(15,34,53,.46)); backdrop-filter:blur(10px) saturate(.85); -webkit-backdrop-filter:blur(10px) saturate(.85); }
.login-card {
    width: min(100%, 380px);
    min-height: 318px;
    padding: 22px 24px 32px;
    border: 1px solid rgba(92, 121, 150, .18);
    border-radius: 40px;
    background: linear-gradient(145deg, rgb(30 48 68 / 86%), rgb(27 43 61 / 49%));
    box-shadow: 0 18px 60px rgba(7, 18, 31, .38), inset 0 1px rgba(255, 255, 255, .025);
}
.login-card h2 {
    margin-bottom: 15px;
    font-size: 24px;
    padding: 6px;
}
.login-card p.error { max-width:270px; margin:8px auto 0; color:#ff9b9b; font-size:12px; line-height:1.35; }
.fields { border-color:rgba(135,151,167,.54); border-radius:14px; background:rgb(38 39 42 / 28%); }
.fields input { height:46px; padding-left:13px; }
.next { top:9px; }
.remember { display:flex; justify-content:center; margin-top:15px; font-size:14px; font-weight:bold; }
.forgot { padding-top:15px; }

.otp-mode > h2,
.otp-mode > .fields,
.otp-mode > .remember,
.otp-mode > .forgot,
.otp-mode > #loginNote { display:none !important; }

.login-card.otp-mode { min-height:356px; padding-top:40px; padding-bottom:36px; }
.otp-step { display:flex; flex-direction:column; align-items:stretch; text-align:center; }
.otp-step h2 { order:1; margin:0 0 16px; font-size:20px; }

/* Numérico: centra automáticamente cuatro o seis casillas. */
.otp-boxes { order:2; display:flex; justify-content:center; align-items:center; gap:7px; width:100%; margin:0 auto; }
.otp-boxes:not(.alpha-mode) input { flex:0 0 46px; width:46px; min-width:46px; height:48px; border:1px solid rgba(170,199,224,.38); border-radius:10px; background:rgba(231,244,255,.08); box-shadow:inset 0 1px rgba(255,255,255,.08),0 5px 15px rgba(4,17,30,.12); color:#fff; font-size:22px; font-weight:700; text-align:center; outline:none; backdrop-filter:blur(8px); }
.otp-boxes:not(.alpha-mode) input:focus { border-color:#48bfff; background:rgba(61,172,235,.12); box-shadow:0 0 0 3px rgba(22,170,245,.12); }

.otp-step .otp-help { order:3; margin:14px 0 3px; color:#b9c6d3; font-size:12px; line-height:1.4; }
.otp-step .otp-help strong { color:#fff; font-weight:700; }
.otp-forgot-link,
.forgot-code { order:4; align-self:center; display:block; margin-top:5px; padding:4px 8px; border:0; background:transparent; color:#00a8f4; font-size:14px; text-decoration:none; cursor:pointer; }
.otp-forgot-link:hover,
.forgot-code:hover { text-decoration:underline; }
.otp-step .otp-error { order:5; min-height:20px; margin:10px 0 0 !important; color:#ff3b30 !important; font-size:14px !important; text-align:center; }

/* Alfanumérico: ocupa todo el ancho disponible. */
.otp-boxes.alpha-mode { position:relative; display:block; width:100%; max-width:none; margin:0 auto; }
.otp-boxes.alpha-mode .alpha-code { display:block; width:100%; height:46px; padding:0 48px 0 14px; border:1px solid rgba(135,151,167,.38); border-radius:10px; background:rgb(38 39 42 / 28%); color:#fff; font-size:15px; font-weight:500; text-align:left; letter-spacing:.02em; outline:none; }
.otp-boxes.alpha-mode .alpha-code::placeholder { color:rgba(190,196,204,.35); }
.otp-boxes.alpha-mode .alpha-code:focus { border-color:#48bfff; box-shadow:0 0 0 3px rgba(22,170,245,.1); }
.alpha-mode.invalid .alpha-code,
.otp-boxes .alpha-code.error { border-color:#ff3b30 !important; }
.code-eye { position:absolute; right:10px; top:50%; width:30px; height:30px; padding:5px; border:0; background:transparent; color:#aab3bd; transform:translateY(-50%); cursor:pointer; }
.code-eye svg { width:20px; height:20px; fill:currentColor; }

.otp-step.shake { animation:otp-shake .5s; }
@keyframes otp-shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-4px)} 20%,40%,60%,80%{transform:translateX(4px)} }
@media (prefers-reduced-motion:reduce) { .theme-logo .radar-beam,.otp-step.shake { animation:none; } }