/* ==========================================================
   login-bg.css — Pantalla de login espectacular
   Trama Voronoi animada (identidad visual Solo2)
   + glassmorphism + glow pulsante
   ========================================================== */

/* --- Keyframes --- */
@keyframes voronoi-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 300px 300px; }
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes title-glow {
    0%, 100% { text-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1); }
    50%      { text-shadow: 0 0 40px rgba(99, 102, 241, 0.6), 0 0 90px rgba(99, 102, 241, 0.2); }
}

/* --- Override view backgrounds --- */
#view-login,
#view-register {
    position: relative;
    background: linear-gradient(135deg, #0a0e1a 0%, #1e1b4b 40%, #0f172a 70%, #1a1040 100%) !important;
    background-size: 300% 300%;
    animation: gradient-shift 14s ease infinite;
    overflow-y: auto;
}

/* --- Background container --- */
.login-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* --- Voronoi mesh: misma trama del panel de chat, amplificada --- */

/* Capa 1: trama grande, indigo, drift lento */
.login-bg-voronoi {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M68.4,0.0L69.0,8.2M123.0,0.0L122.3,5.8M0.0,183.4L14.2,182.2M0.0,1.3L56.1,16.3M0.0,93.4L1.2,94.1M69.0,8.2L122.3,5.8M69.0,8.2L56.1,16.3M56.1,16.3L58.2,80.1M122.3,5.8L123.7,7.2M123.7,7.2L174.5,14.6M123.7,7.2L121.5,97.4M192.6,0.0L174.5,14.6M174.5,14.6L197.7,98.3M235.6,0.0L229.7,90.7M297.4,0.0L297.9,0.7M14.2,182.2L1.2,94.1M14.2,182.2L33.6,192.3M1.2,94.1L58.2,80.1M58.2,80.1L81.5,96.2M81.5,96.2L118.7,99.1M81.5,96.2L33.6,192.3M33.6,192.3L40.3,199.9M197.7,98.3L208.3,103.9M197.7,98.3L121.5,97.4M121.5,97.4L118.7,99.1M118.7,99.1L117.7,205.1M229.7,90.7L280.9,82.0M229.7,90.7L208.3,103.9M208.3,103.9L208.7,106.9M208.7,106.9L175.3,190.6M208.7,106.9L273.8,185.5M40.3,199.9L61.7,207.0M40.3,199.9L0.0,276.9M117.7,205.1L132.9,213.1M117.7,205.1L61.7,207.0M61.7,207.0L68.4,300.0M132.9,213.1L134.9,212.9M132.9,213.1L123.0,300.0M175.3,190.6L241.3,215.6M175.3,190.6L134.9,212.9M134.9,212.9L213.8,282.9M273.8,185.5L300.0,183.4M273.8,185.5L241.3,215.6M241.3,215.6L238.9,279.3M297.9,0.7L300.0,1.3M297.9,0.7L280.9,82.0M280.9,82.0L300.0,93.4M300.0,276.9L291.8,292.6M213.8,282.9L236.9,280.5M213.8,282.9L192.6,300.0M238.9,279.3L291.8,292.6M238.9,279.3L236.9,280.5M236.9,280.5L235.6,300.0M291.8,292.6L297.4,300.0' fill='none' stroke='%236366f1' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 350px 350px;
    animation: voronoi-drift 60s linear infinite;
}

/* Capa 2: trama pequeña, blanca tenue, drift opuesto (parallax) */
.login-bg-voronoi-2 {
    position: absolute;
    inset: -30%;
    width: 160%;
    height: 160%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M68.4,0.0L69.0,8.2M123.0,0.0L122.3,5.8M0.0,183.4L14.2,182.2M0.0,1.3L56.1,16.3M0.0,93.4L1.2,94.1M69.0,8.2L122.3,5.8M69.0,8.2L56.1,16.3M56.1,16.3L58.2,80.1M122.3,5.8L123.7,7.2M123.7,7.2L174.5,14.6M123.7,7.2L121.5,97.4M192.6,0.0L174.5,14.6M174.5,14.6L197.7,98.3M235.6,0.0L229.7,90.7M297.4,0.0L297.9,0.7M14.2,182.2L1.2,94.1M14.2,182.2L33.6,192.3M1.2,94.1L58.2,80.1M58.2,80.1L81.5,96.2M81.5,96.2L118.7,99.1M81.5,96.2L33.6,192.3M33.6,192.3L40.3,199.9M197.7,98.3L208.3,103.9M197.7,98.3L121.5,97.4M121.5,97.4L118.7,99.1M118.7,99.1L117.7,205.1M229.7,90.7L280.9,82.0M229.7,90.7L208.3,103.9M208.3,103.9L208.7,106.9M208.7,106.9L175.3,190.6M208.7,106.9L273.8,185.5M40.3,199.9L61.7,207.0M40.3,199.9L0.0,276.9M117.7,205.1L132.9,213.1M117.7,205.1L61.7,207.0M61.7,207.0L68.4,300.0M132.9,213.1L134.9,212.9M132.9,213.1L123.0,300.0M175.3,190.6L241.3,215.6M175.3,190.6L134.9,212.9M134.9,212.9L213.8,282.9M273.8,185.5L300.0,183.4M273.8,185.5L241.3,215.6M241.3,215.6L238.9,279.3M297.9,0.7L300.0,1.3M297.9,0.7L280.9,82.0M280.9,82.0L300.0,93.4M300.0,276.9L291.8,292.6M213.8,282.9L236.9,280.5M213.8,282.9L192.6,300.0M238.9,279.3L291.8,292.6M238.9,279.3L236.9,280.5M236.9,280.5L235.6,300.0M291.8,292.6L297.4,300.0' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: voronoi-drift 90s linear infinite reverse;
}

/* --- Radial glow: foco visual al centro-arriba --- */
.login-bg-glow {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 40%, transparent 70%);
    pointer-events: none;
}

/* --- Overlay: oscurece bordes para legibilidad --- */
.login-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 26, 0.5) 0%,
        transparent 30%,
        transparent 70%,
        rgba(10, 14, 26, 0.7) 100%
    );
    pointer-events: none;
}

/* --- Hero branding --- */
.login-hero {
    padding-top: 3rem;
    padding-bottom: 1rem;
    text-align: center;
}

.login-hero-title {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: white;
    animation: title-glow 4s ease-in-out infinite;
    transition: color 0.2s;
}

.login-hero-title:hover {
    color: #a5b4fc;
}

.login-hero-claim {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.06em;
    line-height: 1.6;
}

.login-hero-claim .accent {
    color: #818cf8;
    font-weight: 600;
}

/* --- Card glassmorphism --- */
#view-login .card.glow,
#view-register .card.glow {
    background: rgba(30, 27, 75, 0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- CTA pill --- */
.login-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 0.8125rem;
    transition: all 0.25s;
    text-decoration: none;
}

.login-cta-pill:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #c7d2fe;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

/* --- Reset link --- */
.login-reset-link {
    font-size: 0.6875rem;
    color: rgba(248, 113, 113, 0.4);
    transition: color 0.2s;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-reset-link:hover {
    color: rgba(248, 113, 113, 0.75);
}

/* --- Responsive: desktop --- */
@media (min-width: 640px) {
    .login-hero {
        padding-top: 5rem;
        padding-bottom: 1.5rem;
    }
    .login-hero-title {
        font-size: 3.75rem;
    }
    .login-hero-claim {
        font-size: 1.125rem;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    #view-login, #view-register { animation: none; }
    .login-bg-voronoi, .login-bg-voronoi-2 { animation: none; }
    .login-hero-title { animation: none; text-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
}

/* ==========================================================
   LIGHT THEME
   ========================================================== */

[data-theme="light"] #view-login,
[data-theme="light"] #view-register {
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 40%, #f0f0ff 70%, #e8eeff 100%) !important;
    animation: none;
}

[data-theme="light"] .login-bg-voronoi {
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M68.4,0.0L69.0,8.2M123.0,0.0L122.3,5.8M0.0,183.4L14.2,182.2M0.0,1.3L56.1,16.3M0.0,93.4L1.2,94.1M69.0,8.2L122.3,5.8M69.0,8.2L56.1,16.3M56.1,16.3L58.2,80.1M122.3,5.8L123.7,7.2M123.7,7.2L174.5,14.6M123.7,7.2L121.5,97.4M192.6,0.0L174.5,14.6M174.5,14.6L197.7,98.3M235.6,0.0L229.7,90.7M297.4,0.0L297.9,0.7M14.2,182.2L1.2,94.1M14.2,182.2L33.6,192.3M1.2,94.1L58.2,80.1M58.2,80.1L81.5,96.2M81.5,96.2L118.7,99.1M81.5,96.2L33.6,192.3M33.6,192.3L40.3,199.9M197.7,98.3L208.3,103.9M197.7,98.3L121.5,97.4M121.5,97.4L118.7,99.1M118.7,99.1L117.7,205.1M229.7,90.7L280.9,82.0M229.7,90.7L208.3,103.9M208.3,103.9L208.7,106.9M208.7,106.9L175.3,190.6M208.7,106.9L273.8,185.5M40.3,199.9L61.7,207.0M40.3,199.9L0.0,276.9M117.7,205.1L132.9,213.1M117.7,205.1L61.7,207.0M61.7,207.0L68.4,300.0M132.9,213.1L134.9,212.9M132.9,213.1L123.0,300.0M175.3,190.6L241.3,215.6M175.3,190.6L134.9,212.9M134.9,212.9L213.8,282.9M273.8,185.5L300.0,183.4M273.8,185.5L241.3,215.6M241.3,215.6L238.9,279.3M297.9,0.7L300.0,1.3M297.9,0.7L280.9,82.0M280.9,82.0L300.0,93.4M300.0,276.9L291.8,292.6M213.8,282.9L236.9,280.5M213.8,282.9L192.6,300.0M238.9,279.3L291.8,292.6M238.9,279.3L236.9,280.5M236.9,280.5L235.6,300.0M291.8,292.6L297.4,300.0' fill='none' stroke='%234f46e5' stroke-width='0.8'/%3E%3C/svg%3E");
}

[data-theme="light"] .login-bg-voronoi-2 { opacity: 0.04; }

[data-theme="light"] .login-bg-glow {
    background: radial-gradient(ellipse, rgba(79, 70, 229, 0.08) 0%, transparent 60%);
}

[data-theme="light"] .login-bg-overlay {
    background: linear-gradient(
        to bottom,
        rgba(248, 250, 252, 0.5) 0%,
        transparent 30%,
        transparent 70%,
        rgba(248, 250, 252, 0.5) 100%
    );
}

[data-theme="light"] .login-hero-title {
    color: #1e1b4b;
    animation: none;
    text-shadow: none;
}
[data-theme="light"] .login-hero-title:hover { color: #4f46e5; }
[data-theme="light"] .login-hero-claim { color: rgba(30, 27, 75, 0.6); }
[data-theme="light"] .login-hero-claim .accent { color: #4f46e5; }

[data-theme="light"] #view-login .card.glow,
[data-theme="light"] #view-register .card.glow {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(79, 70, 229, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .login-cta-pill {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.25);
    color: #4338ca;
}
[data-theme="light"] .login-cta-pill:hover {
    background: rgba(79, 70, 229, 0.15);
    color: #3730a3;
}
[data-theme="light"] .login-reset-link { color: rgba(220, 38, 38, 0.35); }
[data-theme="light"] .login-reset-link:hover { color: rgba(220, 38, 38, 0.65); }