.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 15% 15%, #16295c 0%, transparent 60%),
                radial-gradient(1000px 700px at 85% 85%, #2a0f18 0%, transparent 55%),
                linear-gradient(135deg, var(--navy-profundo) 0%, #0a1730 100%);
}

/* Manchas decorativas en movimiento sutil — sensación "viva" sin distraer */
.login-wrapper::before,
.login-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
    animation: flotar 12s ease-in-out infinite;
}
.login-wrapper::before {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--azul-cerceta) 0%, transparent 70%);
    top: -120px; left: -120px;
}
.login-wrapper::after {
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--oro-bronce) 0%, transparent 70%);
    bottom: -140px; right: -100px;
    animation-delay: -6s;
}
@keyframes flotar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.08); }
}

.login-card {
    background: var(--blanco);
    width: 380px;
    max-width: 90vw;
    padding: 40px 32px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    animation: aparecer .55s cubic-bezier(.16,1,.3,1) both;
}
/* Filo superior con gradiente de marca — remata el look "corporativo con carácter" */
.login-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--borgona), var(--oro-bronce), var(--azul-cerceta));
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .login-wrapper::before, .login-wrapper::after, .login-card { animation: none; }
}

.login-logo { max-width: 160px; margin-bottom: 12px; }

.login-brand {
    color: var(--oro-bronce);
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.login-subtitle {
    color: var(--navy-profundo);
    opacity: 0.7;
    margin-bottom: 24px;
    font-size: 14px;
}

.login-form { display: flex; flex-direction: column; text-align: left; gap: 6px; }

.login-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-profundo);
    margin-top: 10px;
}

.login-form input {
    padding: 11px 12px;
    border: 1.5px solid var(--gris-frio);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border 0.15s ease;
}
.login-form input:focus { border-color: var(--azul-cerceta); box-shadow: 0 0 0 3px rgba(0,125,140,0.15); }

.campo-password { position: relative; display: flex; align-items: center; }
.campo-password input { padding-right: 42px; width: 100%; }
.toggle-password {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; background: transparent;
    color: var(--gris-texto); cursor: pointer; border-radius: 7px;
    transition: color .15s ease, background .15s ease;
}
.toggle-password:hover { color: var(--azul-cerceta); background: var(--gris-frio); }
.toggle-password svg { width: 19px; height: 19px; }

.login-btn {
    margin-top: 20px; width: 100%; justify-content: center; padding: 13px;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(128,28,45,0.35); }

.login-error {
    background: rgba(128,28,45,0.1);
    color: var(--borgona);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ===== Divisor "o" entre Ingresar y Crear cuenta ===== */
.login-divisor {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 12px; color: var(--gris-texto); font-size: 12px; font-weight: 600;
}
.login-divisor::before, .login-divisor::after {
    content: ''; flex: 1; height: 1px; background: var(--gris-frio);
}

/* El segundo botón (Crear cuenta) no necesita el margen extra del primero */
.login-card > .login-btn { margin-top: 0; }