/* public_html/assets/css/login.css */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(135deg, #f3ebfa 0%, #fef7ff 50%, #ede5f4 100%);
    min-height: 100vh;
    min-height: 100dvh;
}
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.electric-sunset {
    background: linear-gradient(135deg, #7c3aed 0%, #da2676 100%);
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon { font-variation-settings: 'FILL' 1; }

/* Animações */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.animate-slide-right { animation: slideRight 0.4s ease forwards; }
.animate-slide-left { animation: slideLeft 0.4s ease forwards; }
.animate-float { animation: float 4s ease-in-out infinite; }

/* Password strength */
.strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.strength-weak { background: #ba1a1a; width: 25%; }
.strength-medium { background: #FFB300; width: 50%; }
.strength-good { background: #0284c7; width: 75%; }
.strength-strong { background: #04D361; width: 100%; }

/* OTP input */
.otp-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid #ccc3d8;
    border-radius: 12px;
    transition: all 0.2s;
}
.otp-input:focus {
    border-color: #630ed4;
    box-shadow: 0 0 0 3px rgba(99, 14, 212, 0.15);
    outline: none;
}

/* Tipo de perfil */
.perfil-card {
    transition: all 0.3s ease;
    cursor: pointer;
}
.perfil-card:hover {
    transform: translateY(-4px);
}
.perfil-card.selected {
    border-color: #630ed4 !important;
    background: rgba(99, 14, 212, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(99, 14, 212, 0.15);
}
/* Barra de força com preenchimento */
.strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
    background: #e2e8f0;
}
.strength-fill {
    height: 100%;
    border-radius: 2px;
    transition: all 0.4s ease;
    width: 0%;
}
.strength-weak .strength-fill { width: 25%; background: #ba1a1a; }
.strength-fair .strength-fill { width: 50%; background: #FFB300; }
.strength-good .strength-fill { width: 75%; background: #0284c7; }
.strength-strong .strength-fill { width: 100%; background: #04D361; }

/* Checklist de requisitos */
.req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.req-met {
    color: #04D361;
}
.req-unmet {
    color: #4a4455;
}
.req-met .material-symbols-outlined {
    color: #04D361;
}
.req-unmet .material-symbols-outlined {
    color: #ccc3d8;
}

/* Animações adicionais */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}
.animate-shake {
    animation: shake 0.4s ease;
}
@keyframes checkBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.animate-check {
    animation: checkBounce 0.5s ease;
}