/* login.css — panel visual del login.
   Extraido del bloque <style> incrustado en login.php: la CSP del sitio
   es style-src 'self' SIN unsafe-inline, asi que ese bloque se descartaba
   entero y la pagina se veia sin estilos. Contenido intacto. 2026-08-26. */

/* Panel visual de login: CSS propio, no depende del build de Tailwind */
.login-shell {
    min-height: 100vh; display: flex; align-items: stretch; justify-content: center;
}
.login-form-side {
    flex: 1 1 420px; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgb(250 250 250);
}
.login-visual-side {
    flex: 1 1 480px; position: relative; overflow: hidden;
    background: linear-gradient(155deg, #0F172A 0%, #1D2B53 45%, #1D4ED8 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px 56px; color: #E2E8F0;
}
@media (max-width: 900px) { .login-visual-side { display: none; } }

.radar-wrap {
    position: absolute; top: 50%; right: -120px; transform: translateY(-50%);
    width: 460px; height: 460px; opacity: 0.55;
}
.radar-ring {
    position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
}
.radar-ring:nth-child(2) { inset: 60px; }
.radar-ring:nth-child(3) { inset: 120px; }
.radar-ring:nth-child(4) { inset: 180px; }
.radar-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(96,165,250,0.55) 0deg, rgba(96,165,250,0) 55deg, transparent 360deg);
    animation: radar-spin 4s linear infinite;
}
.radar-dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: #60A5FA; box-shadow: 0 0 0 0 rgba(96,165,250,0.6);
    animation: radar-blip 2.6s ease-out infinite;
}
.radar-dot.d1 { top: 34%; left: 58%; animation-delay: .3s; }
.radar-dot.d2 { top: 62%; left: 40%; animation-delay: 1.4s; }
.radar-dot.d3 { top: 48%; left: 70%; animation-delay: 2.1s; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-blip {
    0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.6); }
    70% { box-shadow: 0 0 0 14px rgba(96,165,250,0); }
    100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}

.login-visual-content { position: relative; z-index: 2; max-width: 380px; }
.login-visual-content h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
.login-visual-content p.lede { color: #B8C4D9; font-size: 0.95rem; line-height: 1.5; margin-bottom: 32px; }

.scan-log {
    background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 16px 18px; font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8rem; backdrop-filter: blur(6px);
}
.scan-log .line { display: flex; align-items: center; gap: 8px; color: #94A3B8; min-height: 22px; }
.scan-log .line .dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; flex-shrink: 0; }
.scan-log .line.current { color: #E2E8F0; }
.scan-log .caret { display: inline-block; width: 6px; height: 13px; background: #60A5FA; margin-left: 2px; animation: caret-blink 1s step-end infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

.login-features { list-style: none; margin-top: 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.login-features li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #CBD5E1; }
.login-features li svg { flex-shrink: 0; }