/* ===============================
   LOGIN GLOBAL
=================================*/

.login-page {
    background: linear-gradient(135deg, #000000, #0d0d0d);
    font-family: 'Poppins', sans-serif;
}

/* ===============================
   CARD CONTENEDORA
=================================*/

.login-card {
    background: #0a0a0a;
    color: #ffffff;
    border-radius: 16px;
    padding: 40px 30px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.08);
}

/* ===============================
   TÍTULO
=================================*/

.login-card h3 {
    color: #d4af37;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

/* ===============================
   FORMULARIO
=================================*/

.login-card .form-label {
    color: #d4af37;
    font-size: 14px;
    font-weight: 500;
}

.login-card .form-control {
    background-color: #111;
    border: 1px solid #333;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px;
}

.login-card .form-control::placeholder {
    color: #666;
}

.login-card .form-control:focus {
    background-color: #111;
    border-color: #d4af37;
    box-shadow: 0 0 0 0.15rem rgba(212, 175, 55, 0.25);
    color: #fff;
}

/* ===============================
   BOTÓN PRINCIPAL
=================================*/

.login-card .btn-gold {
    background: #d4af37;
    color: #000;
    font-weight: 600;
    border-radius: 25px;
    padding: 10px;
    border: none;
    transition: all 0.3s ease;
}

.login-card .btn-gold:hover {
    background: #e6c75a;
    transform: translateY(-1px);
}

/* ===============================
   TEXTO "O ingresa con"
=================================*/

.login-card .text-muted {
    color: #d4af37;
    font-size: 14px;
    text-align: center;
}

/* ===============================
   BOTÓN GOOGLE
=================================*/

.login-card #loginGoogle {
    background-color: #ffffff;
    color: #000000;
    border-radius: 25px;
    font-weight: 500;
    border: 1px solid #ddd;
    padding: 8px;
    transition: all 0.3s ease;
}

.login-card #loginGoogle:hover {
    background-color: #f5f5f5;
}

/* ===============================
   LINKS (OLVIDASTE CONTRASEÑA)
=================================*/

.login-card a,
.login-card a:visited {
    color: #d4af37;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-card a:hover {
    color: #e6c75a;
    text-decoration: underline;
}
/* ALERTAS */
.alert {
    border-radius: 12px;
    font-size: 14px;
}

.alert-danger {
    background: #2a0f12;
    border: 1px solid #842029;
    color: #ffb3b3;
}

.alert-success {
    background: #0f2a16;
    border: 1px solid #146c43;
    color: #b6f5d1;
}

#login-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 45px rgba(212, 175, 55, 0.25),
        0 0 100px rgba(0, 0, 0, 0.9);
}

/* SHAKE */
.shake {
    animation: shake 0.4s;
}

@keyframes shake {
0%{transform:translateX(0);}
25%{transform:translateX(-5px);}
50%{transform:translateX(5px);}
75%{transform:translateX(-5px);}
100%{transform:translateX(0);}
}

/* ===============================
   RESPONSIVE
=================================*/

@media (max-width: 576px) {
    .login-card {
        margin: 20px;
        padding: 30px 20px;
    }
}