/* Contenedor tipo tarjeta/alert suave, blanco */
.pwd-rules {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem; /* similar a Bootstrap */
    padding: 1rem 1.1rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

/* Título */
.pwd-rules-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #212529; /* Bootstrap text */
}

/* Lista */
.pwd-rules-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    /* Cada regla */
    .pwd-rules-list .rule {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .25rem 0;
        color: #6c757d; /* text-muted */
    }

        /* Icono base */
        .pwd-rules-list .rule i {
            font-size: 1rem;
            opacity: .45;
        }

        /* Cuando cumple */
        .pwd-rules-list .rule.ok {
            color: #198754; /* Bootstrap success */
            font-weight: 600;
        }

            .pwd-rules-list .rule.ok i {
                opacity: 1;
            }

        /* Cuando NO cumple (opcional: más claro) */
        .pwd-rules-list .rule:not(.ok) i {
            opacity: .35;
        }

/* Texto de ejemplo de caracteres */
.pwd-rules .muted {
    color: #6c757d;
    font-weight: 600;
}

/* Opcional: reduce el tamaño en pantallas pequeñas */
@media (max-width: 576px) {
    .pwd-rules {
        padding: .85rem .95rem;
    }
}
/* Ojo dentro del form-floating sin romper estilos */
#btnTogglePwd {
    text-decoration: none;
    color: #6c757d; /* similar a text-muted */
}

    #btnTogglePwd:hover {
        color: #212529;
    }

.d-none {
    display: none !important;
}

.pwd-rules-visible {
    display: block !important;
}