/* ============================================================
   assets/css/cuenta/login.css
   Estilos de login.php
   ============================================================ */

.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at center, #1e293b 0%, var(--bg-principal) 70%); }
.login-box { max-width: 450px; width: 100%; background: var(--bg-tarjeta); padding: 45px 40px; border-radius: 16px; border: 1px solid #1e293b; box-shadow: 0 0 50px rgba(0, 0, 0, 0.7); position: relative; overflow: hidden; }
.login-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primario), var(--color-acento)); }
.login-header { text-align: center; margin-bottom: 30px; }
.login-icono { font-size: 3.5rem; margin-bottom: 15px; display: block; }
.login-header h2 { color: var(--color-primario); font-size: 1.6rem; margin-bottom: 8px; letter-spacing: 1px; }
.login-header p { color: var(--texto-gris); font-size: 0.85rem; }
.alerta-exito { background: rgba(34, 197, 94, 0.15); border-left: 4px solid #22c55e; border-radius: 8px; padding: 15px 18px; margin-bottom: 20px; color: #86efac; font-size: 0.9rem; line-height: 1.5; }
.alerta-error { background: rgba(239, 68, 68, 0.15); border-left: 4px solid #ef4444; border-radius: 8px; padding: 15px 18px; margin-bottom: 20px; color: #fca5a5; font-size: 0.9rem; line-height: 1.5; animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.contador-intentos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px; background: rgba(234, 179, 8, 0.15); border-radius: 8px; border: 1px solid rgba(234, 179, 8, 0.4); color: var(--color-acento); font-size: 0.85rem; font-weight: 700; }
.contador-intentos .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
.contador-intentos .punto.medio { background: #eab308; }
.contador-intentos .punto.bajo { background: #ef4444; animation: pulso 1s infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
.bloqueo-banner { background: linear-gradient(135deg, #7f1d1d, #450a0a); border: 2px solid #ef4444; border-radius: 12px; padding: 25px; text-align: center; margin-bottom: 20px; animation: pulsoRojo 1.5s infinite; }
@keyframes pulsoRojo { 0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); } }
.bloqueo-banner .icono { font-size: 3rem; margin-bottom: 10px; display: block; }
.bloqueo-banner h3 { color: #ef4444; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.bloqueo-banner p { color: #fca5a5; font-size: 0.85rem; line-height: 1.5; }
.login-box input { background: #0a0f1c; padding: 14px 16px; border: 1px solid #334155; font-size: 1rem; margin: 8px 0; transition: all 0.3s; }
.login-box input:focus { border-color: var(--color-primario); box-shadow: 0 0 15px rgba(6, 182, 212, 0.3); }
.login-box button { padding: 14px; font-size: 1rem; letter-spacing: 2px; margin-top: 15px; }
.login-footer-links { text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid #1e293b; }
.login-footer-links a { color: var(--texto-gris); text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
.login-footer-links a:hover { color: var(--color-primario); }
.login-footer-links a.recuperar { color: var(--color-acento); font-weight: 700; }
.login-footer-links a.recuperar:hover { color: #facc15; }
.login-info { text-align: center; margin-top: 15px; font-size: 0.75rem; color: #64748b; }

/* === Estilos que estaban en línea (style="...") ===
   La clase se repite para igualar la especificidad del atributo style original. */
.ux-c08301.ux-c08301.ux-c08301 {
    text-align: center;
    margin-top: 20px;
}
.ux-b012d8.ux-b012d8.ux-b012d8 {
    color: #94a3b8;
    font-size: 0.85rem;
}
.ux-b02c48.ux-b02c48.ux-b02c48 {
    color: #eab308;
}
.ux-34cd5d.ux-34cd5d.ux-34cd5d {
    margin-left: 10px;
}
.ux-eed793.ux-eed793.ux-eed793 {
    color: #94a3b8;
    font-size: 0.85rem;
    display: block;
    margin-top: 10px;
}
.ux-aa8adf.ux-aa8adf.ux-aa8adf {
    color: #94a3b8;
    font-size: 0.85rem;
    display: block;
    margin-top: 15px;
}
.ux-a3161d.ux-a3161d.ux-a3161d {
    margin-top: 15px;
}

.intento-gastado.intento-gastado.intento-gastado { opacity: 0.25; }