/* ============================================================
   PASSWORD-STRENGTH.CSS
   Indicador visual de força de senha — usado em cadastro,
   redefinir senha e trocar senha no perfil
   ============================================================ */

.pwd-rules {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #1e2d45;
    border-radius: 8px;
    list-style: none;
    display: none; /* mostra só quando o campo tem foco */
}
.pwd-rules.is-visible {
    display: block;
}

.pwd-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    color: #64748b;
    padding: 3px 0;
    transition: color .2s;
}
.pwd-rule i {
    font-size: .7rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.pwd-rule.ok {
    color: #4ade80;
}
.pwd-rule.fail {
    color: #f87171;
}

/* Barra de força */
.pwd-strength-bar {
    height: 4px;
    border-radius: 4px;
    background: #1e2d45;
    margin-top: 6px;
    overflow: hidden;
}
.pwd-strength-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width .3s ease, background .3s ease;
}
.pwd-strength-bar-fill.s0 { width: 0%;   background: transparent; }
.pwd-strength-bar-fill.s1 { width: 20%;  background: #ef4444; }
.pwd-strength-bar-fill.s2 { width: 40%;  background: #f97316; }
.pwd-strength-bar-fill.s3 { width: 60%;  background: #fbbf24; }
.pwd-strength-bar-fill.s4 { width: 80%;  background: #a3e635; }
.pwd-strength-bar-fill.s5 { width: 100%; background: #4ade80; }

.pwd-strength-label {
    font-family: 'Poppins', sans-serif;
    font-size: .68rem;
    color: #64748b;
    margin-top: 3px;
    text-align: right;
}